From 03ecfbd6350e50d9e7ddda7bf6e85ca879510f16 Mon Sep 17 00:00:00 2001 From: NeilClack Date: Tue, 7 Jul 2026 09:54:32 -0500 Subject: [PATCH] feat: add dark/light mode toggle - Add blocking inline script in app.html that reads localStorage 'theme' and applies .dark class before render (no flash) - Invert gray scale in .dark via CSS custom properties so all grayscale colors reverse automatically (light becomes dark) - Add @custom-variant dark to enable dark: utility classes - Add border-button toggle ("Dark"/"Light") in TopBar far right - Persist preference in localStorage --- src/app.html | 10 ++ src/lib/components/ui/topBar/TopBar.svelte | 39 +++++-- src/routes/layout.css | 123 ++++++++++++--------- 3 files changed, 108 insertions(+), 64 deletions(-) diff --git a/src/app.html b/src/app.html index b5bbbd8..3f1e509 100644 --- a/src/app.html +++ b/src/app.html @@ -4,6 +4,16 @@ + %sveltekit.head% diff --git a/src/lib/components/ui/topBar/TopBar.svelte b/src/lib/components/ui/topBar/TopBar.svelte index 2c9a7cc..0e1b2ef 100644 --- a/src/lib/components/ui/topBar/TopBar.svelte +++ b/src/lib/components/ui/topBar/TopBar.svelte @@ -1,28 +1,49 @@ -