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/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) {