jcreek/LivingDexTracker
1
0
Fork 0
mirror of https://github.com/jcreek/LivingDexTracker.git synced 2026-07-13 02:53:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor(#48): Address PR comments

Browse Source
This commit is contained in:
Josh Creek
2026-01-10 21:44:19 +00:00
parent ad8c8a847d
commit 9d14b2d2f1
4 changed files with 63 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app.html
+12
View File
@@ -5,6 +5,18 @@
<link rel="icon" href="%sveltekit.assets%/favicon.png" /> <link rel="icon" href="%sveltekit.assets%/favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
%sveltekit.head% %sveltekit.head%
<script>
(function () {
try {
const storedTheme = localStorage.getItem('theme');
const theme = storedTheme || 'pokeball';
document.documentElement.setAttribute('data-theme', theme);
} catch (e) {
// Fallback to default theme if localStorage is not accessible
document.documentElement.setAttribute('data-theme', 'pokeball');
}
})();
</script>
<link rel="stylesheet" href="%sveltekit.assets%/output.css" /> <link rel="stylesheet" href="%sveltekit.assets%/output.css" />
</head> </head>
<body data-sveltekit-preload-data="hover"> <body data-sveltekit-preload-data="hover">
src/lib/components/ThemeToggle.svelte
+2 -5
View File
@@ -2,13 +2,10 @@
import { theme, applyTheme } from '$lib/stores/theme.js'; import { theme, applyTheme } from '$lib/stores/theme.js';
import { onMount } from 'svelte'; import { onMount } from 'svelte';
let currentTheme: 'pokeball' | 'dark'; let currentTheme: 'pokeball' | 'dark' = 'pokeball';
// Subscribe to theme changes // Subscribe to theme changes
$: if ($theme) { $: (currentTheme = $theme), applyTheme($theme);
currentTheme = $theme;
applyTheme($theme);
}
onMount(() => { onMount(() => {
// Initialize theme from localStorage // Initialize theme from localStorage
src/lib/components/pokedex/PokedexViewBoxes.svelte
+1 -6
View File
@@ -602,7 +602,7 @@
*/ */
:global(:root) { :global(:root) {
--ld-box-bg-even: var(--fallback-b1, oklch(var(--b1) / 1)); --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']) { :global([data-theme='pokeball']) {
@@ -610,11 +610,6 @@
--ld-box-bg-odd: #f9f9f9; --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 { .boxes-grid {
display: grid; display: grid;
grid-template-columns: repeat(1, minmax(0, 1fr)); grid-template-columns: repeat(1, minmax(0, 1fr));
src/lib/stores/theme.ts
+48 -9
View File
@@ -4,23 +4,62 @@ type Theme = 'pokeball' | 'dark';
const STORAGE_KEY = 'theme'; const STORAGE_KEY = 'theme';
function isTheme(type: string): type is Theme {
return type === 'pokeball' || type === 'dark';
}
function createThemeStore() { function createThemeStore() {
// Get stored theme from localStorage or default to 'pokeball' // Get stored theme from localStorage or default to 'pokeball'
const storedTheme = (typeof window !== 'undefined' && let initialTheme: Theme = 'pokeball';
localStorage.getItem(STORAGE_KEY)) as Theme | null; if (typeof window !== 'undefined') {
const initialTheme: Theme = storedTheme || 'pokeball'; try {
const storedTheme = localStorage.getItem(STORAGE_KEY);
if (storedTheme && isTheme(storedTheme)) {
initialTheme = storedTheme;
}
} catch {
// ignore (privacy mode / disabled storage)
}
}
const { subscribe, set, update } = writable<Theme>(initialTheme); const { subscribe, set: writableSet, update } = writable<Theme>(initialTheme);
return { return {
subscribe, subscribe,
set, set: (value: Theme) => {
toggle: () => update((theme) => (theme === 'pokeball' ? 'dark' : 'pokeball')), 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: () => { init: () => {
if (typeof window !== 'undefined') { if (typeof window !== 'undefined') {
const stored = localStorage.getItem(STORAGE_KEY) as Theme | null; try {
if (stored) { const stored = localStorage.getItem(STORAGE_KEY);
set(stored); if (stored && isTheme(stored)) {
writableSet(stored);
}
} catch {
// ignore (privacy mode / disabled storage)
} }
} }
} }