From f06754e0f707b8234ee65056c197d003c061e06e Mon Sep 17 00:00:00 2001
From: nullptr <62841684+not-nullptr@users.noreply.github.com>
Date: Fri, 15 Nov 2024 07:47:41 +0000
Subject: [PATCH] feat: scrollbar dark mode (#24)

---
 src/app.scss              | 10 ++++++----
 src/routes/+layout.svelte |  8 ++++----
 tailwind.config.ts        |  4 ++--
 3 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/src/app.scss b/src/app.scss
index 3501bc1..ca8f368 100644
--- a/src/app.scss
+++ b/src/app.scss
@@ -39,6 +39,7 @@
 	--fg-muted-alt: hsl(0, 0%, 75%);
 	--fg-highlight: hsl(303, 61%, 47%);
 	--fg-failure: hsl(0, 67%, 49%);
+	color-scheme: light;
 }
 
 @mixin dark {
@@ -51,25 +52,26 @@
 	--fg-muted-alt: hsl(0, 0%, 25%);
 	--fg-highlight: hsl(303, 64%, 65%);
 	--fg-failure: hsl(0, 67%, 80%);
+	color-scheme: dark;
 }
 
 @media (prefers-color-scheme: dark) {
-	body {
+	:root {
 		@include dark;
 	}
 }
 
 @media (prefers-color-scheme: light) {
-	body {
+	:root {
 		@include light;
 	}
 }
 
-body.light {
+:root.light {
 	@include light;
 }
 
-body.dark {
+:root.dark {
 	@include dark;
 }
 
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 3ab61c7..24a871e 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -53,16 +53,16 @@
 	$effect(() => {
 		if (!browser) return;
 		if (theme.dark) {
-			document.body.classList.add("dark");
-			document.body.classList.remove("light");
+			document.documentElement.classList.add("dark");
+			document.documentElement.classList.remove("light");
 			JSCookie.set("theme", "dark", {
 				path: "/",
 				sameSite: "lax",
 				expires: 2147483647,
 			});
 		} else {
-			document.body.classList.add("light");
-			document.body.classList.remove("dark");
+			document.documentElement.classList.add("light");
+			document.documentElement.classList.remove("dark");
 			JSCookie.set("theme", "light", {
 				path: "/",
 				sameSite: "lax",
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 1ec68d4..2cc0fae 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -28,8 +28,8 @@ export default {
 	plugins: [
 		plugin(function ({ addVariant }) {
 			addVariant("dynadark", [
-				"body:not(.light).dark &",
-				"@media (prefers-color-scheme: dark) { body:not(.light) &",
+				":root:not(.light).dark &",
+				"@media (prefers-color-scheme: dark) { :root:not(.light) &",
 			]);
 		}),
 	],