main (#106)

WIP: Themes, accents, dropdown
Reviewed-on: https://codeberg.org/ArkHost/HelixNotes/pulls/106

src/app.css

@@ -33,7 +33,8 @@
   font-style: italic;
   font-weight: 700;
   font-display: swap;
-    src: url("/fonts/jetbrains-mono/JetBrainsMono-BoldItalic.woff2") format("woff2");
+  src: url("/fonts/jetbrains-mono/JetBrainsMono-BoldItalic.woff2")
+    format("woff2");
 }
 
 /* Reading fonts - self-hosted (static/fonts/<name>/, OFL-1.1). Offered in the font picker;
@@ -179,8 +180,8 @@
   --notelist-width: 280px;
   --panel-resize-handle: 3px;
   /* Monospace / code font (self-hosted JetBrains Mono, see @font-face above) */
-    --font-mono: "JetBrains Mono", "Fira Code", "Cascadia Code", ui-monospace,
+  --font-mono:
-        monospace;
+    "JetBrains Mono", "Fira Code", "Cascadia Code", ui-monospace, monospace;
 }
 
 :root.dark {
@@ -410,174 +411,49 @@
   --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
 }
 
-:root[data-theme="midnight-tide"] {
+:root[data-theme="light-coffee"] {
-    --bg-primary: #020122;
+  --bg-primary: #fdf8f3;
-    --bg-secondary: #050a38;
+  --bg-secondary: #f5ede0;
-    --bg-tertiary: #091544;
+  --bg-tertiary: #ece0ce;
-    --bg-hover: #0e2058;
+  --bg-hover: #e2d0b8;
-    --bg-active: #132d70;
+  --bg-active: #d5c0a4;
-    --bg-editor: #020122;
+  --bg-editor: #fdf8f3;
-    --text-primary: #e2eeff;
+  --text-primary: #2c1f0e;
-    --text-secondary: #99b0d4;
+  --text-secondary: #6b4d2e;
-    --text-tertiary: #4d6490;
+  --text-tertiary: #9b7a58;
-    --text-accent: #2dd4bf;
+  --text-accent: #8b5e3c;
-    --border-color: #0e2058;
+  --border-color: #e2d0b8;
-    --border-light: #091544;
+  --border-light: #ece0ce;
-    --accent: #2dd4bf;
+  --accent: #8b5e3c;
-    --accent-hover: #1dbfab;
+  --accent-hover: #7a4f30;
-    --accent-light: color-mix(in srgb, #2dd4bf 12%, transparent);
+  --accent-light: color-mix(in srgb, #8b5e3c 8%, transparent);
-    --danger: #ff6b8a;
+  --danger: #c0392b;
-    --danger-hover: #e85575;
+  --danger-hover: #a93226;
-    --success: #4ade80;
+  --success: #27ae60;
-    --warning: #fbbf24;
+  --warning: #e67e22;
-    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
-    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
+  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
-    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.6);
+  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
 }
 
-:root[data-theme="blueberry"] {
+:root[data-theme="dark-coffee"] {
-    --bg-primary: #1a1a2e;
+  --bg-primary: #1a1008;
-    --bg-secondary: #16213e;
+  --bg-secondary: #211408;
-    --bg-tertiary: #0f3460;
+  --bg-tertiary: #2a1c0e;
-    --bg-hover: #1e2a4a;
+  --bg-hover: #362410;
-    --bg-active: #253558;
+  --bg-active: #422e16;
-    --bg-editor: #1a1a2e;
+  --bg-editor: #1a1008;
-    --text-primary: #e2e8f8;
-    --text-secondary: #a8b8d8;
-    --text-tertiary: #6a7fa8;
-    --text-accent: #7b9cff;
-    --border-color: #1e2a4a;
-    --border-light: #16213e;
-    --accent: #7b9cff;
-    --accent-hover: #6488f0;
-    --accent-light: color-mix(in srgb, #7b9cff 12%, transparent);
-    --danger: #ff6b8a;
-    --danger-hover: #e85575;
-    --success: #68d9a4;
-    --warning: #f0c96e;
-    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
-    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
-    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
-}
-
-:root[data-theme="forest-green"] {
-    --bg-primary: #1a2318;
-    --bg-secondary: #1f2b1c;
-    --bg-tertiary: #253321;
-    --bg-hover: #2c3d27;
-    --bg-active: #35492e;
-    --bg-editor: #1a2318;
-    --text-primary: #d8e8d0;
-    --text-secondary: #a0b898;
-    --text-tertiary: #6a8560;
-    --text-accent: #6dbf67;
-    --border-color: #2c3d27;
-    --border-light: #253321;
-    --accent: #6dbf67;
-    --accent-hover: #58aa52;
-    --accent-light: color-mix(in srgb, #6dbf67 12%, transparent);
-    --danger: #e57373;
-    --danger-hover: #d05f5f;
-    --success: #81c784;
-    --warning: #ffcc66;
-    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
-    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
-    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
-}
-
-:root[data-theme="gruvbox"] {
-    --bg-primary: #282828;
-    --bg-secondary: #1d2021;
-    --bg-tertiary: #3c3836;
-    --bg-hover: #504945;
-    --bg-active: #665c54;
-    --bg-editor: #282828;
-    --text-primary: #ebdbb2;
-    --text-secondary: #d5c4a1;
-    --text-tertiary: #bdae93;
-    --text-accent: #fabd2f;
-    --border-color: #504945;
-    --border-light: #3c3836;
-    --accent: #fabd2f;
-    --accent-hover: #e0a81a;
-    --accent-light: color-mix(in srgb, #fabd2f 12%, transparent);
-    --danger: #fb4934;
-    --danger-hover: #e83d28;
-    --success: #b8bb26;
-    --warning: #fe8019;
-    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
-    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
-    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
-}
-
-:root[data-theme="cherry-blossom"] {
-    --bg-primary: #1a0e12;
-    --bg-secondary: #221218;
-    --bg-tertiary: #2d1820;
-    --bg-hover: #3a1e2a;
-    --bg-active: #472535;
-    --bg-editor: #1a0e12;
-    --text-primary: #f0d6df;
-    --text-secondary: #c4919f;
-    --text-tertiary: #8a5565;
-    --text-accent: #f4a0b5;
-    --border-color: #3a1e2a;
-    --border-light: #2d1820;
-    --accent: #f4a0b5;
-    --accent-hover: #e88ea8;
-    --accent-light: color-mix(in srgb, #f4a0b5 12%, transparent);
-    --danger: #ff6b6b;
-    --danger-hover: #e85555;
-    --success: #a8d8b9;
-    --warning: #f7c59f;
-    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
-    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
-    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
-}
-
-:root[data-theme="synthwave"] {
-    --bg-primary: #0d0221;
-    --bg-secondary: #130332;
-    --bg-tertiary: #1a0540;
-    --bg-hover: #220650;
-    --bg-active: #2c0860;
-    --bg-editor: #0d0221;
-    --text-primary: #f0e6ff;
-    --text-secondary: #b8a0d4;
-    --text-tertiary: #7a5fa0;
-    --text-accent: #ff6ac1;
-    --border-color: #220650;
-    --border-light: #1a0540;
-    --accent: #ff6ac1;
-    --accent-hover: #e554aa;
-    --accent-light: color-mix(in srgb, #ff6ac1 12%, transparent);
-    --danger: #ff4d6d;
-    --danger-hover: #e03a5a;
-    --success: #05ffa1;
-    --warning: #ffcc00;
-    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
-    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
-    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.6);
-}
-
-:root[data-theme="ember"] {
-    --bg-primary: #0f0a06;
-    --bg-secondary: #1a1008;
-    --bg-tertiary: #241608;
-    --bg-hover: #2e1e0a;
-    --bg-active: #3d2810;
-    --bg-editor: #0f0a06;
   --text-primary: #f5e6d0;
-    --text-secondary: #c4a882;
+  --text-secondary: #c9a87a;
-    --text-tertiary: #8a7055;
+  --text-tertiary: #8a6845;
-    --text-accent: #ff8c42;
+  --text-accent: #c8894d;
-    --border-color: #2e1e0a;
+  --border-color: #362410;
-    --border-light: #241608;
+  --border-light: #2a1c0e;
-    --accent: #ff8c42;
+  --accent: #c8894d;
-    --accent-hover: #e87530;
+  --accent-hover: #b57840;
-    --accent-light: color-mix(in srgb, #ff8c42 12%, transparent);
+  --accent-light: color-mix(in srgb, #c8894d 12%, transparent);
-    --danger: #ff4a36;
+  --danger: #e05a4a;
-    --danger-hover: #e03020;
+  --danger-hover: #c94838;
   --success: #7bc67e;
   --warning: #ffc947;
   --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
@@ -585,31 +461,106 @@
   --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.6);
 }
 
-:root[data-theme="moonlit"] {
+:root[data-theme="cotton-candy"] {
-    --bg-primary: #0a0d12;
+  --bg-primary: #fff0f8;
-    --bg-secondary: #0f1520;
+  --bg-secondary: #ffe8f4;
-    --bg-tertiary: #141d2e;
+  --bg-tertiary: #fddaee;
-    --bg-hover: #1a263d;
+  --bg-hover: #f9c8e4;
-    --bg-active: #20304e;
+  --bg-active: #f4b4d8;
-    --bg-editor: #0a0d12;
+  --bg-editor: #fff0f8;
-    --text-primary: #dde8f5;
+  --text-primary: #3d1a30;
-    --text-secondary: #8fa8c8;
+  --text-secondary: #7a3d62;
-    --text-tertiary: #4d6480;
+  --text-tertiary: #b07090;
-    --text-accent: #b0cceb;
+  --text-accent: #e85fa0;
-    --border-color: #1a263d;
+  --border-color: #f4c4dc;
-    --border-light: #141d2e;
+  --border-light: #fddaee;
-    --accent: #b0cceb;
+  --accent: #e85fa0;
-    --accent-hover: #90b0d8;
+  --accent-hover: #d54a8e;
-    --accent-light: color-mix(in srgb, #b0cceb 12%, transparent);
+  --accent-light: color-mix(in srgb, #e85fa0 8%, transparent);
-    --danger: #e07090;
+  --danger: #d43d3d;
-    --danger-hover: #c85a78;
+  --danger-hover: #c02e2e;
-    --success: #70c8a0;
+  --success: #3bb56a;
-    --warning: #e8c870;
+  --warning: #e0a030;
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
+  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
+  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
+}
+
+:root[data-theme="crimson"] {
+  --bg-primary: #1a0808;
+  --bg-secondary: #220a0a;
+  --bg-tertiary: #2d1010;
+  --bg-hover: #3a1515;
+  --bg-active: #481c1c;
+  --bg-editor: #1a0808;
+  --text-primary: #f5e0e0;
+  --text-secondary: #c88888;
+  --text-tertiary: #8a5555;
+  --text-accent: #e83535;
+  --border-color: #3a1515;
+  --border-light: #2d1010;
+  --accent: #e83535;
+  --accent-hover: #d02828;
+  --accent-light: color-mix(in srgb, #e83535 12%, transparent);
+  --danger: #ff6b6b;
+  --danger-hover: #e55555;
+  --success: #68c080;
+  --warning: #f0a040;
   --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
   --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
   --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.6);
 }
 
+:root[data-theme="cloud"] {
+  --bg-primary: #f0f8ff;
+  --bg-secondary: #e4f2fc;
+  --bg-tertiary: #d5e8f8;
+  --bg-hover: #c2d8f0;
+  --bg-active: #b0c8e8;
+  --bg-editor: #f0f8ff;
+  --text-primary: #1a3050;
+  --text-secondary: #4a6a90;
+  --text-tertiary: #7a9ab8;
+  --text-accent: #2879c8;
+  --border-color: #c8d8ec;
+  --border-light: #d5e8f8;
+  --accent: #2879c8;
+  --accent-hover: #1a68b8;
+  --accent-light: color-mix(in srgb, #2879c8 8%, transparent);
+  --danger: #e04545;
+  --danger-hover: #c83030;
+  --success: #2a8f58;
+  --warning: #d08020;
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
+  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
+  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
+}
+
+:root[data-theme="peach"] {
+  --bg-primary: #fff8f4;
+  --bg-secondary: #ffeee4;
+  --bg-tertiary: #ffe2d2;
+  --bg-hover: #ffd0b8;
+  --bg-active: #ffbea0;
+  --bg-editor: #fff8f4;
+  --text-primary: #3d1a0a;
+  --text-secondary: #7a4a30;
+  --text-tertiary: #b08060;
+  --text-accent: #e8704a;
+  --border-color: #ffd0b8;
+  --border-light: #ffe2d2;
+  --accent: #e8704a;
+  --accent-hover: #d85e38;
+  --accent-light: color-mix(in srgb, #e8704a 8%, transparent);
+  --danger: #d43030;
+  --danger-hover: #c02020;
+  --success: #30a060;
+  --warning: #d0980a;
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
+  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
+  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
+}
+
 *,
 *::before,
 *::after {
@@ -776,7 +727,8 @@ body.resizing {
   }
 
   /* Force light theme colors for PDF */
-    :root, :root.dark {
+  :root,
+  :root.dark {
     --bg-primary: #ffffff !important;
     --bg-secondary: #f8f9fa !important;
     --bg-tertiary: #f0f1f3 !important;
@@ -790,7 +742,8 @@ body.resizing {
     --border-light: #f0f1f3 !important;
   }
 
-    html, body {
+  html,
+  body {
     height: auto;
     overflow: visible;
     background: white !important;
@@ -830,16 +783,25 @@ body.resizing {
   }
 
   /* Avoid breaking inside these elements */
-    h1, h2, h3, h4, h5, h6 {
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
     page-break-after: avoid;
   }
 
-    pre, blockquote, table, figure {
+  pre,
+  blockquote,
+  table,
+  figure {
     page-break-inside: avoid;
   }
 
   /* Code blocks with light background */
-    .ProseMirror pre, .ProseMirror code {
+  .ProseMirror pre,
+  .ProseMirror code {
     background: #f8f9fa !important;
     color: #1a1a2e !important;
   }

src/lib/components/AppLayout.svelte

@@ -475,8 +475,8 @@
 	}
 
 	function applyTheme(t: string) {
-		const darkThemes = ['dark', 'solarized-dark', 'catppuccin', 'nord', 'tokyo-night', 'github-dark', 'dracula'];
+		const darkThemes = ['dark', 'solarized-dark', 'catppuccin', 'nord', 'tokyo-night', 'github-dark', 'dracula', 'blueberry', 'forest-green', 'gruvbox', 'midnight-tide', 'cherry-blossom', 'synthwave', 'ember', 'moonlit', 'dark-coffee', 'crimson'];
-		const namedThemes = ['solarized-light', 'solarized-dark', 'catppuccin', 'nord', 'tokyo-night', 'github-light', 'github-dark', 'dracula'];
+		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'];
 		const root = document.documentElement;
 		root.classList.remove('dark');
 		root.removeAttribute('data-theme');

src/lib/components/CommandPalette.svelte

@@ -142,8 +142,8 @@
 	}
 
 	function applyTheme(t: string) {
-		const darkThemes = ['dark', 'solarized-dark', 'catppuccin', 'nord', 'tokyo-night', 'github-dark', 'dracula'];
+		const darkThemes = ['dark', 'solarized-dark', 'catppuccin', 'nord', 'tokyo-night', 'github-dark', 'dracula', 'blueberry', 'forest-green', 'gruvbox', 'midnight-tide', 'cherry-blossom', 'synthwave', 'ember', 'moonlit', 'dark-coffee', 'crimson'];
-		const namedThemes = ['solarized-light', 'solarized-dark', 'catppuccin', 'nord', 'tokyo-night', 'github-light', 'github-dark', 'dracula'];
+		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'];
 		const root = document.documentElement;
 		root.classList.remove('dark');
 		root.removeAttribute('data-theme');

src/lib/components/NoteWindow.svelte

@@ -35,8 +35,8 @@
 
 	$effect(() => {
 		const t = $theme || 'system';
-		const darkThemes = ['dark', 'solarized-dark', 'catppuccin', 'nord', 'tokyo-night', 'github-dark', 'dracula'];
+		const darkThemes = ['dark', 'solarized-dark', 'catppuccin', 'nord', 'tokyo-night', 'github-dark', 'dracula', 'blueberry', 'forest-green', 'gruvbox', 'midnight-tide', 'cherry-blossom', 'synthwave', 'ember', 'moonlit', 'dark-coffee', 'crimson'];
-		const namedThemes = ['solarized-light', 'solarized-dark', 'catppuccin', 'nord', 'tokyo-night', 'github-light', 'github-dark', 'dracula'];
+		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'];
 		const root = document.documentElement;
 		root.classList.remove('dark');
 		root.removeAttribute('data-theme');

src/lib/components/SettingsPanel.svelte

@@ -384,7 +384,7 @@
 		}
 	}
 
-	const darkThemes = ['dark', 'solarized-dark', 'catppuccin', 'nord', 'tokyo-night', 'github-dark', 'dracula', 'blueberry', 'forest-green', 'gruvbox', 'midnight-tide', 'cherry-blossom', 'synthwave', 'ember', 'moonlit'];
+	const darkThemes = ['dark', 'solarized-dark', 'catppuccin', 'nord', 'tokyo-night', 'github-dark', 'dracula', 'blueberry', 'forest-green', 'gruvbox', 'midnight-tide', 'cherry-blossom', 'synthwave', 'ember', 'moonlit', 'dark-coffee', 'crimson'];
 	let isThemeDark = $derived(
 		darkThemes.includes($theme) || ($theme === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches)
 	);
@@ -408,6 +408,12 @@
 		{ id: 'synthwave', label: 'Synthwave', bg: '#0d0221', sidebar: '#130332', accent: '#ff6ac1' },
 		{ id: 'ember', label: 'Ember', bg: '#0f0a06', sidebar: '#1a1008', accent: '#ff8c42' },
 		{ id: 'moonlit', label: 'Moonlit', bg: '#0a0d12', sidebar: '#0f1520', accent: '#b0cceb' },
+		{ id: 'light-coffee', label: 'Light Coffee', bg: '#fdf8f3', sidebar: '#f5ede0', accent: '#8b5e3c' },
+		{ id: 'dark-coffee', label: 'Dark Coffee', bg: '#1a1008', sidebar: '#211408', accent: '#c8894d' },
+		{ id: 'cotton-candy', label: 'Cotton Candy', bg: '#fff0f8', sidebar: '#ffe8f4', accent: '#e85fa0' },
+		{ id: 'crimson', label: 'Crimson', bg: '#1a0808', sidebar: '#220a0a', accent: '#e83535' },
+		{ id: 'cloud', label: 'Cloud', bg: '#f0f8ff', sidebar: '#e4f2fc', accent: '#2879c8' },
+		{ id: 'peach', label: 'Peach', bg: '#fff8f4', sidebar: '#ffeee4', accent: '#e8704a' },
 	];
 
 	const accentPresets = [
@@ -463,10 +469,19 @@
 	];
 
 	let activeAccent = $state($appConfig?.accent_color ?? 'Indigo');
+	let customAccentColor = $state(($appConfig?.accent_color?.startsWith('#') ? $appConfig.accent_color : null) ?? '#5b6abf');
 	let activeFontSize = $state($appConfig?.font_size ?? 14);
 	let activeFontFamily = $state($appConfig?.font_family ?? 'system');
 	let activeLineHeight = $state($appConfig?.line_height ?? 1.6);
 	let activeUiScale = $state($appConfig?.ui_scale ?? 1);
+	let themeDropdownOpen = $state(false);
+	let accentDropdownOpen = $state(false);
+	let activeThemePreset = $derived(themePresets.find(p => p.id === $theme) ?? themePresets[0]);
+	let activeAccentPreset = $derived(accentPresets.find(p => p.name === activeAccent) ?? accentPresets[0]);
+	let isCustomAccent = $derived(activeAccent.startsWith('#'));
+	let activeAccentColor = $derived(
+		isCustomAccent ? activeAccent : (isThemeDark ? activeAccentPreset.dark : activeAccentPreset.light)
+	);
 
 	// General settings
 	let compactNotes = $state($appConfig?.compact_notes ?? false);
@@ -579,6 +594,23 @@
 		setAccentColor(accentName).catch((e) => console.error('Failed to save accent:', e));
 	}
 
+	function applyCustomAccent(hex: string) {
+		const root = document.documentElement;
+		const isDark = darkThemes.includes($theme) || ($theme === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches);
+		root.style.setProperty('--accent', hex);
+		root.style.setProperty('--text-accent', hex);
+		root.style.setProperty('--accent-hover', hex);
+		root.style.setProperty('--accent-light', `color-mix(in srgb, ${hex} ${isDark ? '10%' : '8%'}, transparent)`);
+	}
+
+	function selectCustomAccent(hex: string) {
+		customAccentColor = hex;
+		activeAccent = hex;
+		applyCustomAccent(hex);
+		if ($appConfig) $appConfig.accent_color = hex;
+		setAccentColor(hex).catch((e) => console.error('Failed to save custom accent:', e));
+	}
+
 	function selectFontSize(size: number) {
 		activeFontSize = size;
 		applyFontSize(size);
@@ -627,6 +659,14 @@
 		}
 	}
 
+	function clickOutside(node: HTMLElement, callback: () => void) {
+		function handle(e: MouseEvent) {
+			if (!node.contains(e.target as Node)) callback();
+		}
+		document.addEventListener('mousedown', handle, true);
+		return { destroy() { document.removeEventListener('mousedown', handle, true); } };
+	}
+
 	function close() {
 		// Ensure AI settings are saved when closing (in case input wasn't blurred)
 		// Only save if the key differs from what's already stored
@@ -640,12 +680,18 @@
 	$effect(() => {
 		const savedAccent = $appConfig?.accent_color;
 		if (savedAccent) {
+			if (savedAccent.startsWith('#')) {
+				activeAccent = savedAccent;
+				customAccentColor = savedAccent;
+				applyCustomAccent(savedAccent);
+			} else {
 				const preset = accentPresets.find(p => p.name === savedAccent);
 				if (preset) {
 					activeAccent = savedAccent;
 					applyAccent(preset);
 				}
 			}
+		}
 		const savedSize = $appConfig?.font_size;
 		if (savedSize) {
 			activeFontSize = savedSize;
@@ -983,43 +1029,94 @@
 						</div>
 					{:else if activeTab === 'styling'}
 						<div class="tab-content">
+							<div class="two-col-sections">
 							<div class="settings-section">
 								<h3>Theme</h3>
-								<div class="theme-grid">
+								<div class="dropdown-wrap">
-									{#each themePresets as preset}
 									<button
-											class="theme-swatch"
+										class="dropdown-trigger"
-											class:active={$theme === preset.id}
+										class:open={themeDropdownOpen}
-											onclick={() => { $theme = preset.id; setTheme(preset.id); }}
+										onclick={() => { themeDropdownOpen = !themeDropdownOpen; accentDropdownOpen = false; }}
-											title={preset.label}
 									>
-											<span class="theme-preview" style="--preview-bg: {preset.bg}; --preview-sidebar: {preset.sidebar}; --preview-accent: {preset.accent}">
+										<span class="dropdown-preview" style="--preview-bg: {activeThemePreset.bg}; --preview-sidebar: {activeThemePreset.sidebar}; --preview-accent: {activeThemePreset.accent}">
 											<span class="preview-sidebar"></span>
 											<span class="preview-main">
 												<span class="preview-accent-bar"></span>
 											</span>
 										</span>
-											<span class="theme-label">{preset.label}</span>
+										<span class="dropdown-trigger-label">{activeThemePreset.label}</span>
+										<svg class="dropdown-chevron" viewBox="0 0 16 16" fill="none"><path d="M4 6l4 4 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
+									</button>
+									{#if themeDropdownOpen}
+										<div class="dropdown-list" use:clickOutside={() => themeDropdownOpen = false}>
+											{#each themePresets as preset}
+												<button
+													class="dropdown-item"
+													class:active={$theme === preset.id}
+													onclick={() => { $theme = preset.id; setTheme(preset.id); themeDropdownOpen = false; }}
+												>
+													<span class="dropdown-preview" style="--preview-bg: {preset.bg}; --preview-sidebar: {preset.sidebar}; --preview-accent: {preset.accent}">
+														<span class="preview-sidebar"></span>
+														<span class="preview-main">
+															<span class="preview-accent-bar"></span>
+														</span>
+													</span>
+													<span class="dropdown-item-label">{preset.label}</span>
+													{#if $theme === preset.id}
+														<svg class="dropdown-check" viewBox="0 0 16 16" fill="none"><path d="M3 8l4 4 6-6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
+													{/if}
 												</button>
 											{/each}
 										</div>
+									{/if}
+								</div>
 							</div>
 
 							<div class="settings-section">
 								<h3>Accent Color</h3>
-								<div class="accent-grid">
+								<div class="dropdown-wrap">
+									<button
+										class="dropdown-trigger"
+										class:open={accentDropdownOpen}
+										onclick={() => { accentDropdownOpen = !accentDropdownOpen; themeDropdownOpen = false; }}
+									>
+										<span class="accent-dot" style="background: {activeAccentColor}"></span>
+										<span class="dropdown-trigger-label">{isCustomAccent ? 'Custom' : activeAccentPreset.name}</span>
+										<svg class="dropdown-chevron" viewBox="0 0 16 16" fill="none"><path d="M4 6l4 4 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
+									</button>
+									{#if accentDropdownOpen}
+										<div class="dropdown-list" use:clickOutside={() => accentDropdownOpen = false}>
 											{#each accentPresets as preset}
 												<button
-											class="accent-swatch"
+													class="dropdown-item"
 													class:active={activeAccent === preset.name}
-											style="--swatch-color: {isThemeDark ? preset.dark : preset.light}"
+													onclick={() => { selectAccent(preset); accentDropdownOpen = false; }}
-											onclick={() => selectAccent(preset)}
-											title={preset.name}
 												>
-											<span class="swatch-circle"></span>
+													<span class="accent-dot" style="background: {isThemeDark ? preset.dark : preset.light}"></span>
-											<span class="swatch-label">{preset.name}</span>
+													<span class="dropdown-item-label">{preset.name}</span>
+													{#if activeAccent === preset.name}
+														<svg class="dropdown-check" viewBox="0 0 16 16" fill="none"><path d="M3 8l4 4 6-6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
+													{/if}
 												</button>
 											{/each}
+											<div class="dropdown-divider"></div>
+											<label class="dropdown-item custom-accent-item" class:active={isCustomAccent}>
+												<span class="accent-dot" style="background: {customAccentColor}"></span>
+												<span class="dropdown-item-label">Custom</span>
+												<input
+													type="color"
+													class="color-wheel-input"
+													value={customAccentColor}
+													oninput={(e) => applyCustomAccent(e.currentTarget.value)}
+													onchange={(e) => selectCustomAccent(e.currentTarget.value)}
+												/>
+												{#if isCustomAccent}
+													<svg class="dropdown-check" viewBox="0 0 16 16" fill="none"><path d="M3 8l4 4 6-6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
+												{/if}
+											</label>
+										</div>
+									{/if}
+								</div>
 							</div>
 							</div>
 
@@ -1902,42 +1999,116 @@
 		font-weight: 500;
 	}
 
-	.theme-grid {
+	.two-col-sections {
 		display: grid;
-		grid-template-columns: repeat(5, 1fr);
+		grid-template-columns: 1fr 1fr;
-		gap: 8px;
+		gap: 0 16px;
 	}
 
-	.theme-swatch {
+	.two-col-sections .settings-section {
+		margin-bottom: 24px;
+	}
+
+	.dropdown-wrap {
+		position: relative;
+	}
+
+	.dropdown-trigger {
+		width: 100%;
 		display: flex;
-		flex-direction: column;
 		align-items: center;
-		gap: 5px;
+		gap: 10px;
-		padding: 6px;
+		padding: 8px 10px;
+		background: var(--bg-secondary);
 		border: 1px solid var(--border-color);
 		border-radius: 8px;
-		background: var(--bg-secondary);
 		cursor: pointer;
-		transition: all 0.15s;
+		transition: border-color 0.15s;
 	}
 
-	.theme-swatch:hover {
+	.dropdown-trigger:hover,
-		border-color: var(--text-tertiary);
+	.dropdown-trigger.open {
-	}
-
-	.theme-swatch.active {
 		border-color: var(--accent);
-		box-shadow: 0 0 0 2px var(--accent-light);
 	}
 
-	.theme-preview {
+	.dropdown-trigger-label {
-		display: flex;
+		flex: 1;
+		font-size: 13px;
+		color: var(--text-primary);
+		text-align: left;
+	}
+
+	.dropdown-chevron {
+		width: 14px;
+		height: 14px;
+		color: var(--text-tertiary);
+		flex-shrink: 0;
+		transition: transform 0.15s;
+	}
+
+	.dropdown-trigger.open .dropdown-chevron {
+		transform: rotate(180deg);
+	}
+
+	.dropdown-list {
+		position: absolute;
+		top: calc(100% + 4px);
+		left: 0;
+		right: 0;
+		background: var(--bg-secondary);
+		border: 1px solid var(--border-color);
+		border-radius: 8px;
+		box-shadow: var(--shadow-md);
+		z-index: 100;
+		max-height: 240px;
+		overflow-y: auto;
+		padding: 4px;
+	}
+
+	.dropdown-item {
 		width: 100%;
-		height: 32px;
+		display: flex;
+		align-items: center;
+		gap: 10px;
+		padding: 7px 8px;
+		border-radius: 5px;
+		background: none;
+		border: none;
+		cursor: pointer;
+		transition: background 0.1s;
+	}
+
+	.dropdown-item:hover {
+		background: var(--bg-hover);
+	}
+
+	.dropdown-item.active {
+		background: var(--accent-light);
+	}
+
+	.dropdown-item-label {
+		flex: 1;
+		font-size: 13px;
+		color: var(--text-primary);
+		text-align: left;
+	}
+
+	.dropdown-check {
+		width: 14px;
+		height: 14px;
+		color: var(--accent);
+		flex-shrink: 0;
+	}
+
+	.dropdown-preview {
+		display: flex;
+		width: 36px;
+		height: 22px;
 		border-radius: 4px;
 		overflow: hidden;
 		background: var(--preview-bg);
-		border: 1px solid rgba(0,0,0,0.1);
+		border: 1px solid rgba(0,0,0,0.12);
+		flex-shrink: 0;
 	}
 
 	.preview-sidebar {
@@ -1949,10 +2120,10 @@
 	.preview-main {
 		flex: 1;
 		background: var(--preview-bg);
-		padding: 4px;
+		padding: 3px;
 		display: flex;
 		flex-direction: column;
-		gap: 3px;
+		gap: 2px;
 	}
 
 	.preview-accent-bar {
@@ -1962,62 +2133,33 @@
 		border-radius: 2px;
 	}
 
-	.theme-label {
+	.accent-dot {
-		font-size: 10px;
+		width: 18px;
-		color: var(--text-secondary);
+		height: 18px;
-		text-align: center;
-		line-height: 1.2;
-		word-break: break-word;
-	}
-
-	.theme-swatch.active .theme-label {
-		color: var(--accent);
-	}
-
-	.accent-grid {
-		display: grid;
-		grid-template-columns: repeat(4, 1fr);
-		gap: 8px;
-	}
-
-	.accent-swatch {
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		gap: 6px;
-		padding: 12px 8px;
-		border: 1px solid var(--border-color);
-		border-radius: 10px;
-		background: var(--bg-secondary);
-		cursor: pointer;
-		transition: all 0.15s;
-	}
-
-	.accent-swatch:hover {
-		background: var(--bg-hover);
-		border-color: var(--swatch-color);
-	}
-
-	.accent-swatch.active {
-		border-color: var(--swatch-color);
-		background: var(--accent-light);
-	}
-
-	.swatch-circle {
-		width: 24px;
-		height: 24px;
 		border-radius: 50%;
-		background: var(--swatch-color);
+		flex-shrink: 0;
 	}
 
-	.swatch-label {
+	.dropdown-divider {
-		font-size: 11px;
+		height: 1px;
-		color: var(--text-secondary);
+		background: var(--border-light);
+		margin: 4px 0;
 	}
 
-	.accent-swatch.active .swatch-label {
+	.custom-accent-item {
-		color: var(--text-primary);
+		cursor: pointer;
-		font-weight: 500;
+		position: relative;
+	}
+
+	.color-wheel-input {
+		position: absolute;
+		inset: 0;
+		width: 100%;
+		height: 100%;
+		opacity: 0;
+		cursor: pointer;
+		border: none;
+		padding: 0;
 	}
 
 	.font-size-options {
@@ -2686,15 +2828,6 @@
 		font-size: 14px;
 	}
 
-	.settings-panel.mobile .accent-grid {
-		grid-template-columns: repeat(4, 1fr);
-		gap: 10px;
-	}
-
-	.settings-panel.mobile .accent-swatch {
-		padding: 14px 8px;
-	}
-
 	.settings-panel.mobile .font-size-options {
 		gap: 8px;
 	}

src/routes/+layout.svelte

@@ -16,8 +16,8 @@
 	});
 
 	function applyTheme(t: string) {
-		const darkThemes = ['dark', 'solarized-dark', 'catppuccin', 'nord', 'tokyo-night', 'github-dark', 'dracula', 'blueberry', 'forest-green', 'gruvbox', 'midnight-tide', 'cherry-blossom', 'synthwave', 'ember', 'moonlit'];
+		const darkThemes = ['dark', 'solarized-dark', 'catppuccin', 'nord', 'tokyo-night', 'github-dark', 'dracula', 'blueberry', 'forest-green', 'gruvbox', 'midnight-tide', 'cherry-blossom', 'synthwave', 'ember', 'moonlit', 'dark-coffee', 'crimson'];
-		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'];
+		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'];
 		const root = document.documentElement;
 		root.classList.remove('dark');
 		root.removeAttribute('data-theme');

src/routes/+page.svelte

@@ -26,8 +26,8 @@
 			// Apply theme immediately to prevent flash
 			const themeValue = config.theme || 'system';
 			const root = document.documentElement;
-			const darkThemes = ['dark', 'solarized-dark', 'catppuccin', 'nord', 'tokyo-night', 'github-dark', 'dracula'];
+			const darkThemes = ['dark', 'solarized-dark', 'catppuccin', 'nord', 'tokyo-night', 'github-dark', 'dracula', 'blueberry', 'forest-green', 'gruvbox', 'midnight-tide', 'cherry-blossom', 'synthwave', 'ember', 'moonlit', 'dark-coffee', 'crimson'];
-			const namedThemes = ['solarized-light', 'solarized-dark', 'catppuccin', 'nord', 'tokyo-night', 'github-light', 'github-dark', 'dracula'];
+			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'];
 			root.classList.remove('dark');
 			root.removeAttribute('data-theme');
 			if (namedThemes.includes(themeValue)) {
@@ -60,6 +60,12 @@
 			}
 			// Apply saved accent
 			if (config.accent_color) {
+				const themeVal = config.theme || 'light';
+				const isDark = darkThemes.includes(themeVal) || (themeVal === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches);
+				let color: string | null = null;
+				if (config.accent_color.startsWith('#')) {
+					color = config.accent_color;
+				} else {
 					const accentPresets: Record<string, { light: string; dark: string }> = {
 						Indigo: { light: '#5b6abf', dark: '#7b9bd4' },
 						Rose: { light: '#e11d48', dark: '#d4768a' },
@@ -69,12 +75,16 @@
 						Cyan: { light: '#0891b2', dark: '#5ba8b5' },
 						Orange: { light: '#ea580c', dark: '#c98560' },
 						Teal: { light: '#0d9488', dark: '#5fada5' },
+						Sakura: { light: '#d4547a', dark: '#f4a0b5' },
+						Gold: { light: '#b8860b', dark: '#fabd2f' },
+						Lavender: { light: '#9d5cdb', dark: '#c084fc' },
+						Sky: { light: '#0284c7', dark: '#38bdf8' },
+						Coral: { light: '#e85d4a', dark: '#ff8a7a' },
 					};
 					const preset = accentPresets[config.accent_color];
-				if (preset) {
+					if (preset) color = isDark ? preset.dark : preset.light;
-					const themeVal = config.theme || 'light';
+				}
-					const isDark = darkThemes.includes(themeVal) || (themeVal === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches);
+				if (color) {
-					const color = isDark ? preset.dark : preset.light;
 					const root = document.documentElement;
 					root.style.setProperty('--accent', color);
 					root.style.setProperty('--text-accent', color);