Add classic palette option
This commit is contained in:
@@ -50,6 +50,42 @@
|
|||||||
];
|
];
|
||||||
|
|
||||||
const palettes: Palette[] = [
|
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',
|
slug: 'emerald',
|
||||||
label: 'Emerald',
|
label: 'Emerald',
|
||||||
@@ -277,7 +313,7 @@
|
|||||||
selectedPaletteIndex = paletteIndex >= 0 ? paletteIndex : 0;
|
selectedPaletteIndex = paletteIndex >= 0 ? paletteIndex : 0;
|
||||||
|
|
||||||
const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
|
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));
|
updateTheme(initialTheme, Boolean(savedTheme));
|
||||||
|
|
||||||
const handlePreferenceChange = (event: MediaQueryListEvent) => {
|
const handlePreferenceChange = (event: MediaQueryListEvent) => {
|
||||||
@@ -338,7 +374,7 @@
|
|||||||
class:active={index === selectedPaletteIndex}
|
class:active={index === selectedPaletteIndex}
|
||||||
aria-pressed={index === selectedPaletteIndex}
|
aria-pressed={index === selectedPaletteIndex}
|
||||||
aria-label={`Switch to ${palette.label} palette`}
|
aria-label={`Switch to ${palette.label} palette`}
|
||||||
style={`background: ${palette[theme].accentGradient};`}
|
style={`background: ${palette[theme]['accent-gradient']};`}
|
||||||
on:click={() => setPalette(index)}
|
on:click={() => setPalette(index)}
|
||||||
></button>
|
></button>
|
||||||
{/each}
|
{/each}
|
||||||
|
|||||||
Reference in New Issue
Block a user