boha_admin/app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 26 Wiki Activity

feat(mui): premium coordinated dark/light cross-fade (theme-transition class, toggle-only)

Browse Source 
ThemeContext adds a .theme-transition class to <html> for ~300ms during a real toggle (skipped on initial mount); a scoped base.css rule applies a uniform 0.3s color/bg/border/fill/stroke/shadow transition to the whole tree only while that class is present — so the entire UI fades together on switch, while normal interactions keep their own transitions. Respects prefers-reduced-motion.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
BOHA
2026-06-07 07:45:20 +02:00
parent 177d3f1902
commit 4d016cdab5
2 changed files with 48 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
src/admin/base.css
View File

@@ -13,6 +13,33 @@ html {
overflow-x: hidden;
}
/* Coordinated dark/light cross-fade. ThemeContext adds `.theme-transition` to
<html> for ~300ms during a toggle (only on real switches, not initial load),
so the whole UI fades its theme-driven colors together. Normal interactions
keep their own transitions, because this rule applies only while the class
is present. */
html.theme-transition,
html.theme-transition *,
html.theme-transition *::before,
html.theme-transition *::after {
transition:
background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
fill 0.3s cubic-bezier(0.4, 0, 0.2, 1),
stroke 0.3s cubic-bezier(0.4, 0, 0.2, 1),
box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
@media (prefers-reduced-motion: reduce) {
html.theme-transition,
html.theme-transition *,
html.theme-transition *::before,
html.theme-transition *::after {
transition: none !important;
}
}
html,
body,
#root {