Updated version rollout

web/static/app.js

@@ -8,6 +8,31 @@
   updateHeader();
   window.addEventListener("scroll", updateHeader, { passive: true });
 
+  function currentTheme() {
+    try {
+      const saved = localStorage.getItem("archi-theme");
+      if (saved === "dark" || saved === "light") return saved;
+    } catch (_) {}
+    return document.documentElement.getAttribute("data-theme") === "dark" ? "dark" : "light";
+  }
+
+  function setTheme(theme) {
+    const normalized = theme === "dark" ? "dark" : "light";
+    document.documentElement.setAttribute("data-theme", normalized);
+    document.querySelectorAll("[data-theme-toggle]").forEach(function (input) {
+      input.checked = normalized === "dark";
+    });
+    try {
+      localStorage.setItem("archi-theme", normalized);
+    } catch (_) {}
+  }
+
+  function syncThemeControls() {
+    setTheme(currentTheme());
+  }
+
+  syncThemeControls();
+
   function closeOverlay() {
     const root = document.getElementById("overlay-root");
     if (root) root.innerHTML = "";
@@ -25,13 +50,25 @@
   });
 
   document.addEventListener("htmx:afterSettle", updateHeader);
+  document.addEventListener("htmx:afterSettle", syncThemeControls);
 
   document.addEventListener("click", function (event) {
+    if (event.target.closest("[data-drawer-link]")) {
+      const drawer = document.getElementById("site-drawer");
+      if (drawer) drawer.checked = false;
+    }
     if (event.target.matches("[data-overlay], [data-overlay-close]")) {
       closeOverlay();
     }
   });
 
+  document.addEventListener("change", function (event) {
+    const toggle = event.target.closest("[data-theme-toggle]");
+    if (toggle) {
+      setTheme(toggle.checked ? "dark" : "light");
+    }
+  });
+
   document.addEventListener("keydown", function (event) {
     if (event.key === "Escape") {
       const drawer = document.getElementById("site-drawer");

web/static/styles.css

@@ -6,6 +6,61 @@ body {
   font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
 }
 
+html[data-theme="dark"] body,
+html[data-theme="dark"] .drawer-content {
+  background: #0f0f0e;
+  color: #f5f5f4;
+}
+
+html[data-theme="dark"] .bg-neutral-50 {
+  background-color: #0f0f0e !important;
+}
+
+html[data-theme="dark"] .bg-white {
+  background-color: #171716 !important;
+}
+
+html[data-theme="dark"] .bg-neutral-950 {
+  background-color: #050505 !important;
+}
+
+html[data-theme="dark"] .bg-neutral-200 {
+  background-color: #2a2926 !important;
+}
+
+html[data-theme="dark"] .text-neutral-950,
+html[data-theme="dark"] .text-neutral-800 {
+  color: #f5f5f4 !important;
+}
+
+html[data-theme="dark"] .text-neutral-700,
+html[data-theme="dark"] .text-neutral-600,
+html[data-theme="dark"] .text-neutral-500 {
+  color: #c7c2b8 !important;
+}
+
+html[data-theme="dark"] .text-neutral-400 {
+  color: #a8a29a !important;
+}
+
+html[data-theme="dark"] .border-neutral-300,
+html[data-theme="dark"] .border-neutral-200 {
+  border-color: rgba(245, 245, 244, 0.16) !important;
+}
+
+html[data-theme="dark"] input,
+html[data-theme="dark"] textarea,
+html[data-theme="dark"] select {
+  background-color: #111110;
+  border-color: rgba(245, 245, 244, 0.22);
+  color: #f5f5f4;
+}
+
+html[data-theme="dark"] input::placeholder,
+html[data-theme="dark"] textarea::placeholder {
+  color: #78716c;
+}
+
 .form-select {
   appearance: none;
   border-radius: 0;
@@ -30,6 +85,32 @@ body {
   font-size: 1.25rem;
 }
 
+html[data-theme="dark"] [data-site-header] {
+  background: rgba(15, 15, 14, 0.95) !important;
+  color: #f5f5f4 !important;
+  box-shadow: 0 1px 0 rgba(245, 245, 244, 0.12);
+  backdrop-filter: blur(18px);
+}
+
+html[data-theme="dark"] [data-site-header].is-compact {
+  background: rgba(15, 15, 14, 0.95) !important;
+  color: #f5f5f4 !important;
+  box-shadow: 0 1px 0 rgba(245, 245, 244, 0.12);
+}
+
+#main-content {
+  view-transition-name: main-content;
+}
+
+.drawer-side > aside {
+  transition-duration: 260ms;
+  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.drawer-overlay {
+  transition-duration: 200ms;
+}
+
 @keyframes page-fade-out {
   from {
     opacity: 1;
@@ -90,6 +171,14 @@ body {
   animation: 180ms ease both panel-fade-in;
 }
 
+::view-transition-old(main-content) {
+  animation: 150ms ease both panel-fade-out;
+}
+
+::view-transition-new(main-content) {
+  animation: 210ms ease both panel-fade-in;
+}
+
 @media (prefers-reduced-motion: reduce) {
   *,
   ::before,
@@ -99,6 +188,8 @@ body {
 
   ::view-transition-old(root),
   ::view-transition-new(root),
+  ::view-transition-old(main-content),
+  ::view-transition-new(main-content),
   ::view-transition-old(admin-panel),
   ::view-transition-new(admin-panel) {
     animation-duration: 1ms;