src/app/(main)/settings/preferences/ThemeSetting.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

import { Button, Icon, Row, useTheme } from '@umami/react-zen';
import { Moon, Sun } from '@/components/icons';

export function ThemeSetting() {
  const { theme, setTheme } = useTheme();

  return (
    <Row gap>
      <Button variant={theme === 'light' ? 'primary' : undefined} onPress={() => setTheme('light')}>
        <Icon>
          <Sun />
        </Icon>
      </Button>
      <Button variant={theme === 'dark' ? 'primary' : undefined} onPress={() => setTheme('dark')}>
        <Icon>
          <Moon />
        </Icon>
      </Button>
    </Row>
  );
}