hamid
43 lines
1.5 KiB
TypeScript
43 lines
1.5 KiB
TypeScript
'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 <html>
|
|
* 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 (
|
|
<AppIconButton
|
|
icon={isDark ? 'day' : 'night'}
|
|
title={isDark ? t('light_mode') : t('dark_mode')}
|
|
onClick={() => 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 (
|
|
<Tooltip title={isDark ? t('light_mode') : t('dark_mode')}>
|
|
<FormControlLabel
|
|
label={isDark ? t('dark_mode') : t('light_mode')}
|
|
control={<Switch checked={isDark} onChange={() => setMode(isDark ? 'light' : 'dark')} />}
|
|
/>
|
|
</Tooltip>
|
|
);
|
|
}
|