feat: scrollbar dark mode (#24)

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;
 }
 

src/routes/+layout.svelte

@@ -53,16 +53,16 @@
 	$effect(() => {
 		if (!browser) return;
 		if (theme.dark) {
-			document.body.classList.add("dark");
+			document.documentElement.classList.add("dark");
-			document.body.classList.remove("light");
+			document.documentElement.classList.remove("light");
 			JSCookie.set("theme", "dark", {
 				path: "/",
 				sameSite: "lax",
 				expires: 2147483647,
 			});
 		} else {
-			document.body.classList.add("light");
+			document.documentElement.classList.add("light");
-			document.body.classList.remove("dark");
+			document.documentElement.classList.remove("dark");
 			JSCookie.set("theme", "light", {
 				path: "/",
 				sameSite: "lax",

tailwind.config.ts

@@ -28,8 +28,8 @@ export default {
 	plugins: [
 		plugin(function ({ addVariant }) {
 			addVariant("dynadark", [
-				"body:not(.light).dark &",
+				":root:not(.light).dark &",
-				"@media (prefers-color-scheme: dark) { body:not(.light) &",
+				"@media (prefers-color-scheme: dark) { :root:not(.light) &",
 			]);
 		}),
 	],