From ed8455bc426cb2141f272d4d245bdde8dae05b71 Mon Sep 17 00:00:00 2001
From: jesperorb <github@jesperorb.com>
Date: Thu, 26 Sep 2024 20:37:51 +0200
Subject: [PATCH] fix: light mode toggle

---
 src/lib/store/settings.ts | 8 +++-----
 src/routes/+layout.svelte | 9 +++++++++
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/src/lib/store/settings.ts b/src/lib/store/settings.ts
index 5220266..cb7b5aa 100644
--- a/src/lib/store/settings.ts
+++ b/src/lib/store/settings.ts
@@ -73,11 +73,9 @@ export const settings = writable(getSettings());
 
 settings.subscribe((value) => {
 	if (browser) {
-		if (value.theme === "dark") {
-			document.querySelector("html")?.setAttribute("data-dark-mode", "true");
-		} else if (value.theme === "light") {
-			document.querySelector("html")?.removeAttribute("data-dark-mode");
-		}
+		const htmlElement = document.querySelector("html");
+		htmlElement?.setAttribute(`data-${value.theme}-mode`, "true");
+		htmlElement?.removeAttribute(`data-${value.theme === "dark" ? "light" : "dark"}-mode`);
 		if (value.codeTheme === "light") {
 			document.querySelector("html")?.setAttribute("data-code-light-mode", "true");
 		} else if (value.codeTheme === "dark") {
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 117bcbe..faf525f 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -177,6 +177,15 @@
 		--divider-color: var(--gray-4);
 		--disabled-color: var(--gray-2);
 	}
+	[data-light-mode] {
+		--text-color: var(--black-1);
+		--background-color: var(--white-1);
+		--background-secondary-color: var(--gray-1);
+		--body-background-color: var(--accent-1);
+		--border-color: var(--gray-3);
+		--divider-color: var(--gray-3);
+		--disabled-color: var(--gray-2);
+	}
 	[data-code-light-mode] {
 		--code-text-color: var(--black-1);
 		--code-background-color: var(--white-1);