diff --git a/dev-dist/sw.js b/dev-dist/sw.js index 4197025..9621773 100644 --- a/dev-dist/sw.js +++ b/dev-dist/sw.js @@ -78,7 +78,7 @@ define(['./workbox-7e5eb42b'], (function (workbox) { 'use strict'; */ workbox.precacheAndRoute([{ "url": "/", - "revision": "0.4n2fvpih6f8" + "revision": "0.5d3f7lf01og" }], {}); workbox.cleanupOutdatedCaches(); workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("/"), { diff --git a/src/app.html b/src/app.html index 2b17f93..d5a4d58 100644 --- a/src/app.html +++ b/src/app.html @@ -12,6 +12,19 @@ + diff --git a/src/lib/components/Navbar.svelte b/src/lib/components/Navbar.svelte index 77a1ceb..4418813 100644 --- a/src/lib/components/Navbar.svelte +++ b/src/lib/components/Navbar.svelte @@ -1,5 +1,6 @@ -
+
Notebook @@ -60,13 +64,50 @@ {:else} Sign in {/if} +
@@ -96,7 +137,7 @@ bind:value={searchQuery} placeholder="Search" aria-label="Search notes and questions" - class="border-rule text-ink placeholder:text-faint focus:border-primary w-full rounded-none border bg-white px-3 py-2 text-sm tracking-wide transition-colors outline-none" + class="border-rule text-ink placeholder:text-faint focus:border-primary bg-surface w-full rounded-none border px-3 py-2 text-sm tracking-wide transition-colors outline-none" /> (mobileMenuOpen = false)} @@ -129,6 +170,43 @@ onclick={() => (mobileMenuOpen = false)}>Sign in {/if} + {/if}
diff --git a/src/lib/stores/theme.ts b/src/lib/stores/theme.ts new file mode 100644 index 0000000..803abf0 --- /dev/null +++ b/src/lib/stores/theme.ts @@ -0,0 +1,29 @@ +import { get, writable } from "svelte/store"; + +export type Theme = "light" | "dark"; + +const STORAGE_KEY = "dsec_theme"; + +function getInitialTheme(): Theme { + if (typeof window === "undefined") return "light"; + const stored = localStorage.getItem(STORAGE_KEY); + if (stored === "light" || stored === "dark") return stored; + return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; +} + +export const theme = writable(getInitialTheme()); + +function applyTheme(value: Theme) { + const root = document.documentElement; + root.classList.toggle("dark", value === "dark"); + root.style.colorScheme = value; + const meta = document.querySelector('meta[name="theme-color"]'); + if (meta) meta.setAttribute("content", value === "dark" ? "#131014" : "#ffffff"); +} + +export function toggleTheme() { + const next: Theme = get(theme) === "dark" ? "light" : "dark"; + localStorage.setItem(STORAGE_KEY, next); + theme.set(next); + applyTheme(next); +} diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 031276e..cea1dff 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -26,14 +26,14 @@ -
+
{@render children()}