fix: light mode toggle

jesperorb · Sep 26, 2024 · 1aec6ca · 1aec6ca
1 parent b0b9570
commit 1aec6ca
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 5 deletions.
diff --git 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
@@ -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);