diff --git a/src/lib/components/AppLayout.svelte b/src/lib/components/AppLayout.svelte
index 3c10d44..11e3680 100644
--- a/src/lib/components/AppLayout.svelte
+++ b/src/lib/components/AppLayout.svelte
@@ -21,7 +21,6 @@
 		showSearch,
 		showCommandPalette,
 		theme,
-		customThemes,
 		focusMode,
 		readOnly,
 		activeNote,
@@ -63,7 +62,7 @@
 	const isMac = navigator.platform.startsWith('Mac');
 	const isMobile = $derived($platformIsMobile);
 	import { loadVaultState, saveVaultState, readNote, createDailyNote, createBackup, getPendingOpenFile, addQuickAccess, removeQuickAccess, getQuickAccess, setTheme, syncNow, setTaskDone, setTaskPriority, setTaskDue, findOrphanedAttachments, trashOrphanedAttachments } from '$lib/api';
-	import { applyTheme, isAndroid } from '$lib/platform';
+	import { darkThemes, isAndroid } from '$lib/platform';
 	import { debounce } from '$lib/utils/debounce';
 	import { openNoteWindow } from '$lib/utils/window';
 	import { get } from 'svelte/store';
@@ -510,8 +509,21 @@
 		}
 	}
 
+	function applyTheme(t: string) {
+		const namedThemes = ['solarized-light', 'solarized-dark', 'catppuccin', 'nord', 'tokyo-night', 'github-light', 'github-dark', 'dracula', 'blueberry', 'forest-green', 'gruvbox', 'midnight-tide', 'cherry-blossom', 'synthwave', 'ember', 'moonlit', 'light-coffee', 'dark-coffee', 'cotton-candy', 'crimson', 'cloud', 'peach', 'material-dark', 'material-light', 'monokai', 'rose-pine', 'everforest', 'horizon', 'cyberpunk', 'black', 'one-dark'];
+		const root = document.documentElement;
+		root.classList.remove('dark');
+		root.removeAttribute('data-theme');
+		if (namedThemes.includes(t)) {
+			root.setAttribute('data-theme', t);
+			if (darkThemes.includes(t)) root.classList.add('dark');
+		} else if (t === 'dark' || (t === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+			root.classList.add('dark');
+		}
+	}
+
 	$effect(() => {
-		applyTheme($theme, $customThemes);
+		applyTheme($theme);
 	});
 
 	$effect(() => {
@@ -593,10 +605,10 @@
 			prefetchPromise = readNote(lastNotePath).catch(() => null);
 		}
 
-		applyTheme($theme, $customThemes);
+		applyTheme($theme);
 
 		window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
-			if ($theme === 'system') applyTheme('system', $customThemes);
+			if ($theme === 'system') applyTheme('system');
 		});
 
 		// Run sidebar and note list refresh in parallel
diff --git a/src/lib/components/CommandPalette.svelte b/src/lib/components/CommandPalette.svelte
index a35545c..75289bf 100644
--- a/src/lib/components/CommandPalette.svelte
+++ b/src/lib/components/CommandPalette.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { showCommandPalette, showSearch, theme, sourceMode, viewMode, activeNotebook, activeTag } from '$lib/stores/app';
 	import { setTheme, reindex } from '$lib/api';
-	import { applyTheme } from '$lib/platform';
+	import { darkThemes } from '$lib/platform';
 
 	// onNavigate runs the parent's view-change handler (refreshes the note list and reveals it
 	// if it was hidden), so opening a view here behaves exactly like clicking it in the sidebar.
@@ -179,6 +179,18 @@
 		}
 	}
 
