Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 10x 10x 10x 10x 10x 10x 10x 10x 10x 10x 10x 10x 10x 10x 10x 10x 10x 10x 10x 10x 10x 10x 10x 10x 10x 10x 10x 10x 10x 10x 10x 10x 10x 10x 10x 10x 10x 10x 10x 10x 10x | /**
* @file ThemeToggle.tsx
* @module app/HamburgerMenu/AppearanceSettings/ThemeToggle
*
* @summary
* Theme mode toggle component with light/dark mode icons.
* Displays current theme and allows switching between light and dark modes.
*
* @example
* ```tsx
* <ThemeToggle themeMode="dark" onThemeModeChange={handleChange} />
* ```
*/
import { Box, Typography, Stack, IconButton } from '@mui/material';
import LightModeIcon from '@mui/icons-material/LightMode';
import DarkModeIcon from '@mui/icons-material/DarkMode';
import { useTranslation } from 'react-i18next';
interface ThemeToggleProps {
/** Current theme mode (light or dark) */
themeMode: 'light' | 'dark';
/** Callback when theme mode changes */
onThemeModeChange: (mode: 'light' | 'dark') => void;
}
/**
* Theme toggle component.
*
* Displays light/dark mode icons as clickable buttons.
* Shows current mode label between the buttons.
*
* @param props - Component props
* @returns JSX element rendering theme toggle buttons
*/
export default function ThemeToggle({
themeMode,
onThemeModeChange,
}: ThemeToggleProps) {
const { t } = useTranslation(['common']);
return (
<Box>
<Typography variant="caption" color="text.secondary" sx={{ fontWeight: 600, display: 'block', mb: 0.75 }}>
{t('appearance.theme', 'Theme')}
</Typography>
<Stack direction="row" spacing={0.5} alignItems="center">
<IconButton
size="small"
onClick={() => onThemeModeChange('light')}
sx={{
color: themeMode === 'light' ? 'warning.main' : 'text.secondary',
transition: 'color 0.3s ease',
}}
title={t('appearance.lightMode', 'Light Mode')}
>
<LightModeIcon fontSize="small" />
</IconButton>
<Typography variant="caption">
{themeMode === 'light' ? t('appearance.light', 'Light') : t('appearance.dark', 'Dark')}
</Typography>
<IconButton
size="small"
onClick={() => onThemeModeChange('dark')}
sx={{
color: themeMode === 'dark' ? 'info.main' : 'text.secondary',
transition: 'color 0.3s ease',
}}
title={t('appearance.darkMode', 'Dark Mode')}
>
<DarkModeIcon fontSize="small" />
</IconButton>
</Stack>
</Box>
);
}
|