ben/HowDoYouConvert
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Add classic palette option

Browse Source
This commit is contained in:
Codex
2026-03-07 08:50:52 +00:00
parent d450223f70
commit f4770f62f4
1 changed files with 38 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
hdyc-svelte/src/routes/+layout.svelte
View File

@@ -50,6 +50,42 @@
];
const palettes: Palette[] = [
{
slug: 'classic',
label: 'Classic',
light: {
bg: '#f8fafc',
'bg-elevated': '#ffffff',
'sidebar-bg': '#ffffff',
'card-bg': '#ffffff',
'input-bg': 'rgba(15, 23, 42, 0.04)',
'hover-bg': 'rgba(15, 23, 42, 0.08)',
border: 'rgba(15, 23, 42, 0.12)',
text: '#0f172a',
'text-muted': '#475569',
accent: '#10b981',
'accent-dark': '#059669',
'accent-glow': 'rgba(16, 185, 129, 0.15)',
'accent-gradient': 'linear-gradient(135deg, #10b981, #06b6d4)',
'header-bg': 'rgba(255, 255, 255, 0.95)',
},
dark: {
bg: '#0c0f14',
'bg-elevated': '#12161e',
'sidebar-bg': '#10141b',
'card-bg': 'rgba(18, 22, 30, 0.85)',
'input-bg': 'rgba(255, 255, 255, 0.04)',
'hover-bg': 'rgba(255, 255, 255, 0.06)',
border: 'rgba(255, 255, 255, 0.08)',
text: '#e8ecf4',
'text-muted': '#7b8498',
accent: '#10b981',
'accent-dark': '#059669',
'accent-glow': 'rgba(16, 185, 129, 0.15)',
'accent-gradient': 'linear-gradient(135deg, #10b981, #06b6d4)',
'header-bg': 'rgba(12, 15, 20, 0.85)',
},
},
{
slug: 'emerald',
label: 'Emerald',
@@ -277,7 +313,7 @@
selectedPaletteIndex = paletteIndex >= 0 ? paletteIndex : 0;
const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
const initialTheme: ThemeMode = savedTheme ?? (mediaQuery.matches ? 'dark' : 'light');
const initialTheme: ThemeMode = savedTheme ?? 'dark';
updateTheme(initialTheme, Boolean(savedTheme));
const handlePreferenceChange = (event: MediaQueryListEvent) => {
@@ -338,7 +374,7 @@
class:active={index === selectedPaletteIndex}
aria-pressed={index === selectedPaletteIndex}
aria-label={`Switch to ${palette.label} palette`}
style={`background: ${palette[theme].accentGradient};`}
style={`background: ${palette[theme]['accent-gradient']};`}
on:click={() => setPalette(index)}
></button>
{/each}