Feature: Update folder icons upon OS theme change

They used to become stale when color was updated in System Settings > Appearance > Theme > Color. Now they update immediately.

Author: vdavid

apps/desktop/src-tauri/src/commands/icons.rs

@@ -36,3 +36,10 @@ pub fn refresh_directory_icons(
 pub fn clear_extension_icon_cache() {
     icons::clear_extension_icon_cache();
 }
+
+/// Clears cached directory icons (`dir`, `symlink-dir`, `path:*`).
+/// Called when the system theme or accent color changes.
+#[tauri::command]
+pub fn clear_directory_icon_cache() {
+    icons::clear_directory_icon_cache();
+}

apps/desktop/src-tauri/src/file_system/volume/local_posix.rs

@@ -3,7 +3,9 @@
 use super::{
     CopyScanResult, ScanConflict, SourceItemInfo, SpaceInfo, Volume, VolumeError, VolumeScanner, VolumeWatcher,
 };
-use crate::file_system::listing::{FileEntry, get_single_entry, list_directory_core, list_directory_core_with_progress};
+use crate::file_system::listing::{
+    FileEntry, get_single_entry, list_directory_core, list_directory_core_with_progress,
+};
 use crate::indexing::scanner::{self, ScanConfig, ScanError, ScanHandle, ScanSummary};
 use crate::indexing::watcher::{DriveWatcher, FsChangeEvent, WatcherError};
 use crate::indexing::writer::IndexWriter;

apps/desktop/src-tauri/src/icons.rs

@@ -57,6 +57,17 @@ pub fn clear_extension_icon_cache() {
     }
 }
 
