Fix custom theme not applied on startup (light-theme dividers) (#200)

Launching with a custom dark theme left every divider in light-theme colors until you re-toggled the theme in Settings.

`applyTheme` was copy-pasted across the components and the copies drifted. Three of them (+page.svelte's onMount block, AppLayout.svelte, NoteWindow.svelte) had no custom-* branch, so for a custom theme they stripped the dark class and data-theme attribute, matched nothing, and fell back to the bare light :root values.

`+layout.svelte` applied the custom theme correctly, but `AppLayout` — the always-mounted shell — re-runs its own broken copy from an `$effect` on `$theme`, immediately wiping it out. Dividers gave it away because custom themes override `--border-color` but not `--border-light`, which dividers use.

Fix: consolidate into a single `applyTheme`(which already owns darkThemes/isDarkTheme) with a real `custom-*` branch, and have every call site use it and pass the loaded custom themes so `custom-*` ids resolve.

Reviewed-on: https://codeberg.org/ArkHost/HelixNotes/pulls/200

src/lib/components/AppLayout.svelte

@@ -21,6 +21,7 @@
 		showSearch,
 		showCommandPalette,
 		theme,
+		customThemes,
 		focusMode,
 		readOnly,
 		activeNote,
@@ -62,7 +63,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 { darkThemes, isAndroid } from '$lib/platform';
+	import { applyTheme, isAndroid } from '$lib/platform';
 	import { debounce } from '$lib/utils/debounce';
 	import { openNoteWindow } from '$lib/utils/window';
 	import { get } from 'svelte/store';
@@ -509,21 +510,8 @@
 		}
 	}
 
-	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);
+		applyTheme($theme, $customThemes);
 	});
 
 	$effect(() => {
@@ -605,10 +593,10 @@
 			prefetchPromise = readNote(lastNotePath).catch(() => null);
 		}
 
-		applyTheme($theme);
+		applyTheme($theme, $customThemes);
 
 		window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
-			if ($theme === 'system') applyTheme('system');
+			if ($theme === 'system') applyTheme('system', $customThemes);
 		});
 
 		// Run sidebar and note list refresh in parallel

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 { darkThemes } from '$lib/platform';
+	import { applyTheme } 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,18 +179,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' || (t === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
-			root.classList.add('dark');
-		}
-	}
 </script>
 
 {#if $showCommandPalette}

src/lib/components/NoteWindow.svelte

@@ -9,7 +9,8 @@
 		editorDirty,
 		readOnly,
 		sourceMode,
-		theme
+		theme,
+		customThemes
 	} from '$lib/stores/app';
 	import { readNote } from '$lib/api';
 	import { keybindings, matchAction } from '$lib/keybindings';
@@ -17,7 +18,7 @@
 
 	let { notePath }: { notePath: string } = $props();
 
-	import { darkThemes } from '$lib/platform';
+	import { applyTheme } from '$lib/platform';
 
 	const appWindow = getCurrentWindow();
 	const isMac = navigator.platform.startsWith('Mac');
@@ -37,17 +38,7 @@
 	});
 
 	$effect(() => {
-		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');
-		}
+		applyTheme($theme || 'system', $customThemes);
 	});
 
 	let lastMouseDown = 0;

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 { darkThemes, isMobile, isAndroid } from '$lib/platform';
+	import { applyTheme, 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,33 +583,7 @@
 	}
 
 	function restoreCurrentTheme() {
-		// Re-apply the currently active theme to undo preview
-		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');
-		}
+		applyTheme($theme, $customThemes);
 	}
 
 	async function saveCustomThemeEditor() {

src/lib/platform.ts

@@ -1,3 +1,5 @@
+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
@@ -48,3 +50,54 @@ 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');
+	}
+}

src/routes/+layout.svelte

@@ -4,8 +4,7 @@
 	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 { darkThemes, isMobile, isAndroid } from '$lib/platform';
-	import type { CustomTheme } from '$lib/types';
+	import { applyTheme, isMobile, isAndroid } from '$lib/platform';
 	import ResizeHandles from '$lib/components/ResizeHandles.svelte';
 
 	let { children } = $props();
@@ -22,48 +21,6 @@
 		}
 	});
 
-	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[] = [];

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 { darkThemes } from '$lib/platform';
+	import { applyTheme } 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,16 +120,7 @@
 
 			// Apply theme immediately to prevent flash
 			const themeValue = config.theme || 'system';
-			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');
-			}
+			applyTheme(themeValue, config.custom_themes);
 
 			// Apply saved font settings
 			if (config.font_size) {