diff --git a/assets/css/app.css b/assets/css/app.css
index e18f8c5f..be4e6072 100644
--- a/assets/css/app.css
+++ b/assets/css/app.css
@@ -172,6 +172,7 @@ input:-webkit-autofill:active {
 
 @layer base {
   :root {
+    color-scheme: light;
     --background: 255 0% 95%;
     --foreground: 255 0% 0%;
     --card: 255 0% 90%;
@@ -231,6 +232,7 @@ input:-webkit-autofill:active {
     --radius: 0.5rem;
   }
   .dark {
+    color-scheme: dark;
     --background: 240 10% 3.9%;
     --foreground: 0 0% 98%;
     --card: 240 10% 3.9%;
diff --git a/assets/tailwind.config.js b/assets/tailwind.config.js
index 8a0cc4fa..5d31cf9c 100644
--- a/assets/tailwind.config.js
+++ b/assets/tailwind.config.js
@@ -8,6 +8,7 @@ const fs = require("fs");
 const colors = require("tailwindcss/colors");
 
 module.exports = {
+  darkMode: "class",
   content: [
     "./js/**/*.js",
     "./js/**/*.ts",
diff --git a/lib/algora_web/components/layouts/root.html.heex b/lib/algora_web/components/layouts/root.html.heex
index fd8349ce..b498a993 100644
--- a/lib/algora_web/components/layouts/root.html.heex
+++ b/lib/algora_web/components/layouts/root.html.heex
@@ -50,6 +50,16 @@
     <link rel="apple-touch-icon" sizes="192x192" href="/images/logo-192px.png" />
     <link rel="apple-touch-icon" sizes="512x512" href="/images/logo-512px.png" />
 
+    <script>
+      (() => {
+        try {
+          const theme = localStorage.getItem("theme");
+          const systemDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+          const useDark = theme === "dark" || (!theme && systemDark);
+          document.documentElement.classList.toggle("dark", useDark);
+        } catch (_error) {}
+      })();
+    </script>
     <link phx-track-static rel="stylesheet" href={~p"/assets/app.css"} />
     <script defer phx-track-static type="text/javascript" src={~p"/assets/app.js"}>
     </script>
@@ -71,7 +81,7 @@
       rel="stylesheet"
     />
   </head>
-  <body class="dark">
+  <body>
     {@inner_content}
     <div
       :if={Application.get_env(:algora, :ingest_token)}
