feat: add auto dark mode to password template

jmacot · claude · jmacot · commit 28598ad124eb · 2026-03-16T21:33:45.000+01:00
Auto-detects dark mode via system preference and time of day (21h–7h).
Respects localStorage theme from other tools. Adds Sistema A dark
variables, header gradient override, and prefers-reduced-motion.

Co-Authored-By: Claude Opus 4.6 &lt;noreply@anthropic.com&gt;
diff --git a/password_template.html b/password_template.html
@@ -4,7 +4,7 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>/*[|template_title|]*/0</title>
-  <meta name="theme-color" content="#1a3a5c">
+  <meta name="theme-color" id="meta-theme" content="#0f172a">
 
   <!-- do not cache this page -->
   <meta http-equiv="cache-control" content="max-age=0">
@@ -29,6 +29,19 @@
       --radius: 20px;
       --radius-lg: 24px;
     }
+    [data-theme="dark"] {
+      --bg: #0f172a;
+      --surface: #1e293b;
+      --border: #334155;
+      --ink: #f1f5f9;
+      --ink-muted: #94a3b8;
+      --accent: #93c5fd;
+      --accent-hover: #bae0ff;
+      --red: #f87171;
+      --red-light: #3b1010;
+      --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.2), 0 2px 4px -2px rgb(0 0 0 / 0.15);
+      --shadow-hover: 0 25px 50px -12px rgb(0 0 0 / 0.3);
+    }
     *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
     body {
       font-family: 'DM Sans', sans-serif;
@@ -303,10 +316,28 @@
       50% { opacity: 0.4; }
     }
 
+    /* ── Dark mode overrides ── */
+    [data-theme="dark"] .login-header {
+      background: linear-gradient(135deg, #152238 0%, #1c2f4a 50%, #213656 100%);
+      border-bottom: 1px solid rgba(255,255,255,0.08);
+      box-shadow: 0 4px 24px rgba(0,0,0,0.3);
+    }
+    [data-theme="dark"] .input-wrap input:focus {
+      box-shadow: 0 0 0 3px rgba(147,197,253,0.15);
+    }
+    [data-theme="dark"] .btn-submit { color: #0f172a; }
+
     @media (max-width: 600px) {
       .login-header { padding: 36px 24px 32px; }
+      .login-header::before, .login-header::after { display: none; }
       .login-body { padding: 24px 20px; }
     }
+    @media (prefers-reduced-motion: reduce) {
+      *, *::before, *::after {
+        animation-duration: 0.01ms !important;
+        transition-duration: 0.01ms !important;
+      }
+    }
   </style>
 </head>
 <body>
@@ -456,6 +487,42 @@ <h1>/*[|template_title|]*/0</h1>
         }, 3000);
       }
     });
+
+    // ─────────────────────────────────────────────
+    //  DARK MODE (auto-detect)
+    // ─────────────────────────────────────────────
+    (function() {
+      function applyTheme(dark) {
+        var metaTheme = document.getElementById('meta-theme');
+        if (dark) {
+          document.documentElement.setAttribute('data-theme', 'dark');
+          if (metaTheme) metaTheme.setAttribute('content', '#152238');
+        } else {
+          document.documentElement.removeAttribute('data-theme');
+          if (metaTheme) metaTheme.setAttribute('content', '#0f172a');
+        }
+      }
+      function getAutoTheme() {
+        var hour = new Date().getHours();
+        var prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+        return (hour >= 21 || hour < 7 || prefersDark) ? 'dark' : 'light';
+      }
+      var saved = localStorage.getItem('theme');
+      var savedDate = localStorage.getItem('theme-date');
+      var today = new Date().toDateString();
+      if (saved && savedDate === today) {
+        applyTheme(saved === 'dark');
+      } else {
+        applyTheme(getAutoTheme() === 'dark');
+      }
+      window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function() {
+        var s = localStorage.getItem('theme');
+        var sd = localStorage.getItem('theme-date');
+        if (!s || sd !== new Date().toDateString()) {
+          applyTheme(getAutoTheme() === 'dark');
+        }
+      });
+    })();
   </script>
 </body>
 </html>
