diff --git a/appview/pages/templates/layouts/base.html b/appview/pages/templates/layouts/base.html
index 30424eb45..5891bd883 100644
--- a/appview/pages/templates/layouts/base.html
+++ b/appview/pages/templates/layouts/base.html
@@ -1,6 +1,6 @@
 {{ define "layouts/base" }}
     <!doctype html>
-    <html lang="en"{{ if or (eq .ThemePreference "dark") (eq .ThemePreference "light") }} data-theme="{{ .ThemePreference }}"{{ end }}>
+    <html lang="en" data-theme-preference="{{ or .ThemePreference "auto" }}"{{ if or (eq .ThemePreference "dark") (eq .ThemePreference "light") }} data-theme="{{ .ThemePreference }}"{{ end }}>
         <head>
             <meta charset="UTF-8" />
             <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"/>
@@ -41,8 +41,14 @@
             <link rel="preload" href="/static/fonts/InterVariable.woff2" as="font" type="font/woff2" crossorigin />
 
             <script>
-              if (!document.documentElement.dataset.theme && matchMedia('(prefers-color-scheme: dark)').matches)
-                document.documentElement.dataset.theme = 'dark';
+              (function () {
+                const root = document.documentElement;
+                if (root.dataset.themePreference !== 'auto') return;
+                const query = matchMedia('(prefers-color-scheme: dark)');
+                const apply = () => root.dataset.theme = query.matches ? 'dark' : 'light';
+                apply();
+                query.addEventListener('change', apply);
+              })();
             </script>
             <link rel="stylesheet" href="/static/tw.css?{{ cssContentHash }}" type="text/css" />
 
@@ -55,7 +61,7 @@
                 script.onload = async () => {
                   mermaid.initialize({
                     startOnLoad: true,
-                    theme: window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'default',
+                    theme: document.documentElement.dataset.theme === 'dark' ? 'dark' : 'default',
                   });
                   await mermaid.run({ nodes });
                 };
diff --git a/input.css b/input.css
index 24e4c3303..b20fc9885 100644
--- a/input.css
+++ b/input.css
@@ -77,10 +77,10 @@
             scrollbar-gutter: stable;
 
             color-scheme: light;
+        }
 
-            @media (prefers-color-scheme: dark) {
-                color-scheme: dark;
-            }
+        :root[data-theme="dark"] {
+            color-scheme: dark;
         }
 
         @supports (font-variation-settings: normal) {
