style(cdviz-site): basic autodetection of drask mode

cdviz-dev · Nov 21, 2024 · 1addb82 · 1addb82
1 parent c914073
commit 1addb82
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 2 deletions.
diff --git a/cdviz-site/landingpage/index.html b/cdviz-site/landingpage/index.html
@@ -53,7 +53,7 @@
     -->
   </head>
 
-  <body class="dark mx-auto max-w-6xl bg-background font-body text-text">
+  <body class="mx-auto max-w-6xl bg-background font-body text-text">
     <div
       id="rubberband"
       class="fixed right-0 top-20 z-50 border-spacing-5 rotate-12 rounded-xl bg-red-700 px-10 text-center text-xl font-bold uppercase text-red-100 opacity-90 ring-4 ring-red-700 ring-offset-2"

diff --git a/cdviz-site/landingpage/main.js b/cdviz-site/landingpage/main.js
@@ -6,4 +6,17 @@ function selectHeroImage() {
   heroImage.src = `./assets/illustrations/hero-${randomInt}.webp`;
 }
 
+function initColorMode() {
+  // It's best to inline this in `head` to avoid FOUC (flash of unstyled content) when changing pages or themes
+  if (
+    localStorage.getItem("color-theme") === "dark" ||
+    (!("color-theme" in localStorage) &&
+      window.matchMedia("(prefers-color-scheme: dark)").matches)
+  ) {
+    document.documentElement.classList.add("dark");
+  } else {
+    document.documentElement.classList.remove("dark");
+  }
+}
+initColorMode();
 selectHeroImage();
diff --git a/cdviz-site/landingpage/tailwind.config.cjs b/cdviz-site/landingpage/tailwind.config.cjs
@@ -58,5 +58,5 @@ module.exports = {
     },
   },
   plugins: [],
-  darkMode: "selector",
+  darkMode: "class", // "media" or "selector",
 };