69 lines
1.9 KiB
TypeScript
69 lines
1.9 KiB
TypeScript
import {useTheme as nextUseTheme} from "next-themes"
|
|
import { Box, IconButton, Theme, Typography } from '@mui/material';
|
|
import { useTheme } from '@mui/material/styles'
|
|
import Brightness4Icon from '@mui/icons-material/Brightness4'
|
|
import Brightness7Icon from '@mui/icons-material/Brightness7'
|
|
import { ThemeMode } from '../state/ThemeMode'
|
|
import { useGlobalState } from '../state/GlobalState'
|
|
import { useCallback, useEffect, useState } from 'react'
|
|
import { makeStyles } from '@mui/styles'
|
|
|
|
const useStyles = makeStyles((theme: Theme) => ({
|
|
modeToggleButtonHolder: {
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
flexGrow: 1,
|
|
color: theme.palette.text.primary,
|
|
},
|
|
iconButton: {
|
|
ml: 1,
|
|
},
|
|
}))
|
|
|
|
export const DarkModeToggle = () => {
|
|
const [mounted, setMounted] = useState(false)
|
|
const theme = useTheme()
|
|
const {setTheme} = nextUseTheme()
|
|
const classes = useStyles()
|
|
const [preferedColorScheme, setPreferedColorScheme] = useGlobalState(
|
|
useCallback(
|
|
(state) => [state.preferedColorScheme, state.setPreferedColorScheme],
|
|
[],
|
|
),
|
|
)
|
|
|
|
useEffect(() => setMounted(true), [])
|
|
if (!mounted) return null
|
|
|
|
|
|
const toggleColor = () => {
|
|
const newTheme =
|
|
preferedColorScheme === ThemeMode.LIGHT_MODE
|
|
? ThemeMode.DARK_MODE
|
|
: ThemeMode.LIGHT_MODE
|
|
setTheme(newTheme);
|
|
setPreferedColorScheme(newTheme)
|
|
}
|
|
|
|
|
|
return (
|
|
<Box className={classes.modeToggleButtonHolder} id="modeToggleButtonHolder">
|
|
<Typography>{theme.palette.mode} toggle</Typography>
|
|
<IconButton
|
|
className={classes.iconButton}
|
|
sx={{ ml: 1 }}
|
|
onClick={toggleColor}
|
|
color="inherit"
|
|
id="modeToggleButton"
|
|
>
|
|
{theme.palette.mode === 'dark' ? (
|
|
<Brightness7Icon />
|
|
) : (
|
|
<Brightness4Icon />
|
|
)}
|
|
</IconButton>
|
|
</Box>
|
|
)
|
|
}
|