my website at ewancroft.uk
feat: centralize theme configuration and enhance theme management system
+263
-134
+10
-117
src/lib/components/layout/ColorThemeToggle.svelte
+10
-117
src/lib/components/layout/ColorThemeToggle.svelte
···
2
2
import { onMount } from 'svelte';
3
3
import { Palette, Check } from '@lucide/svelte';
4
4
import { colorTheme, type ColorTheme } from '$lib/stores/colorTheme';
5
+
import {
6
+
getThemesByCategory,
7
+
CATEGORY_LABELS,
8
+
type ThemeDefinition
9
+
} from '$lib/config/themes.config';
5
10
6
11
let isOpen = $state(false);
7
12
let mounted = $state(false);
8
13
let currentTheme = $state<ColorTheme>('slate');
9
14
10
-
interface ThemeDefinition {
11
-
value: ColorTheme;
12
-
label: string;
13
-
description: string;
14
-
color: string;
15
-
category: 'neutral' | 'warm' | 'cool' | 'vibrant';
16
-
}
17
-
18
-
const themes: ThemeDefinition[] = [
19
-
// Neutral themes
20
-
{
21
-
value: 'sage',
22
-
label: 'Sage',
23
-
description: 'Calm green-blue',
24
-
color: 'oklch(77.77% 0.182 127.42)',
25
-
category: 'neutral'
26
-
},
27
-
{
28
-
value: 'monochrome',
29
-
label: 'Monochrome',
30
-
description: 'Pure greyscale',
31
-
color: 'oklch(78% 0 0)',
32
-
category: 'neutral'
33
-
},
34
-
{
35
-
value: 'slate',
36
-
label: 'Slate',
37
-
description: 'Blue-grey',
38
-
color: 'oklch(78.5% 0.095 230)',
39
-
category: 'neutral'
40
-
},
41
-
// Warm themes
42
-
{
43
-
value: 'ruby',
44
-
label: 'Ruby',
45
-
description: 'Bold red',
46
-
color: 'oklch(81.5% 0.228 10)',
47
-
category: 'warm'
48
-
},
49
-
{
50
-
value: 'coral',
51
-
label: 'Coral',
52
-
description: 'Orange-pink',
53
-
color: 'oklch(81.8% 0.212 20)',
54
-
category: 'warm'
55
-
},
56
-
{
57
-
value: 'sunset',
58
-
label: 'Sunset',
59
-
description: 'Warm orange',
60
-
color: 'oklch(80.5% 0.208 45)',
61
-
category: 'warm'
62
-
},
63
-
{
64
-
value: 'amber',
65
-
label: 'Amber',
66
-
description: 'Bright yellow',
67
-
color: 'oklch(82.8% 0.195 85)',
68
-
category: 'warm'
69
-
},
70
-
// Cool themes
71
-
{
72
-
value: 'forest',
73
-
label: 'Forest',
74
-
description: 'Natural green',
75
-
color: 'oklch(79.5% 0.195 145)',
76
-
category: 'cool'
77
-
},
78
-
{
79
-
value: 'teal',
80
-
label: 'Teal',
81
-
description: 'Blue-green',
82
-
color: 'oklch(79% 0.205 195)',
83
-
category: 'cool'
84
-
},
85
-
{
86
-
value: 'ocean',
87
-
label: 'Ocean',
88
-
description: 'Deep blue',
89
-
color: 'oklch(78.2% 0.188 240)',
90
-
category: 'cool'
91
-
},
92
-
// Vibrant themes
93
-
{
94
-
value: 'lavender',
95
-
label: 'Lavender',
96
-
description: 'Soft purple',
97
-
color: 'oklch(82% 0.215 295)',
98
-
category: 'vibrant'
99
-
},
100
-
{
101
-
value: 'rose',
102
-
label: 'Rose',
103
-
description: 'Pink-red',
104
-
color: 'oklch(83.5% 0.230 350)',
105
-
category: 'vibrant'
106
-
}
107
-
];
108
-
109
-
// Group themes by category
110
-
const themesByCategory = {
111
-
neutral: themes.filter((t) => t.category === 'neutral'),
112
-
warm: themes.filter((t) => t.category === 'warm'),
113
-
cool: themes.filter((t) => t.category === 'cool'),
114
-
vibrant: themes.filter((t) => t.category === 'vibrant')
115
-
};
116
-
117
-
const categoryLabels = {
118
-
neutral: 'Neutral',
119
-
warm: 'Warm',
120
-
cool: 'Cool',
121
-
vibrant: 'Vibrant'
122
-
};
123
-
124
-
type Category = keyof typeof categoryLabels;
15
+
// Get themes organized by category
16
+
const themesByCategory = getThemesByCategory();
17
+
type Category = keyof typeof CATEGORY_LABELS;
125
18
126
19
onMount(() => {
127
20
colorTheme.init();
···
197
90
{#each Object.entries(themesByCategory) as [category, categoryThemes]}
198
91
<div class="mb-3">
199
92
<div class="mb-1.5 px-3 text-xs font-medium text-ink-500 dark:text-ink-500">
200
-
{categoryLabels[category as Category]}
93
+
{CATEGORY_LABELS[category as Category]}
201
94
</div>
202
95
<div class="space-y-1">
203
96
{#each categoryThemes as theme}
204
97
<button
205
-
onclick={() => selectTheme(theme.value)}
98
+
onclick={() => selectTheme(theme.value as ColorTheme)}
206
99
class="flex w-full items-center gap-3 rounded-lg px-3 py-2.5 text-left transition-colors hover:bg-canvas-100 focus-visible:bg-canvas-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600 dark:hover:bg-canvas-900 dark:focus-visible:bg-canvas-900"
207
100
role="menuitem"
208
101
aria-current={currentTheme === theme.value ? 'true' : undefined}
+113
src/lib/config/THEME_SYSTEM.md
+113
src/lib/config/THEME_SYSTEM.md
···
1
+
# Theme System Documentation
2
+
3
+
The color theme system is now centralized and easy to extend. All theme definitions are managed through a single configuration file.
4
+
5
+
## Architecture
6
+
7
+
- **`/src/lib/config/themes.config.ts`** - Central theme configuration (add new themes here)
8
+
- **`/src/lib/stores/colorTheme.ts`** - Theme state management
9
+
- **`/src/lib/components/layout/ColorThemeToggle.svelte`** - Theme picker UI
10
+
- **`/src/lib/styles/themes/*.css`** - Individual theme CSS files
11
+
- **`/src/lib/styles/themes.css`** - Theme CSS imports
12
+
13
+
## Adding a New Theme
14
+
15
+
To add a new theme, follow these steps:
16
+
17
+
### 1. Add Theme Definition to Config
18
+
19
+
Edit `/src/lib/config/themes.config.ts` and add your theme to the `THEMES` array:
20
+
21
+
```typescript
22
+
{
23
+
value: 'midnight', // Unique identifier (used in CSS and localStorage)
24
+
label: 'Midnight', // Display name in dropdown
25
+
description: 'Deep night', // Short description
26
+
color: 'oklch(20% 0.05 240)', // Preview color (shown in dropdown)
27
+
category: 'cool' // 'neutral' | 'warm' | 'cool' | 'vibrant'
28
+
}
29
+
```
30
+
31
+
### 2. Create Theme CSS File
32
+
33
+
Create `/src/lib/styles/themes/midnight.css` with your color definitions:
34
+
35
+
```css
36
+
/* ============================================================================
37
+
MIDNIGHT THEME - Deep night
38
+
Primary: Dark blue
39
+
Secondary: Navy
40
+
Accent: Steel
41
+
Hue: 240° (blue)
42
+
============================================================================ */
43
+
[data-color-theme='midnight'] {
44
+
/* Define your CSS custom properties here */
45
+
--color-primary-500: oklch(20% 0.05 240);
46
+
/* ... other color definitions ... */
47
+
}
48
+
```
49
+
50
+
### 3. Import Theme CSS
51
+
52
+
Add the import to `/src/lib/styles/themes.css`:
53
+
54
+
```css
55
+
@import './themes/midnight.css';
56
+
```
57
+
58
+
## That's It!
59
+
60
+
The theme will automatically:
61
+
- ✅ Appear in the color theme dropdown
62
+
- ✅ Be type-safe in TypeScript
63
+
- ✅ Work with the theme switcher
64
+
- ✅ Persist in localStorage
65
+
66
+
## Configuration API
67
+
68
+
### `THEMES`
69
+
Array of all available themes. Each theme has:
70
+
- `value`: Unique identifier (string)
71
+
- `label`: Display name (string)
72
+
- `description`: Short description (string)
73
+
- `color`: Preview color in OKLCH format (string)
74
+
- `category`: Theme category (string)
75
+
76
+
### `ColorTheme`
77
+
TypeScript type automatically generated from theme values.
78
+
79
+
### `DEFAULT_THEME`
80
+
The default theme used when no preference is stored.
81
+
82
+
### `getThemesByCategory()`
83
+
Returns themes organized by category for UI rendering.
84
+
85
+
### `getTheme(value)`
86
+
Get a specific theme definition by its value.
87
+
88
+
## Example: Adding Multiple Themes
89
+
90
+
```typescript
91
+
// In themes.config.ts
92
+
export const THEMES: readonly ThemeDefinition[] = [
93
+
// ... existing themes ...
94
+
95
+
// New themes
96
+
{
97
+
value: 'midnight',
98
+
label: 'Midnight',
99
+
description: 'Deep night',
100
+
color: 'oklch(20% 0.05 240)',
101
+
category: 'cool'
102
+
},
103
+
{
104
+
value: 'sunrise',
105
+
label: 'Sunrise',
106
+
description: 'Morning glow',
107
+
color: 'oklch(75% 0.15 50)',
108
+
category: 'warm'
109
+
}
110
+
] as const;
111
+
```
112
+
113
+
Then create `midnight.css` and `sunrise.css` in the themes folder, and import them in `themes.css`.
+138
src/lib/config/themes.config.ts
+138
src/lib/config/themes.config.ts
···
1
+
/**
2
+
* Central theme configuration
3
+
* Add new themes here and they'll automatically appear in the dropdown and type system
4
+
*/
5
+
6
+
export interface ThemeDefinition {
7
+
value: string;
8
+
label: string;
9
+
description: string;
10
+
color: string;
11
+
category: 'neutral' | 'warm' | 'cool' | 'vibrant';
12
+
}
13
+
14
+
export const THEMES: readonly ThemeDefinition[] = [
15
+
// Neutral themes
16
+
{
17
+
value: 'sage',
18
+
label: 'Sage',
19
+
description: 'Calm green-blue',
20
+
color: 'oklch(77.77% 0.182 127.42)',
21
+
category: 'neutral'
22
+
},
23
+
{
24
+
value: 'monochrome',
25
+
label: 'Monochrome',
26
+
description: 'Pure greyscale',
27
+
color: 'oklch(78% 0 0)',
28
+
category: 'neutral'
29
+
},
30
+
{
31
+
value: 'slate',
32
+
label: 'Slate',
33
+
description: 'Blue-grey',
34
+
color: 'oklch(78.5% 0.095 230)',
35
+
category: 'neutral'
36
+
},
37
+
// Warm themes
38
+
{
39
+
value: 'ruby',
40
+
label: 'Ruby',
41
+
description: 'Bold red',
42
+
color: 'oklch(81.5% 0.228 10)',
43
+
category: 'warm'
44
+
},
45
+
{
46
+
value: 'coral',
47
+
label: 'Coral',
48
+
description: 'Orange-pink',
49
+
color: 'oklch(81.8% 0.212 20)',
50
+
category: 'warm'
51
+
},
52
+
{
53
+
value: 'sunset',
54
+
label: 'Sunset',
55
+
description: 'Warm orange',
56
+
color: 'oklch(80.5% 0.208 45)',
57
+
category: 'warm'
58
+
},
59
+
{
60
+
value: 'amber',
61
+
label: 'Amber',
62
+
description: 'Bright yellow',
63
+
color: 'oklch(82.8% 0.195 85)',
64
+
category: 'warm'
65
+
},
66
+
// Cool themes
67
+
{
68
+
value: 'forest',
69
+
label: 'Forest',
70
+
description: 'Natural green',
71
+
color: 'oklch(79.5% 0.195 145)',
72
+
category: 'cool'
73
+
},
74
+
{
75
+
value: 'teal',
76
+
label: 'Teal',
77
+
description: 'Blue-green',
78
+
color: 'oklch(79% 0.205 195)',
79
+
category: 'cool'
80
+
},
81
+
{
82
+
value: 'ocean',
83
+
label: 'Ocean',
84
+
description: 'Deep blue',
85
+
color: 'oklch(78.2% 0.188 240)',
86
+
category: 'cool'
87
+
},
88
+
// Vibrant themes
89
+
{
90
+
value: 'lavender',
91
+
label: 'Lavender',
92
+
description: 'Soft purple',
93
+
color: 'oklch(82% 0.215 295)',
94
+
category: 'vibrant'
95
+
},
96
+
{
97
+
value: 'rose',
98
+
label: 'Rose',
99
+
description: 'Pink-red',
100
+
color: 'oklch(83.5% 0.230 350)',
101
+
category: 'vibrant'
102
+
}
103
+
] as const;
104
+
105
+
// Extract theme values for type safety
106
+
export type ColorTheme = (typeof THEMES)[number]['value'];
107
+
108
+
// Default theme
109
+
export const DEFAULT_THEME: ColorTheme = 'slate';
110
+
111
+
// Category labels
112
+
export const CATEGORY_LABELS = {
113
+
neutral: 'Neutral',
114
+
warm: 'Warm',
115
+
cool: 'Cool',
116
+
vibrant: 'Vibrant'
117
+
} as const;
118
+
119
+
// Group themes by category (for UI organization)
120
+
export const getThemesByCategory = () => {
121
+
const grouped: Record<ThemeDefinition['category'], ThemeDefinition[]> = {
122
+
neutral: [],
123
+
warm: [],
124
+
cool: [],
125
+
vibrant: []
126
+
};
127
+
128
+
THEMES.forEach((theme) => {
129
+
grouped[theme.category].push(theme);
130
+
});
131
+
132
+
return grouped;
133
+
};
134
+
135
+
// Utility to get a specific theme by value
136
+
export const getTheme = (value: string): ThemeDefinition | undefined => {
137
+
return THEMES.find((theme) => theme.value === value);
138
+
};
+2
-17
src/lib/stores/colorTheme.ts
+2
-17
src/lib/stores/colorTheme.ts
···
1
1
import { writable } from 'svelte/store';
2
2
import { browser } from '$app/environment';
3
-
4
-
export type ColorTheme =
5
-
| 'sage' // Default (existing)
6
-
| 'monochrome' // Greyscale
7
-
// Rainbow spectrum
8
-
| 'ruby' // Red
9
-
| 'sunset' // Orange
10
-
| 'amber' // Yellow
11
-
| 'forest' // Green
12
-
| 'ocean' // Blue
13
-
| 'lavender' // Purple
14
-
| 'rose' // Pink
15
-
// Additional variations
16
-
| 'teal' // Blue-green
17
-
| 'coral' // Orange-pink
18
-
| 'slate'; // Blue-grey
3
+
import { DEFAULT_THEME, type ColorTheme } from '$lib/config/themes.config';
19
4
20
5
interface ColorThemeState {
21
6
current: ColorTheme;
···
23
8
}
24
9
25
10
const STORAGE_KEY = 'color-theme';
26
-
const DEFAULT_THEME: ColorTheme = 'slate';
27
11
28
12
function createColorThemeStore() {
29
13
const { subscribe, set, update } = writable<ColorThemeState>({
···
65
49
}
66
50
67
51
export const colorTheme = createColorThemeStore();
52
+
export type { ColorTheme };