From 213b5da151e7482b45451d710faf75fb2901ca8c Mon Sep 17 00:00:00 2001 From: florian Date: Sun, 4 Jan 2026 13:52:08 +0100 Subject: [PATCH 1/3] fix to keep the dark mode when reloading the website again --- src/lib/components/ui/ThemeSwitcher.svelte | 7 ++++++- src/lib/stores.ts | 15 ++++++++++++--- 2 files changed, 18 insertions(+), 4 deletions(-) diff --git a/src/lib/components/ui/ThemeSwitcher.svelte b/src/lib/components/ui/ThemeSwitcher.svelte index 7b614b6b..5caac94c 100644 --- a/src/lib/components/ui/ThemeSwitcher.svelte +++ b/src/lib/components/ui/ThemeSwitcher.svelte @@ -1,5 +1,6 @@ diff --git a/src/lib/stores.ts b/src/lib/stores.ts index afc7b234..32acb5db 100644 --- a/src/lib/stores.ts +++ b/src/lib/stores.ts @@ -15,15 +15,21 @@ export const colorMode = writable(`system`) let colorModeHydrated = false export function hydrateColorMode() { - if (!colorModeHydrated && has_local_store && localStorage[colorModeKey]) { - colorMode.set(localStorage[colorModeKey] as ColorMode) + if (!colorModeHydrated && has_local_store) { + const stored = localStorage[colorModeKey] as ColorMode | undefined + if (stored) { + colorMode.set(stored) + } colorModeHydrated = true } } -colorMode.subscribe( - (val: ColorMode) => has_local_store && (localStorage[colorModeKey] = val), -) +// Only persist to localStorage AFTER hydration (to avoid overwriting stored value) +colorMode.subscribe((val: ColorMode) => { + if (colorModeHydrated && has_local_store) { + localStorage[colorModeKey] = val + } +}) // Custom session store implementation to replace svelte-zoo function createSessionStore(key: string, initialValue: T) { diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 11dada6e..348eb8b1 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -1,5 +1,6 @@ @@ -33,7 +41,6 @@ -
diff --git a/static/dark-theme.css b/static/dark-theme.css index 79e3683d..3735130c 100644 --- a/static/dark-theme.css +++ b/static/dark-theme.css @@ -1,4 +1,5 @@ -:root { +/* Dark theme - applies when data-theme="dark" or system preference is dark */ +[data-theme="dark"] { --text-color: white; --link-color: var(--light-blue); --hover-color: var(--green); @@ -13,4 +14,4 @@ --footer-bg: black; --invert: 1; --transparent: rgba(0, 0, 0, 0.5); -} +} \ No newline at end of file diff --git a/static/light-theme.css b/static/light-theme.css index 7fa944a2..599591c5 100644 --- a/static/light-theme.css +++ b/static/light-theme.css @@ -1,4 +1,6 @@ -:root { +/* Light theme - applies when data-theme="light" or system preference is light */ +:root, +[data-theme="light"] { --text-color: black; --link-color: var(--blue); --hover-color: var(--light-blue); @@ -13,4 +15,4 @@ --footer-bg: var(--dark-blue); --invert: 0; --transparent: rgba(255, 255, 255, 0.8); -} +} \ No newline at end of file diff --git a/static/system-theme.css b/static/system-theme.css index 16ef5bf6..d07c63d0 100644 --- a/static/system-theme.css +++ b/static/system-theme.css @@ -1,3 +1,22 @@ -@import url('/light-theme.css') (prefers-color-scheme: light); +/* System theme - uses media queries to follow OS preference */ +/* Light is the default via light-theme.css :root selector */ -@import url('/dark-theme.css') (prefers-color-scheme: dark); +/* Apply dark theme when system preference is dark AND data-theme is "system" */ +@media (prefers-color-scheme: dark) { + [data-theme="system"] { + --text-color: white; + --link-color: var(--light-blue); + --hover-color: var(--green); + --body-bg: var(--darker-blue); + --accent-bg: var(--alt-gray); + --light-bg: var(--dark-gray); + --shadow: black; + --border-color: var(--dark-green); + --heading-color: var(--light-green); + --header-bg: var(--darker-blue); + --header-color: var(--light-blue); + --footer-bg: black; + --invert: 1; + --transparent: rgba(0, 0, 0, 0.5); + } +} \ No newline at end of file From 1e1dfc970dde8407339f12db63b5fc17fcfb80c9 Mon Sep 17 00:00:00 2001 From: "pre-commit-ci[bot]" <66853113+pre-commit-ci[bot]@users.noreply.github.com> Date: Sun, 4 Jan 2026 13:04:53 +0000 Subject: [PATCH 3/3] [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci --- src/app.html | 107 +++++++++++++++++++++------------------- static/dark-theme.css | 4 +- static/light-theme.css | 4 +- static/system-theme.css | 34 ++++++------- 4 files changed, 76 insertions(+), 73 deletions(-) diff --git a/src/app.html b/src/app.html index 322bd90e..6b86afc0 100644 --- a/src/app.html +++ b/src/app.html @@ -1,54 +1,57 @@ - - - - - - - - - - - - - - - - - - - - - - - %sveltekit.head% - - - - - - - - - - -
%sveltekit.body%
- - - \ No newline at end of file + + + + + + + + + + + + + + + + + + + + + + %sveltekit.head% + + + + + + + + + + +
%sveltekit.body%
+ + diff --git a/static/dark-theme.css b/static/dark-theme.css index 3735130c..abbd0a7c 100644 --- a/static/dark-theme.css +++ b/static/dark-theme.css @@ -1,5 +1,5 @@ /* Dark theme - applies when data-theme="dark" or system preference is dark */ -[data-theme="dark"] { +[data-theme='dark'] { --text-color: white; --link-color: var(--light-blue); --hover-color: var(--green); @@ -14,4 +14,4 @@ --footer-bg: black; --invert: 1; --transparent: rgba(0, 0, 0, 0.5); -} \ No newline at end of file +} diff --git a/static/light-theme.css b/static/light-theme.css index 599591c5..7529fd2d 100644 --- a/static/light-theme.css +++ b/static/light-theme.css @@ -1,6 +1,6 @@ /* Light theme - applies when data-theme="light" or system preference is light */ :root, -[data-theme="light"] { +[data-theme='light'] { --text-color: black; --link-color: var(--blue); --hover-color: var(--light-blue); @@ -15,4 +15,4 @@ --footer-bg: var(--dark-blue); --invert: 0; --transparent: rgba(255, 255, 255, 0.8); -} \ No newline at end of file +} diff --git a/static/system-theme.css b/static/system-theme.css index d07c63d0..05beb93d 100644 --- a/static/system-theme.css +++ b/static/system-theme.css @@ -3,20 +3,20 @@ /* Apply dark theme when system preference is dark AND data-theme is "system" */ @media (prefers-color-scheme: dark) { - [data-theme="system"] { - --text-color: white; - --link-color: var(--light-blue); - --hover-color: var(--green); - --body-bg: var(--darker-blue); - --accent-bg: var(--alt-gray); - --light-bg: var(--dark-gray); - --shadow: black; - --border-color: var(--dark-green); - --heading-color: var(--light-green); - --header-bg: var(--darker-blue); - --header-color: var(--light-blue); - --footer-bg: black; - --invert: 1; - --transparent: rgba(0, 0, 0, 0.5); - } -} \ No newline at end of file + [data-theme='system'] { + --text-color: white; + --link-color: var(--light-blue); + --hover-color: var(--green); + --body-bg: var(--darker-blue); + --accent-bg: var(--alt-gray); + --light-bg: var(--dark-gray); + --shadow: black; + --border-color: var(--dark-green); + --heading-color: var(--light-green); + --header-bg: var(--darker-blue); + --header-color: var(--light-blue); + --footer-bg: black; + --invert: 1; + --transparent: rgba(0, 0, 0, 0.5); + } +}