more minor theme adjustments

src/renderer/components/item-list/item-table-list/item-table-list-column.module.css

@@ -129,7 +129,7 @@
     }
 
     @mixin light {
-        background-color: var(--theme-colors-surface);
+        background-color: darken(var(--theme-colors-surface), 5%);
     }
 }
 

src/renderer/features/settings/components/general/theme-settings.tsx

@@ -25,6 +25,10 @@ const getThemeSwatchColors = (theme: AppTheme) => {
     return {
         background: themeConfig.colors?.background || 'rgb(0, 0, 0)',
         foreground: themeConfig.colors?.foreground || 'rgb(255, 255, 255)',
+        primary:
+            themeConfig.colors?.primary ||
+            themeConfig.colors?.['state-info'] ||
+            'rgb(53, 116, 252)',
         surface: themeConfig.colors?.surface || themeConfig.colors?.background || 'rgb(0, 0, 0)',
     };
 };
@@ -74,6 +78,7 @@ const renderThemeOption = ({ option }: { option: { label: string; value: string
                 <ColorSwatch color={String(colors.background)} />
                 <ColorSwatch color={String(colors.surface)} />
                 <ColorSwatch color={String(colors.foreground)} />
+                <ColorSwatch color={String(colors.primary)} />
             </Group>
             <span style={{ flex: 1 }}>{option.label}</span>
         </Group>
@@ -144,6 +149,7 @@ export const ThemeSettings = () => {
                         }
                     }}
                     renderOption={renderThemeOption}
+                    width={240}
                 />
             ),
             description: t('setting.theme', {
@@ -167,6 +173,7 @@ export const ThemeSettings = () => {
                         });
                     }}
                     renderOption={renderThemeOption}
+                    width={240}
                 />
             ),
             description: t('setting.themeDark', {
@@ -190,6 +197,7 @@ export const ThemeSettings = () => {
                         });
                     }}
                     renderOption={renderThemeOption}
+                    width={240}
                 />
             ),
             description: t('setting.themeLight', {

src/renderer/layouts/default-layout/player-bar.module.css

@@ -1,7 +1,15 @@
 .container {
     z-index: 200;
     grid-area: player;
-    background: darken(var(--theme-colors-background), 10%);
+
+    @mixin light {
+        background: darken(var(--theme-colors-background), 5%);
+    }
+
+    @mixin dark {
+        background: darken(var(--theme-colors-background), 10%);
+    }
+
     transition: background 0.5s;
 }