src/views/Settings/ThemeToggle.jsx


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

import useStickyState from '@/hooks/useStickyState'
import {
  DarkModeOutlined,
  LaptopOutlined,
  LightModeOutlined,
} from '@mui/icons-material'
import {
  Button,
  FormControl,
  FormLabel,
  ToggleButtonGroup,
  useColorScheme,
} from '@mui/joy'

const ELEMENTID = 'select-theme-mode'

const ThemeToggle = () => {
  const { mode, setMode } = useColorScheme()
  const [themeMode, setThemeMode] = useStickyState(mode, 'themeMode')

  const handleThemeModeChange = (_, newThemeMode) => {
    if (!newThemeMode) return
    setThemeMode(newThemeMode)
    setMode(newThemeMode)
  }

  const FormThemeModeToggleLabel = () => (
    <FormLabel
      level='title-md'
      id={`${ELEMENTID}-label`}
      htmlFor='select-theme-mode'
    >
      Theme mode
    </FormLabel>
  )

  return (
    <FormControl>
      <FormThemeModeToggleLabel />
      <div className='flex items-center gap-4'>
        <ToggleButtonGroup
          id={ELEMENTID}
          variant='outlined'
          value={themeMode}
          onChange={handleThemeModeChange}
        >
          <Button startDecorator={<LightModeOutlined />} value='light'>
            Light
          </Button>
          <Button startDecorator={<DarkModeOutlined />} value='dark'>
            Dark
          </Button>
          <Button startDecorator={<LaptopOutlined />} value='system'>
            System
          </Button>
        </ToggleButtonGroup>
      </div>
    </FormControl>
  )
}

export default ThemeToggle