'use client'; /* * Tiny components that are the ONLY React nodes subscribed to useColorScheme(). * When the user flips the theme: * 1. useColorScheme().setMode() sets data-mui-color-scheme on * 2. CSS custom properties resolve to new values → browser repaints * 3. React re-renders ONLY these two components (icon label / switch state) * Nothing above them in the tree is touched. */ import { FormControlLabel, Switch, Tooltip } from '@mui/material'; import { useColorScheme } from '@mui/material/styles'; import { useTranslations } from 'next-intl'; import { AppIconButton } from '@/components'; /** Icon button for the TopBar dark-mode toggle. */ export function DarkModeToggleButton() { const { colorScheme, setMode } = useColorScheme(); const t = useTranslations('common'); const isDark = colorScheme === 'dark'; return ( setMode(isDark ? 'light' : 'dark')} /> ); } /** Labeled switch for the SideBar dark-mode toggle. */ export function DarkModeFormSwitch() { const { colorScheme, setMode } = useColorScheme(); const t = useTranslations('common'); const isDark = colorScheme === 'dark'; return ( setMode(isDark ? 'light' : 'dark')} />} /> ); }