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.
This commit is contained in:
@@ -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
|
||||
|
||||
@@ -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);
|
||||
|
||||
Reference in New Issue
Block a user