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 | 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 1x 1x 1x 1x 1x 10x 10x 10x 10x 10x 10x 10x 10x 10x 10x 10x 10x 10x 10x 10x 10x 10x 10x 1x 1x | /**
* @file ThemeToggle.tsx
* @description
* Theme mode toggle button (light/dark) for the public shell header.
* Displays appropriate icon based on current mode and persists selection.
*
* @enterprise
* - Clean MUI IconButton with smooth transitions
* - Accessible tooltip for user guidance
* - Icon changes based on current theme mode
* - Color coding: warning.main (light), info.main (dark)
*
* @example
* ```tsx
* <ThemeToggle
* themeMode="light"
* onToggle={() => setThemeMode(prev => prev === 'light' ? 'dark' : 'light')}
* />
* ```
*/
import * as React from 'react';
import { IconButton, Tooltip } from '@mui/material';
import LightModeIcon from '@mui/icons-material/LightMode';
import DarkModeIcon from '@mui/icons-material/DarkMode';
interface ThemeToggleProps {
/** Current theme mode: 'light' or 'dark' */
themeMode: 'light' | 'dark';
/** Preferred callback when toggle is clicked */
onToggle?: () => void;
/** Backwards-compat callback name used by orchestrator components */
onThemeToggle?: () => void;
}
/**
* ThemeToggle component
* @param themeMode - Current theme mode ('light' | 'dark')
* @param onToggle - Callback function to toggle theme
* @returns Theme toggle button with appropriate icon
*/
const ThemeToggle: React.FC<ThemeToggleProps> = ({ themeMode, onToggle, onThemeToggle }) => {
const label = themeMode === 'light' ? 'Dark mode' : 'Light mode';
const handleToggle = onToggle ?? onThemeToggle;
return (
<Tooltip title={label}>
<IconButton
aria-label={label}
onClick={handleToggle}
sx={{
color: themeMode === 'light' ? 'warning.main' : 'info.main',
transition: 'color 0.3s ease',
}}
>
{themeMode === 'light' ? <LightModeIcon /> : <DarkModeIcon />}
</IconButton>
</Tooltip>
);
};
export default ThemeToggle;
|