Mark Sinclair
22 lines
857 B
TypeScript
22 lines
857 B
TypeScript
import * as React from 'react';
|
|
import { Button, Typography } from '@mui/material';
|
|
import DarkModeIcon from '@mui/icons-material/DarkMode';
|
|
import LightModeIcon from '@mui/icons-material/LightMode';
|
|
import { useAppContext } from './context';
|
|
|
|
export const ThemeToggle: React.FC = () => {
|
|
const { mode, toggleMode } = useAppContext();
|
|
return (
|
|
<Button variant="outlined" color="secondary" onClick={toggleMode} sx={{ display: 'flex', alignItems: 'centre' }}>
|
|
{mode === 'dark' ? (
|
|
<DarkModeIcon sx={{ color: (theme) => theme.palette.text.secondary }} />
|
|
) : (
|
|
<LightModeIcon sx={{ color: (theme) => theme.palette.text.secondary }} />
|
|
)}
|
|
<Typography ml={1} color={(theme) => theme.palette.primary.light}>
|
|
Switch to {mode === 'dark' ? 'light mode' : 'dark mode'}
|
|
</Typography>
|
|
</Button>
|
|
);
|
|
};
|