+233

src/theming.ts

reviewed

··· 1 1 + /** 2 2 + * Expanded Theming — custom color themes beyond light/dark. 3 3 + * 4 4 + * Pure logic module: theme definitions, CSS variable generation, 5 5 + * persistence. DOM application handled by the entry points. 6 6 + */ 7 7 + 8 8 + export interface ThemeColors { 9 9 + /** Primary accent color (OkLCH format) */ 10 10 + accent: string; 11 11 + /** Background color */ 12 12 + bg: string; 13 13 + /** Surface/card color */ 14 14 + surface: string; 15 15 + /** Primary text color */ 16 16 + text: string; 17 17 + /** Secondary/muted text */ 18 18 + textMuted: string; 19 19 + /** Border color */ 20 20 + border: string; 21 21 + } 22 22 + 23 23 + export interface Theme { 24 24 + id: string; 25 25 + name: string; 26 26 + base: 'light' | 'dark'; 27 27 + colors: ThemeColors; 28 28 + builtIn: boolean; 29 29 + } 30 30 + 31 31 + /** Built-in themes */ 32 32 + export const BUILT_IN_THEMES: Theme[] = [ 33 33 + { 34 34 + id: 'light', 35 35 + name: 'Light', 36 36 + base: 'light', 37 37 + builtIn: true, 38 38 + colors: { 39 39 + accent: 'oklch(0.65 0.15 195)', 40 40 + bg: 'oklch(0.985 0 0)', 41 41 + surface: 'oklch(0.97 0 0)', 42 42 + text: 'oklch(0.25 0 0)', 43 43 + textMuted: 'oklch(0.55 0 0)', 44 44 + border: 'oklch(0.88 0 0)', 45 45 + }, 46 46 + }, 47 47 + { 48 48 + id: 'dark', 49 49 + name: 'Dark', 50 50 + base: 'dark', 51 51 + builtIn: true, 52 52 + colors: { 53 53 + accent: 'oklch(0.7 0.15 195)', 54 54 + bg: 'oklch(0.17 0.01 260)', 55 55 + surface: 'oklch(0.22 0.01 260)', 56 56 + text: 'oklch(0.9 0 0)', 57 57 + textMuted: 'oklch(0.6 0 0)', 58 58 + border: 'oklch(0.32 0.01 260)', 59 59 + }, 60 60 + }, 61 61 + { 62 62 + id: 'midnight', 63 63 + name: 'Midnight Blue', 64 64 + base: 'dark', 65 65 + builtIn: true, 66 66 + colors: { 67 67 + accent: 'oklch(0.7 0.12 250)', 68 68 + bg: 'oklch(0.15 0.03 260)', 69 69 + surface: 'oklch(0.2 0.03 260)', 70 70 + text: 'oklch(0.9 0.01 250)', 71 71 + textMuted: 'oklch(0.6 0.02 250)', 72 72 + border: 'oklch(0.3 0.03 260)', 73 73 + }, 74 74 + }, 75 75 + { 76 76 + id: 'forest', 77 77 + name: 'Forest', 78 78 + base: 'dark', 79 79 + builtIn: true, 80 80 + colors: { 81 81 + accent: 'oklch(0.65 0.15 155)', 82 82 + bg: 'oklch(0.16 0.03 155)', 83 83 + surface: 'oklch(0.21 0.03 155)', 84 84 + text: 'oklch(0.9 0.01 155)', 85 85 + textMuted: 'oklch(0.6 0.02 155)', 86 86 + border: 'oklch(0.3 0.03 155)', 87 87 + }, 88 88 + }, 89 89 + { 90 90 + id: 'sepia', 91 91 + name: 'Sepia', 92 92 + base: 'light', 93 93 + builtIn: true, 94 94 + colors: { 95 95 + accent: 'oklch(0.6 0.12 60)', 96 96 + bg: 'oklch(0.95 0.02 80)', 97 97 + surface: 'oklch(0.92 0.02 80)', 98 98 + text: 'oklch(0.3 0.03 60)', 99 99 + textMuted: 'oklch(0.55 0.03 60)', 100 100 + border: 'oklch(0.85 0.03 80)', 101 101 + }, 102 102 + }, 103 103 + { 104 104 + id: 'rose', 105 105 + name: 'Rose', 106 106 + base: 'light', 107 107 + builtIn: true, 108 108 + colors: { 109 109 + accent: 'oklch(0.65 0.18 350)', 110 110 + bg: 'oklch(0.98 0.005 350)', 111 111 + surface: 'oklch(0.96 0.01 350)', 112 112 + text: 'oklch(0.25 0.02 350)', 113 113 + textMuted: 'oklch(0.55 0.03 350)', 114 114 + border: 'oklch(0.88 0.02 350)', 115 115 + }, 116 116 + }, 117 117 + ]; 118 118 + 119 119 + const THEME_STORAGE_KEY = 'tools-theme'; 120 120 + const CUSTOM_THEMES_KEY = 'tools-custom-themes'; 121 121 + let _themeCounter = 0; 122 122 + 123 123 + /** 124 124 + * Get a built-in theme by ID. 125 125 + */ 126 126 + export function getBuiltInTheme(id: string): Theme | null { 127 127 + return BUILT_IN_THEMES.find(t => t.id === id) || null; 128 128 + } 129 129 + 130 130 + /** 131 131 + * Generate CSS custom properties from a theme's colors. 132 132 + */ 133 133 + export function generateCssVars(colors: ThemeColors): Record<string, string> { 134 134 + return { 135 135 + '--color-accent': colors.accent, 136 136 + '--color-bg': colors.bg, 137 137 + '--color-surface': colors.surface, 138 138 + '--color-text': colors.text, 139 139 + '--color-text-muted': colors.textMuted, 140 140 + '--color-border': colors.border, 141 141 + }; 142 142 + } 143 143 + 144 144 + /** 145 145 + * Create a custom theme based on an existing theme. 146 146 + */ 147 147 + export function createCustomTheme( 148 148 + name: string, 149 149 + baseThemeId: string, 150 150 + overrides: Partial<ThemeColors>, 151 151 + ): Theme { 152 152 + const base = getBuiltInTheme(baseThemeId) || BUILT_IN_THEMES[0]; 153 153 + return { 154 154 + id: `custom-${Date.now()}-${++_themeCounter}`, 155 155 + name, 156 156 + base: base.base, 157 157 + builtIn: false, 158 158 + colors: { ...base.colors, ...overrides }, 159 159 + }; 160 160 + } 161 161 + 162 162 + /** 163 163 + * Load the saved theme ID from localStorage. 164 164 + */ 165 165 + export function loadSavedThemeId(): string { 166 166 + if (typeof localStorage === 'undefined') return 'light'; 167 167 + return localStorage.getItem(THEME_STORAGE_KEY) || 'light'; 168 168 + } 169 169 + 170 170 + /** 171 171 + * Save the active theme ID to localStorage. 172 172 + */ 173 173 + export function saveThemeId(themeId: string): void { 174 174 + if (typeof localStorage === 'undefined') return; 175 175 + localStorage.setItem(THEME_STORAGE_KEY, themeId); 176 176 + } 177 177 + 178 178 + /** 179 179 + * Load custom themes from localStorage. 180 180 + */ 181 181 + export function loadCustomThemes(): Theme[] { 182 182 + if (typeof localStorage === 'undefined') return []; 183 183 + try { 184 184 + const raw = localStorage.getItem(CUSTOM_THEMES_KEY); 185 185 + if (!raw) return []; 186 186 + const parsed = JSON.parse(raw); 187 187 + if (!Array.isArray(parsed)) return []; 188 188 + return parsed.filter( 189 189 + (t: any) => t && t.id && t.name && t.colors, 190 190 + ); 191 191 + } catch { 192 192 + return []; 193 193 + } 194 194 + } 195 195 + 196 196 + /** 197 197 + * Save custom themes to localStorage. 198 198 + */ 199 199 + export function saveCustomThemes(themes: Theme[]): void { 200 200 + if (typeof localStorage === 'undefined') return; 201 201 + localStorage.setItem( 202 202 + CUSTOM_THEMES_KEY, 203 203 + JSON.stringify(themes.filter(t => !t.builtIn)), 204 204 + ); 205 205 + } 206 206 + 207 207 + /** 208 208 + * Get all available themes (built-in + custom). 209 209 + */ 210 210 + export function getAllThemes(customThemes: Theme[] = []): Theme[] { 211 211 + return [...BUILT_IN_THEMES, ...customThemes]; 212 212 + } 213 213 + 214 214 + /** 215 215 + * Resolve a theme by ID from all available themes. 216 216 + */ 217 217 + export function resolveTheme( 218 218 + themeId: string, 219 219 + customThemes: Theme[] = [], 220 220 + ): Theme { 221 221 + const all = getAllThemes(customThemes); 222 222 + return all.find(t => t.id === themeId) || BUILT_IN_THEMES[0]; 223 223 + } 224 224 + 225 225 + /** 226 226 + * Delete a custom theme. Built-in themes cannot be deleted. 227 227 + */ 228 228 + export function deleteCustomTheme( 229 229 + themes: Theme[], 230 230 + themeId: string, 231 231 + ): Theme[] { 232 232 + return themes.filter(t => t.id !== themeId || t.builtIn); 233 233 + }

