Design: Add "Recolor to gold" feature

If the user doesn't want their theme, let us recolor the icons to Cmdr gold too. Looks very nice.

Author: vdavid

apps/desktop/src/lib/file-explorer/selection/FileIcon.svelte

@@ -2,6 +2,7 @@
     import type { FileEntry } from '../types'
     import { getCachedIcon, iconCacheVersion } from '$lib/icon-cache'
     import { getFallbackEmoji } from '../views/file-list-utils'
+    import { getIsCmdrGold } from '$lib/settings/reactive-settings.svelte'
 
     interface Props {
         file: FileEntry
@@ -17,11 +18,14 @@
         void _cacheVersion // Track cache version for reactivity
         return getCachedIcon(f.iconId)
     }
+
+    const isFolderIcon = $derived(file.iconId === 'dir' || file.iconId === 'symlink-dir')
+    const recolorToGold = $derived(isFolderIcon && getIsCmdrGold())
 </script>
 
 <span class="icon-wrapper">
     {#if getIconUrl(file)}
-        <img class="icon" src={getIconUrl(file)} alt="" width="16" height="16" />
+        <img class="icon" class:gold-folder={recolorToGold} src={getIconUrl(file)} alt="" width="16" height="16" />
     {:else}
         <span class="icon-emoji">{getFallbackEmoji(file)}</span>
     {/if}
@@ -47,6 +51,10 @@
         object-fit: contain;
     }
 
+    .gold-folder {
+        filter: grayscale(1) sepia(1) hue-rotate(3deg) saturate(2.5) brightness(0.95);
+    }
+
     .icon-emoji {
         font-size: var(--font-size-sm);
         width: 16px;

apps/desktop/src/lib/settings/reactive-settings.svelte.ts

@@ -11,6 +11,7 @@ import {
     type DateTimeFormat,
     type FileSizeFormat,
     type DirectorySortMode,
+    type AppColor,
     densityMappings,
 } from '$lib/settings'
 import { formatDateTimeWithFormat, formatFileSizeWithFormat } from './format-utils'
@@ -26,6 +27,7 @@ let customDateTimeFormat = $state<string>('YYYY-MM-DD HH:mm')
 let fileSizeFormat = $state<FileSizeFormat>('binary')
 let useAppIconsForDocuments = $state<boolean>(true)
 let directorySortMode = $state<DirectorySortMode>('likeFiles')
+let appColor = $state<AppColor>('cmdr-gold')
 
 let initialized = false
 let unsubscribe: (() => void) | undefined
@@ -48,6 +50,7 @@ export async function initReactiveSettings(): Promise<void> {
         fileSizeFormat = getSetting('appearance.fileSizeFormat')
         useAppIconsForDocuments = getSetting('appearance.useAppIconsForDocuments')
         directorySortMode = getSetting('listing.directorySortMode')
+        appColor = getSetting('appearance.appColor')
 
         // Subscribe to changes (including cross-window changes)
         unsubscribe = onSettingChange((id, value) => {
@@ -80,6 +83,9 @@ export async function initReactiveSettings(): Promise<void> {
                     log.info('Applying directory sort mode change: {value}', { value })
                     directorySortMode = value as DirectorySortMode
                     break
+                case 'appearance.appColor':
+                    appColor = value as AppColor
+                    break
             }
         })
 
@@ -123,6 +129,11 @@ export function getDirectorySortMode(): DirectorySortMode {
     return directorySortMode
 }
 
+/** Whether the user has selected Cmdr gold as their app color */
+export function getIsCmdrGold(): boolean {
+    return appColor === 'cmdr-gold'
+}
+
 // ============================================================================
 // Formatting utilities that use reactive settings
 // ============================================================================