make dark mode default

Efnilite · Efnilite · commit 83bd1f923902 · 2025-06-03T17:50:39.000+02:00
diff --git a/src/layouts/Page.astro b/src/layouts/Page.astro
@@ -8,44 +8,7 @@ interface Props {
 const { title }: Props = Astro.props;
 ---
 
-<script>
-const prefersDarkScheme = () => localStorage.theme === "dark" 
-	|| (!("theme" in localStorage) && window.matchMedia("(prefers-color-scheme: dark)").matches);
-
-document.documentElement.classList.toggle(
-	"dark",
-	prefersDarkScheme()
-);
-
-const darkToggle = document.getElementById("dark-toggle");
-const lightToggle = document.getElementById("light-toggle");
-
-if (prefersDarkScheme()) {
-	localStorage.theme = "dark";
-	lightToggle.classList.remove("hidden");
-	darkToggle.classList.add("hidden");
-} else {
-	localStorage.theme = "light";
-	lightToggle.classList.add("hidden");
-	darkToggle.classList.remove("hidden");
-}
-
-lightToggle.addEventListener("click", () => {
-	document.documentElement.classList.remove("dark");
-	localStorage.theme = "light";
-	lightToggle.classList.add("hidden");
-	darkToggle.classList.remove("hidden");
-});
-
-darkToggle.addEventListener("click", () => {
-	document.documentElement.classList.add("dark");
-	localStorage.theme = "dark";
-	lightToggle.classList.remove("hidden");
-	darkToggle.classList.add("hidden");
-});
-</script>
-
-<html lang="en">
+<html class="dark" lang="en">
 	<head>
 		<meta charset="UTF-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1" />
@@ -72,6 +35,43 @@ darkToggle.addEventListener("click", () => {
 		<meta property="twitter:image" content="/banner.png" />
 
 		<!-- Meta Tags Generated with https://metatags.io -->
+
+		<script>
+			const prefersDarkScheme = () => localStorage.theme === "dark" 
+				|| (!("theme" in localStorage) && window.matchMedia("(prefers-color-scheme: dark)").matches);
+
+			document.documentElement.classList.toggle(
+				"dark",
+				prefersDarkScheme()
+			);
+
+			const darkToggle = document.getElementById("dark-toggle");
+			const lightToggle = document.getElementById("light-toggle");
+
+			if (prefersDarkScheme()) {
+				localStorage.theme = "dark";
+				lightToggle.classList.remove("hidden");
+				darkToggle.classList.add("hidden");
+			} else {
+				localStorage.theme = "light";
+				lightToggle.classList.add("hidden");
+				darkToggle.classList.remove("hidden");
+			}
+
+			lightToggle.addEventListener("click", () => {
+				document.documentElement.classList.remove("dark");
+				localStorage.theme = "light";
+				lightToggle.classList.add("hidden");
+				darkToggle.classList.remove("hidden");
+			});
+
+			darkToggle.addEventListener("click", () => {
+				document.documentElement.classList.add("dark");
+				localStorage.theme = "dark";
+				lightToggle.classList.remove("hidden");
+				darkToggle.classList.add("hidden");
+			});
+			</script>
 	</head>
 	<body class="bg-l-bg dark:bg-d-bg 
 				text-black dark:text-white 