+148

tests/theming.test.ts

reviewed

··· 1 1 + import { describe, it, expect } from 'vitest'; 2 2 + import { 3 3 + BUILT_IN_THEMES, 4 4 + getBuiltInTheme, 5 5 + generateCssVars, 6 6 + createCustomTheme, 7 7 + getAllThemes, 8 8 + resolveTheme, 9 9 + deleteCustomTheme, 10 10 + type Theme, 11 11 + } from '../src/theming.js'; 12 12 + 13 13 + describe('Theming', () => { 14 14 + describe('BUILT_IN_THEMES', () => { 15 15 + it('includes light and dark themes', () => { 16 16 + const ids = BUILT_IN_THEMES.map(t => t.id); 17 17 + expect(ids).toContain('light'); 18 18 + expect(ids).toContain('dark'); 19 19 + }); 20 20 + 21 21 + it('has at least 4 built-in themes', () => { 22 22 + expect(BUILT_IN_THEMES.length).toBeGreaterThanOrEqual(4); 23 23 + }); 24 24 + 25 25 + it('all themes have required color properties', () => { 26 26 + for (const theme of BUILT_IN_THEMES) { 27 27 + expect(theme.colors.accent).toBeTruthy(); 28 28 + expect(theme.colors.bg).toBeTruthy(); 29 29 + expect(theme.colors.surface).toBeTruthy(); 30 30 + expect(theme.colors.text).toBeTruthy(); 31 31 + expect(theme.colors.textMuted).toBeTruthy(); 32 32 + expect(theme.colors.border).toBeTruthy(); 33 33 + } 34 34 + }); 35 35 + 36 36 + it('all themes use OkLCH colors', () => { 37 37 + for (const theme of BUILT_IN_THEMES) { 38 38 + expect(theme.colors.accent).toMatch(/oklch/); 39 39 + expect(theme.colors.bg).toMatch(/oklch/); 40 40 + } 41 41 + }); 42 42 + }); 43 43 + 44 44 + describe('getBuiltInTheme', () => { 45 45 + it('finds theme by ID', () => { 46 46 + const theme = getBuiltInTheme('dark'); 47 47 + expect(theme).not.toBeNull(); 48 48 + expect(theme!.name).toBe('Dark'); 49 49 + }); 50 50 + 51 51 + it('returns null for unknown ID', () => { 52 52 + expect(getBuiltInTheme('nonexistent')).toBeNull(); 53 53 + }); 54 54 + }); 55 55 + 56 56 + describe('generateCssVars', () => { 57 57 + it('generates CSS custom properties', () => { 58 58 + const vars = generateCssVars(BUILT_IN_THEMES[0].colors); 59 59 + expect(vars['--color-accent']).toBeTruthy(); 60 60 + expect(vars['--color-bg']).toBeTruthy(); 61 61 + expect(vars['--color-surface']).toBeTruthy(); 62 62 + expect(vars['--color-text']).toBeTruthy(); 63 63 + expect(vars['--color-text-muted']).toBeTruthy(); 64 64 + expect(vars['--color-border']).toBeTruthy(); 65 65 + }); 66 66 + 67 67 + it('returns 6 variables', () => { 68 68 + const vars = generateCssVars(BUILT_IN_THEMES[0].colors); 69 69 + expect(Object.keys(vars)).toHaveLength(6); 70 70 + }); 71 71 + }); 72 72 + 73 73 + describe('createCustomTheme', () => { 74 74 + it('creates a custom theme from a base', () => { 75 75 + const custom = createCustomTheme('My Theme', 'dark', { 76 76 + accent: 'oklch(0.7 0.2 300)', 77 77 + }); 78 78 + expect(custom.name).toBe('My Theme'); 79 79 + expect(custom.builtIn).toBe(false); 80 80 + expect(custom.colors.accent).toBe('oklch(0.7 0.2 300)'); 81 81 + // Inherits non-overridden colors from base 82 82 + expect(custom.colors.bg).toBe(BUILT_IN_THEMES.find(t => t.id === 'dark')!.colors.bg); 83 83 + }); 84 84 + 85 85 + it('falls back to light theme for unknown base', () => { 86 86 + const custom = createCustomTheme('Test', 'nonexistent', {}); 87 87 + expect(custom.base).toBe('light'); 88 88 + }); 89 89 + 90 90 + it('generates unique ID', () => { 91 91 + const c1 = createCustomTheme('A', 'light', {}); 92 92 + const c2 = createCustomTheme('B', 'light', {}); 93 93 + expect(c1.id).not.toBe(c2.id); 94 94 + }); 95 95 + }); 96 96 + 97 97 + describe('getAllThemes', () => { 98 98 + it('returns built-in themes when no custom', () => { 99 99 + const all = getAllThemes(); 100 100 + expect(all.length).toBe(BUILT_IN_THEMES.length); 101 101 + }); 102 102 + 103 103 + it('includes custom themes', () => { 104 104 + const custom: Theme = { 105 105 + id: 'custom-1', name: 'Custom', base: 'dark', 106 106 + builtIn: false, colors: BUILT_IN_THEMES[1].colors, 107 107 + }; 108 108 + const all = getAllThemes([custom]); 109 109 + expect(all.length).toBe(BUILT_IN_THEMES.length + 1); 110 110 + expect(all.find(t => t.id === 'custom-1')).toBeDefined(); 111 111 + }); 112 112 + }); 113 113 + 114 114 + describe('resolveTheme', () => { 115 115 + it('resolves built-in theme', () => { 116 116 + expect(resolveTheme('midnight').name).toBe('Midnight Blue'); 117 117 + }); 118 118 + 119 119 + it('resolves custom theme', () => { 120 120 + const custom: Theme = { 121 121 + id: 'custom-x', name: 'X', base: 'light', 122 122 + builtIn: false, colors: BUILT_IN_THEMES[0].colors, 123 123 + }; 124 124 + expect(resolveTheme('custom-x', [custom]).name).toBe('X'); 125 125 + }); 126 126 + 127 127 + it('falls back to light for unknown ID', () => { 128 128 + expect(resolveTheme('nonexistent').id).toBe('light'); 129 129 + }); 130 130 + }); 131 131 + 132 132 + describe('deleteCustomTheme', () => { 133 133 + it('removes custom theme', () => { 134 134 + const themes: Theme[] = [ 135 135 + { id: 'custom-1', name: 'C1', base: 'dark', builtIn: false, colors: BUILT_IN_THEMES[1].colors }, 136 136 + { id: 'custom-2', name: 'C2', base: 'light', builtIn: false, colors: BUILT_IN_THEMES[0].colors }, 137 137 + ]; 138 138 + const result = deleteCustomTheme(themes, 'custom-1'); 139 139 + expect(result).toHaveLength(1); 140 140 + expect(result[0].id).toBe('custom-2'); 141 141 + }); 142 142 + 143 143 + it('does not delete built-in themes', () => { 144 144 + const result = deleteCustomTheme(BUILT_IN_THEMES, 'dark'); 145 145 + expect(result.length).toBe(BUILT_IN_THEMES.length); 146 146 + }); 147 147 + }); 148 148 + });