From 80bdabaf1bafbc5cb49616d9c1808dd01758be81 Mon Sep 17 00:00:00 2001 From: blake Date: Tue, 16 Jun 2026 23:40:58 +0200 Subject: [PATCH] Material Dark, Material Light, Monokai, Rose Pine, Everforest, Horizon, Cyberpunk, Black themes all added. (#122) WIP: New themes Reviewed-on: https://codeberg.org/ArkHost/HelixNotes/pulls/122 --- src/app.css | 200 ++++++++++++++++++++++++ src/lib/components/SettingsPanel.svelte | 10 +- src/routes/+layout.svelte | 4 +- 3 files changed, 211 insertions(+), 3 deletions(-) diff --git a/src/app.css b/src/app.css index d2cd127..a903686 100644 --- a/src/app.css +++ b/src/app.css @@ -761,6 +761,206 @@ --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); } +:root[data-theme="material-dark"] { + --bg-primary: #212121; + --bg-secondary: #1b1b1b; + --bg-tertiary: #282828; + --bg-hover: #2d2d2d; + --bg-active: #393939; + --bg-editor: #212121; + --text-primary: #eeffff; + --text-secondary: #b0bec5; + --text-tertiary: #546e7a; + --text-accent: #80cbc4; + --border-color: #2d2d2d; + --border-light: #252525; + --accent: #80cbc4; + --accent-hover: #4db6ac; + --accent-light: color-mix(in srgb, #80cbc4 12%, transparent); + --danger: #ff5370; + --danger-hover: #e53050; + --success: #c3e88d; + --warning: #ffcb6b; + --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="material-light"] { + --bg-primary: #fafafa; + --bg-secondary: #f5f5f5; + --bg-tertiary: #eeeeee; + --bg-hover: #e0e0e0; + --bg-active: #d6d6d6; + --bg-editor: #fafafa; + --text-primary: #212121; + --text-secondary: #546e7a; + --text-tertiary: #90a4ae; + --text-accent: #00897b; + --border-color: #e0e0e0; + --border-light: #eeeeee; + --accent: #00897b; + --accent-hover: #00796b; + --accent-light: color-mix(in srgb, #00897b 8%, transparent); + --danger: #e53935; + --danger-hover: #c62828; + --success: #388e3c; + --warning: #f57c00; + --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="monokai"] { + --bg-primary: #272822; + --bg-secondary: #1e1f1c; + --bg-tertiary: #2d2e27; + --bg-hover: #3a3b32; + --bg-active: #49483e; + --bg-editor: #272822; + --text-primary: #f8f8f2; + --text-secondary: #a59f85; + --text-tertiary: #75715e; + --text-accent: #a6e22e; + --border-color: #3a3b32; + --border-light: #2d2e27; + --accent: #a6e22e; + --accent-hover: #8ec226; + --accent-light: color-mix(in srgb, #a6e22e 12%, transparent); + --danger: #f92672; + --danger-hover: #e01060; + --success: #a6e22e; + --warning: #e6db74; + --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="rose-pine"] { + --bg-primary: #191724; + --bg-secondary: #1f1d2e; + --bg-tertiary: #26233a; + --bg-hover: #312f44; + --bg-active: #403d52; + --bg-editor: #191724; + --text-primary: #e0def4; + --text-secondary: #908caa; + --text-tertiary: #6e6a86; + --text-accent: #c4a7e7; + --border-color: #312f44; + --border-light: #26233a; + --accent: #c4a7e7; + --accent-hover: #b094d8; + --accent-light: color-mix(in srgb, #c4a7e7 12%, transparent); + --danger: #eb6f92; + --danger-hover: #d05572; + --success: #9ccfd8; + --warning: #f6c177; + --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="everforest"] { + --bg-primary: #2d353b; + --bg-secondary: #272e33; + --bg-tertiary: #2e383c; + --bg-hover: #374145; + --bg-active: #414b50; + --bg-editor: #2d353b; + --text-primary: #d3c6aa; + --text-secondary: #9da9a0; + --text-tertiary: #7a8478; + --text-accent: #83c092; + --border-color: #374145; + --border-light: #2e383c; + --accent: #83c092; + --accent-hover: #6aac7a; + --accent-light: color-mix(in srgb, #83c092 12%, transparent); + --danger: #e67e80; + --danger-hover: #cc6264; + --success: #a7c080; + --warning: #dbbc7f; + --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="horizon"] { + --bg-primary: #1c1e26; + --bg-secondary: #16181f; + --bg-tertiary: #21232c; + --bg-hover: #2e303e; + --bg-active: #3a3c4e; + --bg-editor: #1c1e26; + --text-primary: #d5d8da; + --text-secondary: #9a9da5; + --text-tertiary: #626672; + --text-accent: #e9547f; + --border-color: #2e303e; + --border-light: #21232c; + --accent: #e9547f; + --accent-hover: #d83d6e; + --accent-light: color-mix(in srgb, #e9547f 12%, transparent); + --danger: #f43e5c; + --danger-hover: #e02848; + --success: #29d398; + --warning: #fab38e; + --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="cyberpunk"] { + --bg-primary: #0a0e17; + --bg-secondary: #060911; + --bg-tertiary: #0f1420; + --bg-hover: #141a28; + --bg-active: #1c2438; + --bg-editor: #0a0e17; + --text-primary: #e0e8ff; + --text-secondary: #8899cc; + --text-tertiary: #445588; + --text-accent: #00d9ff; + --border-color: #1c2438; + --border-light: #0f1420; + --accent: #ff0080; + --accent-hover: #e0006a; + --accent-light: color-mix(in srgb, #ff0080 12%, transparent); + --danger: #ff0044; + --danger-hover: #cc0033; + --success: #00ff88; + --warning: #ffcc00; + --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5); + --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.6); + --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.7); +} + +:root[data-theme="black"] { + --bg-primary: #000000; + --bg-secondary: #0a0a0a; + --bg-tertiary: #111111; + --bg-hover: #1a1a1a; + --bg-active: #222222; + --bg-editor: #000000; + --text-primary: #f0f0f0; + --text-secondary: #999999; + --text-tertiary: #555555; + --text-accent: #ffffff; + --border-color: #1a1a1a; + --border-light: #111111; + --accent: #ffffff; + --accent-hover: #e0e0e0; + --accent-light: color-mix(in srgb, #ffffff 12%, transparent); + --danger: #ff3333; + --danger-hover: #cc2222; + --success: #33ff77; + --warning: #ffcc00; + --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.6); + --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.7); + --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.8); +} + *, *::before, *::after { diff --git a/src/lib/components/SettingsPanel.svelte b/src/lib/components/SettingsPanel.svelte index 54a31b5..773f03f 100644 --- a/src/lib/components/SettingsPanel.svelte +++ b/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', 'dark-coffee', 'crimson']; + 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', 'material-dark', 'monokai', 'rose-pine', 'everforest', 'horizon', 'cyberpunk', 'black']; let isThemeDark = $derived( darkThemes.includes($theme) || ($theme === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches) ); @@ -414,6 +414,14 @@ { 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' }, + { id: 'material-dark', label: 'Material Dark', bg: '#212121', sidebar: '#1b1b1b', accent: '#80cbc4' }, + { id: 'material-light', label: 'Material Light', bg: '#fafafa', sidebar: '#f5f5f5', accent: '#00897b' }, + { id: 'monokai', label: 'Monokai', bg: '#272822', sidebar: '#1e1f1c', accent: '#a6e22e' }, + { id: 'rose-pine', label: 'Rosé Pine', bg: '#191724', sidebar: '#1f1d2e', accent: '#c4a7e7' }, + { id: 'everforest', label: 'Everforest', bg: '#2d353b', sidebar: '#272e33', accent: '#83c092' }, + { id: 'horizon', label: 'Horizon', bg: '#1c1e26', sidebar: '#16181f', accent: '#e9547f' }, + { id: 'cyberpunk', label: 'Cyberpunk', bg: '#0a0e17', sidebar: '#060911', accent: '#ff0080' }, + { id: 'black', label: 'Black', bg: '#000000', sidebar: '#0a0a0a', accent: '#ffffff' }, ]; const accentPresets = [ diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 91a955d..5d75df8 100644 --- a/src/routes/+layout.svelte +++ b/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', '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', 'light-coffee', 'dark-coffee', 'cotton-candy', 'crimson', 'cloud', 'peach']; + 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', 'material-dark', 'monokai', 'rose-pine', 'everforest', 'horizon', 'cyberpunk', 'black']; + 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']; const root = document.documentElement; root.classList.remove('dark'); root.removeAttribute('data-theme');