Fix system theme pair integration

src/lib/components/AppLayout.svelte

@@ -22,6 +22,7 @@
 		showCommandPalette,
 		theme,
 		resolvedTheme,
+		customThemes,
 		focusMode,
 		readOnly,
 		activeNote,
@@ -508,7 +509,8 @@
 					createAndFocusNote();
 					return;
 				case 'toggle-theme': {
-					const isDark = darkThemes.includes($resolvedTheme);
+					const customTheme = $customThemes.find(theme => theme.id === $resolvedTheme);
+					const isDark = darkThemes.includes($resolvedTheme) || (customTheme?.is_dark ?? false);
 					const next = isDark ? 'light' : 'dark';
 					$theme = next;
 					setTheme(next);
@@ -566,23 +568,6 @@
 		}
 	}
 
-	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') {
-			root.classList.add('dark');
-		}
-	}
-
-	$effect(() => {
-		applyTheme($theme);
-	});
-
 	$effect(() => {
 		$collapsedNotebooks;
 		persistState();
@@ -664,10 +649,6 @@
 			prefetchPromise = readNote(lastNotePath).catch(() => null);
 		}
 
-		// One-off apply to avoid a flash before the layout's reactive effect runs; OS appearance
-		// changes are picked up by resolvedTheme, so no media-query listener is needed here.
-		applyTheme($resolvedTheme);
-
 		// Run sidebar and note list refresh in parallel
 		await Promise.all([sidebar?.refresh(), noteList?.refresh()]);
 

src/lib/components/CommandPalette.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { showCommandPalette, showSearch, theme, resolvedTheme, sourceMode, viewMode, activeNotebook, activeTag } from '$lib/stores/app';
+	import { showCommandPalette, showSearch, theme, sourceMode, viewMode, activeNotebook, activeTag } from '$lib/stores/app';
 	import { setTheme, reindex } from '$lib/api';
 	import { darkThemes } from '$lib/platform';
 
@@ -89,7 +89,6 @@
 			action: () => {
 				$theme = 'system';
 				setTheme('system');
-				applyTheme($resolvedTheme);
 				$showCommandPalette = false;
 			}
 		},

src/lib/components/NoteWindow.svelte

@@ -8,8 +8,7 @@
 		activeNotePath,
 		editorDirty,
 		readOnly,
-		sourceMode,
-		resolvedTheme
+		sourceMode
 	} from '$lib/stores/app';
 	import { readNote } from '$lib/api';
 	import { keybindings, matchAction } from '$lib/keybindings';
@@ -17,8 +16,6 @@
 
 	let { notePath }: { notePath: string } = $props();
 
-	import { darkThemes } from '$lib/platform';
-
 	const appWindow = getCurrentWindow();
 	const isMac = navigator.platform.startsWith('Mac');
 	let editor = $state<Editor>(null!);
@@ -36,20 +33,6 @@
 		return () => { unlisten.then(fn => fn()); };
 	});
 
-	$effect(() => {
-		const t = $resolvedTheme || 'light';
-		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') {
-			root.classList.add('dark');
-		}
-	});
-
 	let lastMouseDown = 0;
 	const RESIZE_EDGE = 6;
 

src/lib/components/SettingsPanel.svelte

@@ -690,9 +690,15 @@
 	async function removeCustomTheme(ct: CustomTheme) {
 		try {
 			await deleteCustomTheme(ct.id);
+			if (systemLightTheme === ct.id) systemLightTheme = 'light';
+			if (systemDarkTheme === ct.id) systemDarkTheme = 'dark';
 			if ($appConfig) {
-				$appConfig.custom_themes = $appConfig.custom_themes.filter(t => t.id !== ct.id);
-				$appConfig = { ...$appConfig };
+				$appConfig = {
+					...$appConfig,
+					custom_themes: $appConfig.custom_themes.filter(t => t.id !== ct.id),
+					system_light_theme: systemLightTheme,
+					system_dark_theme: systemDarkTheme,
+				};
 			}
 			if ($theme === ct.id) {
 				$theme = 'system';
@@ -1044,9 +1050,9 @@
 		}
 	});
 
-	// Re-apply when theme changes
+	// Re-apply when the concrete theme changes, including an OS appearance switch.
 	$effect(() => {
-		const _ = $theme;
+		const _ = $resolvedTheme;
 		const preset = accentPresets.find(p => p.name === activeAccent);
 		if (preset) {
 			applyAccent(preset);

src/lib/stores/app.ts

@@ -102,8 +102,13 @@ export const resolvedTheme = derived(
   [theme, appConfig, systemPrefersDark],
   ([$theme, $config, $prefersDark]): string => {
     if ($theme !== "system") return $theme;
+    const fallback = $prefersDark ? "dark" : "light";
     const paired = $prefersDark ? $config?.system_dark_theme : $config?.system_light_theme;
-    return paired || ($prefersDark ? "dark" : "light");
+    if (!paired) return fallback;
+    if (paired.startsWith("custom-") && !$config?.custom_themes.some((item) => item.id === paired)) {
+      return fallback;
+    }
+    return paired;
   },
 );