fix: disable CSS transitions during dark/light theme toggle

Add a `[data-no-transitions]` CSS rule that suppresses all transitions.
The theme toggle in all three dev targets (hiccup, replicant, squint)
sets this attribute before switching, then removes it on the next
animation frame, preventing the jarring animated color shift.

dev/hiccup/src/dev/hiccup.clj

@@ -362,7 +362,7 @@
         (sidebar/sidebar-menu {}
           (sidebar/sidebar-menu-item
             {:icon-name :sun
-             :attrs {:onclick "document.documentElement.dataset.theme = document.documentElement.dataset.theme === 'dark' ? 'light' : 'dark'"}}
+             :attrs {:onclick "document.documentElement.dataset.noTransitions = ''; document.documentElement.dataset.theme = document.documentElement.dataset.theme === 'dark' ? 'light' : 'dark'; requestAnimationFrame(() => { delete document.documentElement.dataset.noTransitions; })"}}
             "Toggle Dark Mode"))))
     (sidebar/sidebar-footer {}
       (sidebar/sidebar-user {:user-name "Dev Mode" :email (str "hiccup · port " own-port) :avatar "bb"}))))

dev/replicant/src/dev/replicant.cljs

@@ -338,8 +338,11 @@
 (defn toggle-theme! [_e]
   (let [el (.-documentElement js/document)
         current (.. el -dataset -theme)]
+    (set! (.. el -dataset -noTransitions) "")
     (set! (.. el -dataset -theme)
-          (if (= current "dark") "light" "dark"))))
+          (if (= current "dark") "light" "dark"))
+    (js/requestAnimationFrame
+      #(js-delete (.-dataset el) "noTransitions"))))
 
 ;; ── App Shell ───────────────────────────────────────────────────────
 

dev/squint/src/dev/squint.cljs

@@ -27,8 +27,11 @@
 (defn toggle-theme! [_e]
   (let [el (.-documentElement js/document)
         current (.. el -dataset -theme)]
+    (set! (.. el -dataset -noTransitions) "")
     (set! (.. el -dataset -theme)
-          (if (= current "dark") "light" "dark"))))
+          (if (= current "dark") "light" "dark"))
+    (js/requestAnimationFrame
+      #(js-delete (.-dataset el) "noTransitions"))))
 
 (defn section [title & children]
   [:section {:style {"margin-bottom" "2.5rem"}}

src/ui/css/gen.clj

@@ -74,6 +74,12 @@
 :focus:not(:focus-visible) {
   outline: none;
   box-shadow: none;
+}
+
+[data-no-transitions] *,
+[data-no-transitions] *::before,
+[data-no-transitions] *::after {
+  transition: none !important;
 }")
 
 (defn collect-component-css

src/ui/dialog.css

@@ -6,7 +6,7 @@
   max-height: 85vh;
   margin: auto;
   padding: 0;
-  background: var(--bg-1);
+  background: var(--bg-0);
   color: var(--fg-0);
   border: var(--border-0);
   border-radius: var(--radius-lg);