diff --git a/src/app.css b/src/app.css index 46495a0..9d2ff0a 100644 --- a/src/app.css +++ b/src/app.css @@ -18,4 +18,24 @@ html { @apply bg-neutral-50 dark:bg-neutral-900; } + + /* Smooth theme transitions using View Transitions API */ + ::view-transition-old(root), + ::view-transition-new(root) { + animation-duration: 0.3s; + animation-timing-function: ease-in-out; + } + + /* Fallback transitions for browsers without View Transitions API */ + @media (prefers-reduced-motion: no-preference) { + html { + transition: background-color 0.3s ease-in-out; + } + + * { + transition: background-color 0.3s ease-in-out, + border-color 0.3s ease-in-out, + color 0.3s ease-in-out; + } + } } diff --git a/src/app.html b/src/app.html index f273cc5..859efd4 100644 --- a/src/app.html +++ b/src/app.html @@ -3,6 +3,14 @@ + + %sveltekit.head% diff --git a/src/routes/+error.svelte b/src/routes/+error.svelte new file mode 100644 index 0000000..e2a0016 --- /dev/null +++ b/src/routes/+error.svelte @@ -0,0 +1,40 @@ + + +
+
+ +
+

+ {statusCode} +

+ +

+ {errorMessage} +

+ + + Go Home + +
+ + + {#if statusCode === 404} +
+ 404 Not Found +
+ {/if} +
+
diff --git a/src/static/404.gif b/src/static/404.gif new file mode 100644 index 0000000..9c34296 Binary files /dev/null and b/src/static/404.gif differ diff --git a/src/stores/theme.ts b/src/stores/theme.ts index 341219f..ed09809 100644 --- a/src/stores/theme.ts +++ b/src/stores/theme.ts @@ -21,7 +21,7 @@ function createThemeStore() { } } - const { subscribe, set, update } = writable(initialTheme); + const { subscribe, update } = writable(initialTheme); // Apply theme on initialization if (browser) { @@ -30,8 +30,17 @@ function createThemeStore() { function applyTheme(newTheme: Theme) { if (browser) { - document.documentElement.classList.remove('light', 'dark'); - document.documentElement.classList.add(newTheme); + // Use View Transitions API if available for smooth theme changes + if (document.startViewTransition) { + document.startViewTransition(() => { + document.documentElement.classList.remove('light', 'dark'); + document.documentElement.classList.add(newTheme); + }); + } else { + // Fallback for browsers without View Transitions API + document.documentElement.classList.remove('light', 'dark'); + document.documentElement.classList.add(newTheme); + } } }