ThemeModeSwitch index.tsx

0% Statements 0/42

0% Branches 0/1

0% Functions 0/1

0% Lines 0/42

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  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  import { useContext } from 'react';
import { useTheme } from '@mui/material/styles';
import Brightness4Icon from '@mui/icons-material/Brightness4';
import Brightness7Icon from '@mui/icons-material/Brightness7';
import Button from '@mui/material/Button';
import { Theme, ColorModeContext, getNeumorphismByThemeMode } from '@/theme';

export default function ThemeModeSwitch() {
  const theme = useTheme();
  const colorMode = useContext(ColorModeContext);
  const iconSx: any = (theme: Theme) => ({ color: theme.palette.common.white });
  const text = `${theme.palette.mode} mode`;
  return theme.palette.mode === 'dark' ? (
    <Button
      variant="contained"
      onClick={colorMode.toggleColorMode}
      endIcon={<Brightness4Icon sx={iconSx} />}
      sx={[(theme: Theme) => {
        const neumorphismParams = { shadowDistance: '6px', shadowBlur: '6px' };
        const neuObj = getNeumorphismByThemeMode({ theme, neumorphismParams });
        return {
          '&.MuiButton-root': {
            ...neuObj.pressed,
            '&:hover': {
              ...neuObj.flat
            }
          }
        };
      }]}
    >
      {text}
    </Button>
  ) : (
    <Button
      variant="contained"
      onClick={colorMode.toggleColorMode}
      startIcon={<Brightness7Icon sx={iconSx} />}
    >
      {text}
    </Button>
  );
}