+	function applyTheme(t: string) {
+		const namedThemes = ['solarized-light', 'solarized-dark', 'catppuccin', 'nord', 'tokyo-night', 'github-light', 'github-dark', 'dracula', 'blueberry', 'forest-green', 'gruvbox', 'midnight-tide', 'cherry-blossom', 'synthwave', 'ember', 'moonlit', 'light-coffee', 'dark-coffee', 'cotton-candy', 'crimson', 'cloud', 'peach', 'material-dark', 'material-light', 'monokai', 'rose-pine', 'everforest', 'horizon', 'cyberpunk', 'black', 'one-dark'];
+		const root = document.documentElement;
+		root.classList.remove('dark');
+		root.removeAttribute('data-theme');
+		if (namedThemes.includes(t)) {
+			root.setAttribute('data-theme', t);
+			if (darkThemes.includes(t)) root.classList.add('dark');
+		} else if (t === 'dark' || (t === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+			root.classList.add('dark');
+		}
+	}
 </script>
 
 {#if $showCommandPalette}
diff --git a/src/lib/components/NoteWindow.svelte b/src/lib/components/NoteWindow.svelte
index 95a15b0..4634cee 100644
--- a/src/lib/components/NoteWindow.svelte
+++ b/src/lib/components/NoteWindow.svelte
@@ -9,8 +9,7 @@
 		editorDirty,
 		readOnly,
 		sourceMode,
-		theme,
-		customThemes
+		theme
 	} from '$lib/stores/app';
 	import { readNote } from '$lib/api';
 	import { keybindings, matchAction } from '$lib/keybindings';
@@ -18,7 +17,7 @@
 
 	let { notePath }: { notePath: string } = $props();
 
-	import { applyTheme } from '$lib/platform';
+	import { darkThemes } from '$lib/platform';
 
 	const appWindow = getCurrentWindow();
 	const isMac = navigator.platform.startsWith('Mac');
@@ -38,7 +37,17 @@
 	});
 
 	$effect(() => {
-		applyTheme($theme || 'system', $customThemes);
+		const t = $theme || 'system';
+		const namedThemes = ['solarized-light', 'solarized-dark', 'catppuccin', 'nord', 'tokyo-night', 'github-light', 'github-dark', 'dracula', 'blueberry', 'forest-green', 'gruvbox', 'midnight-tide', 'cherry-blossom', 'synthwave', 'ember', 'moonlit', 'light-coffee', 'dark-coffee', 'cotton-candy', 'crimson', 'cloud', 'peach', 'material-dark', 'material-light', 'monokai', 'rose-pine', 'everforest', 'horizon', 'cyberpunk', 'black', 'one-dark'];
+		const root = document.documentElement;
+		root.classList.remove('dark');
+		root.removeAttribute('data-theme');
+		if (namedThemes.includes(t)) {
+			root.setAttribute('data-theme', t);
+			if (darkThemes.includes(t)) root.classList.add('dark');
+		} else if (t === 'dark' || (t === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+			root.classList.add('dark');
+		}
 	});
 
 	let lastMouseDown = 0;
diff --git a/src/lib/components/SettingsPanel.svelte b/src/lib/components/SettingsPanel.svelte
index 0689941..2ee8bcd 100644
--- a/src/lib/components/SettingsPanel.svelte
+++ b/src/lib/components/SettingsPanel.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { showSettings, theme, appConfig, activeVaultConfig, updateAvailable as globalUpdateAvailable, updateObj as globalUpdateObj, installType, settingsTab, vaultReady, androidApkUrl, checkForUpdateMobile, notebookSortMode, isManagedInstall, customThemes } from '$lib/stores/app';
 	import { setTheme, setAccentColor, setFontSize, setFontFamily, setLineHeight, setUiScale, setContentWidth, setGeneralSettings, importObsidian, createBackup, listBackups, restoreBackup, deleteBackup, setBackupSettings, setAiSettings, testAiConnection, setSyncSettings, testSyncConnection, syncNow, saveCustomTheme, deleteCustomTheme, exportCustomTheme, importCustomThemes } from '$lib/api';
-	import { applyTheme, darkThemes, isMobile, isAndroid } from '$lib/platform';
+	import { darkThemes, isMobile, isAndroid } from '$lib/platform';
 	import { open as openDialog, save as saveDialog } from '@tauri-apps/plugin-dialog';
 	import { listen } from '@tauri-apps/api/event';
 	import { getVersion } from '@tauri-apps/api/app';
@@ -583,7 +583,32 @@
 	}
 
 	function restoreCurrentTheme() {
-		applyTheme($theme, $customThemes);
+		const root = document.documentElement;
+		const varsToClear = ['--bg-primary','--bg-secondary','--bg-tertiary','--bg-hover','--bg-active','--bg-editor','--text-primary','--text-secondary','--border-color'];
+		root.classList.remove('dark');
+		root.removeAttribute('data-theme');
+		for (const v of varsToClear) root.style.removeProperty(v);
+		const namedThemes = ['solarized-light','solarized-dark','catppuccin','nord','tokyo-night','github-light','github-dark','dracula','blueberry','forest-green','gruvbox','midnight-tide','cherry-blossom','synthwave','ember','moonlit','light-coffee','dark-coffee','cotton-candy','crimson','cloud','peach','material-dark','material-light','monokai','rose-pine','everforest','horizon','cyberpunk','black','one-dark'];
+		if ($theme.startsWith('custom-')) {
+			const ct = $customThemes.find(c => c.id === $theme);
+			if (ct) {
+				root.style.setProperty('--bg-primary', ct.colors.bg_primary);
+				root.style.setProperty('--bg-secondary', ct.colors.bg_secondary);
+				root.style.setProperty('--bg-tertiary', ct.colors.bg_tertiary);
+				root.style.setProperty('--bg-hover', ct.colors.bg_hover);
+				root.style.setProperty('--bg-active', ct.colors.bg_active);
+				root.style.setProperty('--bg-editor', ct.colors.bg_editor);
+				root.style.setProperty('--text-primary', ct.colors.text_primary);
+				root.style.setProperty('--text-secondary', ct.colors.text_secondary);
+				root.style.setProperty('--border-color', ct.colors.border_color);
+				if (ct.is_dark) root.classList.add('dark');
+			}
+		} else if (namedThemes.includes($theme)) {
+			root.setAttribute('data-theme', $theme);
+			if (darkThemes.includes($theme)) root.classList.add('dark');
+		} else if ($theme === 'dark' || ($theme === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+			root.classList.add('dark');
+		}
 	}
 
 	async function saveCustomThemeEditor() {
diff --git a/src/lib/platform.ts b/src/lib/platform.ts
index f31c810..ded4fc7 100644
--- a/src/lib/platform.ts
+++ b/src/lib/platform.ts
@@ -1,5 +1,3 @@
-import type { CustomTheme } from '$lib/types';
-
 // Platform is the compile-time build target, injected by the backend into
 // window.__HELIX_PLATFORM__ before app scripts run (see src-tauri/src/lib.rs). The UA is only a
 // fallback when that global is absent (SSR/prerender, plain-browser dev): some desktop WebKitGTK
@@ -50,54 +48,3 @@ export const darkThemes = [
 export function isDarkTheme(theme: string): boolean {
 	return darkThemes.includes(theme) || (theme === 'system' && typeof window !== 'undefined' && window.matchMedia('(prefers-color-scheme: dark)').matches);
 }
-
-export const namedThemes = [
-	'solarized-light', 'solarized-dark', 'catppuccin', 'nord', 'tokyo-night',
-	'github-light', 'github-dark', 'dracula', 'blueberry', 'forest-green',
-	'gruvbox', 'midnight-tide', 'cherry-blossom', 'synthwave', 'ember',
-	'moonlit', 'light-coffee', 'dark-coffee', 'cotton-candy', 'crimson',
-	'cloud', 'peach', 'material-dark', 'material-light', 'monokai',
-	'rose-pine', 'everforest', 'horizon', 'cyberpunk', 'black', 'one-dark',
-];
-
-const CUSTOM_THEME_VARS = [
-	'--bg-primary', '--bg-secondary', '--bg-tertiary',
-	'--bg-hover', '--bg-active', '--bg-editor',
-	'--text-primary', '--text-secondary', '--border-color',
-];
-
-function applyCustomThemeVars(root: HTMLElement, ct: CustomTheme) {
-	root.style.setProperty('--bg-primary', ct.colors.bg_primary);
-	root.style.setProperty('--bg-secondary', ct.colors.bg_secondary);
-	root.style.setProperty('--bg-tertiary', ct.colors.bg_tertiary);
-	root.style.setProperty('--bg-hover', ct.colors.bg_hover);
-	root.style.setProperty('--bg-active', ct.colors.bg_active);
-	root.style.setProperty('--bg-editor', ct.colors.bg_editor);
-	root.style.setProperty('--text-primary', ct.colors.text_primary);
-	root.style.setProperty('--text-secondary', ct.colors.text_secondary);
-	root.style.setProperty('--border-color', ct.colors.border_color);
-}
-
-function clearCustomThemeVars(root: HTMLElement) {
-	for (const v of CUSTOM_THEME_VARS) root.style.removeProperty(v);
-}
-
-export function applyTheme(t: string, themes: CustomTheme[] = []) {
-	if (typeof document === 'undefined') return;
-	const root = document.documentElement;
-	root.classList.remove('dark');
-	root.removeAttribute('data-theme');
-	clearCustomThemeVars(root);
-	if (t.startsWith('custom-')) {
-		const ct = themes.find(c => c.id === t);
-		if (ct) {
-			applyCustomThemeVars(root, ct);
-			if (ct.is_dark) root.classList.add('dark');
-		}
-	} else if (namedThemes.includes(t)) {
-		root.setAttribute('data-theme', t);
-		if (darkThemes.includes(t)) root.classList.add('dark');
-	} else if (t === 'dark' || (t === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
-		root.classList.add('dark');
-	}
-}
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index ff2019b..d578c30 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -4,7 +4,8 @@
 	import { theme, appConfig, activeNote, activeNotePath, installType, platformIsMobile, checkForUpdate, checkForUpdateMobile, isManagedInstall, customThemes } from '$lib/stores/app';
 	import { openFile, openUrl, readNote, getInstallType, isMobilePlatform } from '$lib/api';
 	import { get } from 'svelte/store';
-	import { applyTheme, isMobile, isAndroid } from '$lib/platform';
+	import { darkThemes, isMobile, isAndroid } from '$lib/platform';
+	import type { CustomTheme } from '$lib/types';
 	import ResizeHandles from '$lib/components/ResizeHandles.svelte';
 
 	let { children } = $props();
@@ -21,6 +22,48 @@
 		}
 	});
 
+	const CUSTOM_THEME_VARS = [
+		'--bg-primary', '--bg-secondary', '--bg-tertiary',
+		'--bg-hover', '--bg-active', '--bg-editor',
+		'--text-primary', '--text-secondary', '--border-color',
+	];
+
+	function applyCustomThemeVars(root: HTMLElement, ct: CustomTheme) {
+		root.style.setProperty('--bg-primary', ct.colors.bg_primary);
+		root.style.setProperty('--bg-secondary', ct.colors.bg_secondary);
+		root.style.setProperty('--bg-tertiary', ct.colors.bg_tertiary);
+		root.style.setProperty('--bg-hover', ct.colors.bg_hover);
+		root.style.setProperty('--bg-active', ct.colors.bg_active);
+		root.style.setProperty('--bg-editor', ct.colors.bg_editor);
+		root.style.setProperty('--text-primary', ct.colors.text_primary);
+		root.style.setProperty('--text-secondary', ct.colors.text_secondary);
+		root.style.setProperty('--border-color', ct.colors.border_color);
+	}
+
+	function clearCustomThemeVars(root: HTMLElement) {
+		for (const v of CUSTOM_THEME_VARS) root.style.removeProperty(v);
+	}
+
+	function applyTheme(t: string, themes: CustomTheme[] = []) {
+		const namedThemes = ['solarized-light', 'solarized-dark', 'catppuccin', 'nord', 'tokyo-night', 'github-light', 'github-dark', 'dracula', 'blueberry', 'forest-green', 'gruvbox', 'midnight-tide', 'cherry-blossom', 'synthwave', 'ember', 'moonlit', 'light-coffee', 'dark-coffee', 'cotton-candy', 'crimson', 'cloud', 'peach', 'material-dark', 'material-light', 'monokai', 'rose-pine', 'everforest', 'horizon', 'cyberpunk', 'black', 'one-dark'];
+		const root = document.documentElement;
+		root.classList.remove('dark');
+		root.removeAttribute('data-theme');
+		clearCustomThemeVars(root);
+		if (t.startsWith('custom-')) {
+			const ct = themes.find(c => c.id === t);
+			if (ct) {
+				applyCustomThemeVars(root, ct);
+				if (ct.is_dark) root.classList.add('dark');
+			}
+		} else if (namedThemes.includes(t)) {
+			root.setAttribute('data-theme', t);
+			if (darkThemes.includes(t)) root.classList.add('dark');
+		} else if (t === 'dark' || (t === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+			root.classList.add('dark');
+		}
+	}
+
 	function normalizePath(p: string): string {
 		const parts = p.split('/');
 		const resolved: string[] = [];
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index a8044cf..17b063b 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -2,7 +2,7 @@
 	import { onDestroy, onMount } from 'svelte';
 	import { appConfig, vaultReady, theme } from '$lib/stores/app';
 	import { getAppConfig, openVault, setFontSize } from '$lib/api';
-	import { applyTheme } from '$lib/platform';
+	import { darkThemes } from '$lib/platform';
 	import { getCurrentWebview } from '@tauri-apps/api/webview';
 	import VaultPicker from '$lib/components/VaultPicker.svelte';
 	import AppLayout from '$lib/components/AppLayout.svelte';
@@ -120,7 +120,16 @@
 
 			// Apply theme immediately to prevent flash
 			const themeValue = config.theme || 'system';
-			applyTheme(themeValue, config.custom_themes);
+			const root = document.documentElement;
+			const namedThemes = ['solarized-light', 'solarized-dark', 'catppuccin', 'nord', 'tokyo-night', 'github-light', 'github-dark', 'dracula', 'blueberry', 'forest-green', 'gruvbox', 'midnight-tide', 'cherry-blossom', 'synthwave', 'ember', 'moonlit', 'light-coffee', 'dark-coffee', 'cotton-candy', 'crimson', 'cloud', 'peach', 'material-dark', 'material-light', 'monokai', 'rose-pine', 'everforest', 'horizon', 'cyberpunk', 'black', 'one-dark'];
+			root.classList.remove('dark');
+			root.removeAttribute('data-theme');
+			if (namedThemes.includes(themeValue)) {
+				root.setAttribute('data-theme', themeValue);
+				if (darkThemes.includes(themeValue)) root.classList.add('dark');
+			} else if (themeValue === 'dark' || (themeValue === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+				root.classList.add('dark');
+			}
 
 			// Apply saved font settings
 			if (config.font_size) {