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; 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, html,
body, body,
#root { #root {

22
src/context/ThemeContext.tsx
View File

@@ -3,6 +3,7 @@ import {
useContext, useContext,
useState, useState,
useEffect, useEffect,
useRef,
type ReactNode, type ReactNode,
} from "react"; } from "react";
@@ -20,14 +21,33 @@ export function ThemeProvider({ children }: { children: ReactNode }) {
} }
return "dark"; return "dark";
}); });
const firstRun = useRef(true);
useEffect(() => { useEffect(() => {
document.documentElement.setAttribute("data-theme", theme); const root = document.documentElement;
// Coordinated cross-fade on real toggles only (not the initial mount):
// arm a uniform color transition across the whole tree for the switch
// window, then remove it so normal interactions keep their own transitions.
let timer: number | undefined;
if (!firstRun.current) {
root.classList.add("theme-transition");
timer = window.setTimeout(
() => root.classList.remove("theme-transition"),
320,
);
}
firstRun.current = false;
root.setAttribute("data-theme", theme);
localStorage.setItem("boha-theme", theme); localStorage.setItem("boha-theme", theme);
const themeColor = theme === "dark" ? "#12121a" : "#ffffff"; const themeColor = theme === "dark" ? "#12121a" : "#ffffff";
document document
.querySelector('meta[name="theme-color"]') .querySelector('meta[name="theme-color"]')
?.setAttribute("content", themeColor); ?.setAttribute("content", themeColor);
return () => {
if (timer) clearTimeout(timer);
};
}, [theme]); }, [theme]);
const toggleTheme = () => { const toggleTheme = () => {