my website at ewancroft.uk
fix: update color theme handling and prevent flash on load
+21
-10
+5
-3
src/lib/components/layout/ColorThemeToggle.svelte
+5
-3
src/lib/components/layout/ColorThemeToggle.svelte
···
5
5
6
6
let isOpen = $state(false);
7
7
let mounted = $state(false);
8
-
let currentTheme = $state<ColorTheme>('sage');
8
+
let currentTheme = $state<ColorTheme>('forest');
9
9
10
10
interface ThemeDefinition {
11
11
value: ColorTheme;
···
121
121
vibrant: 'Vibrant'
122
122
};
123
123
124
+
type Category = keyof typeof categoryLabels;
125
+
124
126
onMount(() => {
125
127
colorTheme.init();
126
128
···
187
189
class="absolute right-0 top-full z-50 mt-2 w-72 rounded-lg border border-canvas-200 bg-canvas-50 shadow-xl dark:border-canvas-800 dark:bg-canvas-950"
188
190
role="menu"
189
191
>
190
-
<div class="max-h-[32rem] overflow-y-auto p-2">
192
+
<div class="max-h-128 overflow-y-auto p-2">
191
193
<div class="mb-2 px-3 py-2 text-xs font-semibold uppercase text-ink-600 dark:text-ink-400">
192
194
Color Themes
193
195
</div>
···
195
197
{#each Object.entries(themesByCategory) as [category, categoryThemes]}
196
198
<div class="mb-3">
197
199
<div class="mb-1.5 px-3 text-xs font-medium text-ink-500 dark:text-ink-500">
198
-
{categoryLabels[category]}
200
+
{categoryLabels[category as Category]}
199
201
</div>
200
202
<div class="space-y-1">
201
203
{#each categoryThemes as theme}
+1
-1
src/lib/components/layout/main/card/LinkCard.svelte
+1
-1
src/lib/components/layout/main/card/LinkCard.svelte
+3
-3
src/lib/components/ui/Card.svelte
+3
-3
src/lib/components/ui/Card.svelte
···
60
60
}: Props = $props();
61
61
62
62
// Determine if card should be a link
63
-
const isLink = !!href;
63
+
let isLink = $derived(!!href);
64
64
65
65
// Base classes
66
66
const baseClasses = 'rounded-xl transition-all duration-300';
···
85
85
};
86
86
87
87
// Interactive classes (hover effects)
88
-
const interactiveClasses = interactive || isLink ? 'cursor-pointer' : '';
88
+
let interactiveClasses = $derived(interactive || isLink ? 'cursor-pointer' : '');
89
89
90
90
// Combine all classes
91
-
const cardClasses = `${baseClasses} ${variantClasses[variant]} ${paddingClasses[padding]} ${interactiveClasses} ${customClass}`;
91
+
let cardClasses = $derived(`${baseClasses} ${variantClasses[variant]} ${paddingClasses[padding]} ${interactiveClasses} ${customClass}`);
92
92
93
93
/**
94
94
* Get badge styling classes based on color and variant
+1
-1
src/lib/components/ui/InternalCard.svelte
+1
-1
src/lib/components/ui/InternalCard.svelte
···
30
30
31
31
const baseClasses =
32
32
'flex items-start gap-3 rounded-lg bg-canvas-200 p-4 transition-colors hover:bg-canvas-300 dark:bg-canvas-800 dark:hover:bg-canvas-700 self-start';
33
-
const combinedClasses = `${baseClasses} ${customClass}`;
33
+
let combinedClasses = $derived(`${baseClasses} ${customClass}`);
34
34
</script>
35
35
36
36
{#if href}
+1
-1
src/lib/components/ui/PostsGroupedView.svelte
+1
-1
src/lib/components/ui/PostsGroupedView.svelte
+6
-1
src/lib/stores/colorTheme.ts
+6
-1
src/lib/stores/colorTheme.ts
···
40
40
const theme = stored || DEFAULT_THEME;
41
41
42
42
update((state) => ({ ...state, current: theme, mounted: true }));
43
-
applyTheme(theme);
43
+
44
+
// Only apply theme if not already applied (to prevent flash)
45
+
const currentTheme = document.documentElement.getAttribute('data-color-theme');
46
+
if (currentTheme !== theme) {
47
+
applyTheme(theme);
48
+
}
44
49
},
45
50
setTheme: (theme: ColorTheme) => {
46
51
if (!browser) return;
+4
src/routes/+layout.svelte
+4
src/routes/+layout.svelte
···
66
66
htmlElement.classList.remove('dark');
67
67
htmlElement.style.colorScheme = 'light';
68
68
}
69
+
70
+
// Apply color theme to prevent flash
71
+
const colorTheme = localStorage.getItem('color-theme') || 'forest';
72
+
htmlElement.setAttribute('data-color-theme', colorTheme);
69
73
})();
70
74
</script>
71
75
<link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png" />