ArkHost/HelixNotes
1
0
Fork 0
mirror of https://gitlab.com/ArkHost/HelixNotes.git synced 2026-07-24 15:55:55 +02:00
Code Issues Projects Releases Wiki Activity

main (#106)

Browse Source 
WIP: Themes, accents, dropdown
Reviewed-on: https://codeberg.org/ArkHost/HelixNotes/pulls/106
This commit is contained in:
blake
2026-06-12 17:19:14 +02:00
committed by ArkHost
parent d050ac907f
commit 50d27d5636
7 changed files with 909 additions and 804 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/routes/+page.svelte
+27 -17
View File
@@ -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 namedThemes = ['solarized-light', 'solarized-dark', 'catppuccin', 'nord', 'tokyo-night', 'github-light', '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', '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,21 +60,31 @@
}
// Apply saved accent
if (config.accent_color) {
const accentPresets: Record<string, { light: string; dark: string }> = {
Indigo: { light: '#5b6abf', dark: '#7b9bd4' },
Rose: { light: '#e11d48', dark: '#d4768a' },
Emerald: { light: '#059669', dark: '#5bab8a' },
Amber: { light: '#d97706', dark: '#c9a04e' },
Purple: { light: '#7c3aed', dark: '#9a82c4' },
Cyan: { light: '#0891b2', dark: '#5ba8b5' },
Orange: { light: '#ea580c', dark: '#c98560' },
Teal: { light: '#0d9488', dark: '#5fada5' },
};
const preset = accentPresets[config.accent_color];
if (preset) {
const themeVal = config.theme || 'light';
const isDark = darkThemes.includes(themeVal) || (themeVal === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches);
const 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);
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' },
Emerald: { light: '#059669', dark: '#5bab8a' },
Amber: { light: '#d97706', dark: '#c9a04e' },
Purple: { light: '#7c3aed', dark: '#9a82c4' },
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) color = isDark ? preset.dark : preset.light;
}
if (color) {
const root = document.documentElement;
root.style.setProperty('--accent', color);
root.style.setProperty('--text-accent', color);