diff --git a/src/app.html b/src/app.html
index 355b414..9f46cc6 100644
--- a/src/app.html
+++ b/src/app.html
@@ -5,6 +5,18 @@
%sveltekit.head%
+
diff --git a/src/lib/components/ThemeToggle.svelte b/src/lib/components/ThemeToggle.svelte
index d8f93a5..06688ed 100644
--- a/src/lib/components/ThemeToggle.svelte
+++ b/src/lib/components/ThemeToggle.svelte
@@ -2,13 +2,10 @@
import { theme, applyTheme } from '$lib/stores/theme.js';
import { onMount } from 'svelte';
- let currentTheme: 'pokeball' | 'dark';
+ let currentTheme: 'pokeball' | 'dark' = 'pokeball';
// Subscribe to theme changes
- $: if ($theme) {
- currentTheme = $theme;
- applyTheme($theme);
- }
+ $: (currentTheme = $theme), applyTheme($theme);
onMount(() => {
// Initialize theme from localStorage
diff --git a/src/lib/components/pokedex/PokedexViewBoxes.svelte b/src/lib/components/pokedex/PokedexViewBoxes.svelte
index 8be9bf3..13882e6 100644
--- a/src/lib/components/pokedex/PokedexViewBoxes.svelte
+++ b/src/lib/components/pokedex/PokedexViewBoxes.svelte
@@ -602,7 +602,7 @@
*/
:global(:root) {
--ld-box-bg-even: var(--fallback-b1, oklch(var(--b1) / 1));
- --ld-box-bg-odd: var(--fallback-b2, oklch(var(--b3) / 1));
+ --ld-box-bg-odd: var(--fallback-b3, oklch(var(--b3) / 1));
}
:global([data-theme='pokeball']) {
@@ -610,11 +610,6 @@
--ld-box-bg-odd: #f9f9f9;
}
- :global([data-theme='dark']) {
- --ld-box-bg-even: var(--fallback-b1, oklch(var(--b1) / 1));
- --ld-box-bg-odd: var(--fallback-b2, oklch(var(--b3) / 1));
- }
-
.boxes-grid {
display: grid;
grid-template-columns: repeat(1, minmax(0, 1fr));
diff --git a/src/lib/stores/theme.ts b/src/lib/stores/theme.ts
index d65dbaf..ce4232b 100644
--- a/src/lib/stores/theme.ts
+++ b/src/lib/stores/theme.ts
@@ -4,23 +4,62 @@ type Theme = 'pokeball' | 'dark';
const STORAGE_KEY = 'theme';
+function isTheme(type: string): type is Theme {
+ return type === 'pokeball' || type === 'dark';
+}
+
function createThemeStore() {
// Get stored theme from localStorage or default to 'pokeball'
- const storedTheme = (typeof window !== 'undefined' &&
- localStorage.getItem(STORAGE_KEY)) as Theme | null;
- const initialTheme: Theme = storedTheme || 'pokeball';
+ let initialTheme: Theme = 'pokeball';
+ if (typeof window !== 'undefined') {
+ try {
+ const storedTheme = localStorage.getItem(STORAGE_KEY);
+ if (storedTheme && isTheme(storedTheme)) {
+ initialTheme = storedTheme;
+ }
+ } catch {
+ // ignore (privacy mode / disabled storage)
+ }
+ }
- const { subscribe, set, update } = writable(initialTheme);
+ const { subscribe, set: writableSet, update } = writable(initialTheme);
return {
subscribe,
- set,
- toggle: () => update((theme) => (theme === 'pokeball' ? 'dark' : 'pokeball')),
+ set: (value: Theme) => {
+ if (isTheme(value)) {
+ writableSet(value);
+ if (typeof window !== 'undefined') {
+ try {
+ localStorage.setItem(STORAGE_KEY, value);
+ } catch {
+ // ignore (privacy mode / disabled storage)
+ }
+ }
+ }
+ },
+ toggle: () => {
+ update((theme) => {
+ const newTheme = theme === 'pokeball' ? 'dark' : 'pokeball';
+ if (typeof window !== 'undefined') {
+ try {
+ localStorage.setItem(STORAGE_KEY, newTheme);
+ } catch {
+ // ignore (privacy mode / disabled storage)
+ }
+ }
+ return newTheme;
+ });
+ },
init: () => {
if (typeof window !== 'undefined') {
- const stored = localStorage.getItem(STORAGE_KEY) as Theme | null;
- if (stored) {
- set(stored);
+ try {
+ const stored = localStorage.getItem(STORAGE_KEY);
+ if (stored && isTheme(stored)) {
+ writableSet(stored);
+ }
+ } catch {
+ // ignore (privacy mode / disabled storage)
}
}
}