gitscope
/
← marzneshin / app/dashboard/src/components/theme-toggler/index.tsx / blame
Files Commits 446 Branches 1 Tags 43 Markers 4 README License
https://dev.kronoz.win/r/marzneshin.git
app/dashboard/src/components/theme-toggler/index.tsx · v0.1.1
Source
1 bedeeff Mardin 2y ago
2 bedeeff Mardin 2y ago import { IconButton, chakra, useColorMode } from '@chakra-ui/react';
3 bedeeff Mardin 2y ago import { MoonIcon, SunIcon } from '@heroicons/react/24/outline';
4 bedeeff Mardin 2y ago import { updateThemeColor } from 'utils/themeColor';
5 bedeeff Mardin 2y ago
6 bedeeff Mardin 2y ago const iconProps = {
7 bedeeff Mardin 2y ago baseStyle: {
8 bedeeff Mardin 2y ago w: 4,
9 bedeeff Mardin 2y ago h: 4,
10 bedeeff Mardin 2y ago },
11 bedeeff Mardin 2y ago };
12 bedeeff Mardin 2y ago
13 bedeeff Mardin 2y ago const DarkThemeIcon = chakra(MoonIcon, iconProps);
14 bedeeff Mardin 2y ago const LightThemeIcon = chakra(SunIcon, iconProps);
15 bedeeff Mardin 2y ago
16 bedeeff Mardin 2y ago export const ThemeToggle = () => {
17 bedeeff Mardin 2y ago const { colorMode, toggleColorMode } = useColorMode();
18 bedeeff Mardin 2y ago return (
19 bedeeff Mardin 2y ago <IconButton
20 bedeeff Mardin 2y ago size="sm"
21 bedeeff Mardin 2y ago variant="solid"
22 bedeeff Mardin 2y ago colorScheme="gray"
23 bedeeff Mardin 2y ago aria-label="switch theme"
24 bedeeff Mardin 2y ago onClick={() => {
25 bedeeff Mardin 2y ago updateThemeColor(colorMode == 'dark' ? 'light' : 'dark');
26 bedeeff Mardin 2y ago toggleColorMode();
27 bedeeff Mardin 2y ago }}
28 bedeeff Mardin 2y ago >
29 bedeeff Mardin 2y ago {colorMode === 'light' ? <DarkThemeIcon /> : <LightThemeIcon />}
30 bedeeff Mardin 2y ago </IconButton>
31 bedeeff Mardin 2y ago );
32 bedeeff Mardin 2y ago };