+/// Clears all cached icons for directory entries (`dir`, `symlink-dir`, `path:*`).
+/// Called when the system theme or accent color changes, since macOS folder icons
+/// are tinted by the current appearance.
+pub fn clear_directory_icon_cache() {
+    ensure_cache();
+    let mut cache = ICON_CACHE.write().unwrap();
+    if let Some(ref mut map) = *cache {
+        map.retain(|key, _| key != "dir" && key != "symlink-dir" && !key.starts_with("path:"));
+    }
+}
+
 /// Converts an image to a base64 WebP data URL.
 fn image_to_data_url(img: &DynamicImage) -> Option<String> {
     // Resize to configured size

apps/desktop/src-tauri/src/lib.rs

@@ -473,6 +473,7 @@ pub fn run() {
             commands::icons::get_icons,
             commands::icons::refresh_directory_icons,
             commands::icons::clear_extension_icon_cache,
+            commands::icons::clear_directory_icon_cache,
             commands::ui::show_file_context_menu,
             commands::ui::show_main_window,
             commands::ui::update_menu_context,

apps/desktop/src/lib/accent-color.ts

@@ -11,6 +11,7 @@
 import { invoke } from '@tauri-apps/api/core'
 import { listen, type UnlistenFn } from '@tauri-apps/api/event'
 import { getAppLogger } from '$lib/logging/logger'
+import { clearDirectoryIconCache } from '$lib/icon-cache'
 
 const log = getAppLogger('accent-color')
 
@@ -38,6 +39,9 @@ export async function initAccentColor(): Promise<void> {
     try {
         unlisten = await listen<string>('accent-color-changed', (event) => {
             applyAccentColor(event.payload)
+            // macOS renders folder icons with the accent color baked in,
+            // so we need to flush cached folder bitmaps and re-fetch them.
+            void clearDirectoryIconCache()
             log.info('System accent color changed: {hex}', { hex: event.payload })
         })
     } catch (error) {

apps/desktop/src/lib/file-explorer/views/BriefList.svelte

@@ -22,7 +22,7 @@
     import { getSetting } from '$lib/settings/settings-store'
     import { formatNumber, pluralize } from '../selection/selection-info-utils'
     import { isScanning } from '$lib/indexing/index-state.svelte'
-    import { extensionCacheCleared } from '$lib/icon-cache'
+    import { iconCacheCleared } from '$lib/icon-cache'
     import type { RenameState } from '../rename/rename-state.svelte'
 
     interface Props {
@@ -421,9 +421,9 @@
         prevContainerHeight = height
     })
 
-    // Re-fetch icons when the extension icon cache is cleared (settings change)
+    // Re-fetch icons when the icon cache is cleared (settings or theme change)
     $effect(() => {
-        void $extensionCacheCleared // Track the store value
+        void $iconCacheCleared // Track the store value
         // Re-fetch icons for all cached entries
         if (cachedEntries.length > 0) {
             refetchIconsForEntries(cachedEntries)

apps/desktop/src/lib/file-explorer/views/FullList.svelte

@@ -31,7 +31,7 @@
         formatDateTime,
         formatFileSize,
     } from '$lib/settings/reactive-settings.svelte'
-    import { extensionCacheCleared } from '$lib/icon-cache'
+    import { iconCacheCleared } from '$lib/icon-cache'
     import type { RenameState } from '../rename/rename-state.svelte'
 
     interface Props {
@@ -337,9 +337,9 @@
         return getVisibleItemsCountUtil(containerHeight, rowHeight)
     }
 
-    // Re-fetch icons when the extension icon cache is cleared (settings change)
+    // Re-fetch icons when the icon cache is cleared (settings or theme change)
     $effect(() => {
-        void $extensionCacheCleared // Track the store value
+        void $iconCacheCleared // Track the store value
         // Re-fetch icons for all cached entries
         if (cachedEntries.length > 0) {
             refetchIconsForEntries(cachedEntries)

apps/desktop/src/lib/icon-cache.ts

@@ -6,6 +6,7 @@ import {
     getIcons,
     refreshDirectoryIcons as refreshIconsCommand,
     clearExtensionIconCache as clearExtensionIconCacheCommand,
+    clearDirectoryIconCache as clearDirectoryIconCacheCommand,
 } from './tauri-commands'
 
 const STORAGE_KEY = 'cmdr-icon-cache'
@@ -20,10 +21,11 @@ const memoryCache = new Map<string, string>()
 export const iconCacheVersion = writable(0)
 
 /**
- * Reactive counter that increments when extension icon cache is cleared.
+ * Reactive counter that increments when part of the icon cache is cleared
+ * (extension icons, directory icons, etc.).
  * List components subscribe to this to re-fetch icons for visible files.
  */
-export const extensionCacheCleared = writable(0)
+export const iconCacheCleared = writable(0)
 
 /** Load persisted cache from localStorage */
 function loadFromStorage(): void {
@@ -153,8 +155,27 @@ export async function clearExtensionIconCache(): Promise<void> {
     // Notify list components to re-fetch icons for visible files
     // This must happen BEFORE incrementing iconCacheVersion so components
     // can re-fetch before re-rendering with the cleared cache
-    extensionCacheCleared.update((v) => v + 1)
+    iconCacheCleared.update((v) => v + 1)
 
     // Trigger reactive update so components re-fetch icons
     iconCacheVersion.update((v) => v + 1)
 }
+
+/**
+ * Clears all cached directory icons from both memory and localStorage.
+ * Called when the system theme or accent color changes, since macOS renders
+ * folder icons with the current accent color baked in.
+ */
+export async function clearDirectoryIconCache(): Promise<void> {
+    await clearDirectoryIconCacheCommand()
+
+    for (const key of memoryCache.keys()) {
+        if (key === 'dir' || key === 'symlink-dir' || key.startsWith('path:')) {
+            memoryCache.delete(key)
+        }
+    }
+
+    saveToStorage()
+    iconCacheCleared.update((v) => v + 1)
+    iconCacheVersion.update((v) => v + 1)
+}

apps/desktop/src/lib/tauri-commands/file-viewer.ts

@@ -162,6 +162,14 @@ export async function clearExtensionIconCache(): Promise<void> {
     await invoke('clear_extension_icon_cache')
 }
 
+/**
+ * Clears cached directory icons (`dir`, `symlink-dir`, `path:*`).
+ * Called when the system theme or accent color changes.
+ */
+export async function clearDirectoryIconCache(): Promise<void> {
+    await invoke('clear_directory_icon_cache')
+}
+
 /**
  * Shows a native context menu for a file.
  * @param path - Absolute path to the file.

apps/desktop/src/lib/tauri-commands/index.ts

@@ -36,6 +36,7 @@ export {
     getIcons,
     refreshDirectoryIcons,
     clearExtensionIconCache,
+    clearDirectoryIconCache,
     showFileContextMenu,
     updateMenuContext,
     toggleHiddenFiles,