made website detect user prefers color scheme

c3lang · Feb 18, 2024 · 41e1d28 · 41e1d28
1 parent b4ba63c
commit 41e1d28
Showing 1 changed file with 10 additions and 0 deletions.
diff --git a/src/components/navbar.astro b/src/components/navbar.astro
@@ -3,6 +3,16 @@
 ---
 
 <script lang="js">
+  if (
+    localStorage.theme === "dark" ||
+    (!("theme" in localStorage) &&
+      window.matchMedia("(prefers-color-scheme: dark)").matches)
+  ) {
+    document.documentElement.classList.add("dark");
+  } else {
+    document.documentElement.classList.remove("dark");
+  }
+
   const HSThemeAppearance = {
     init() {
       const defaultTheme = "default";