Dockery/Homarr
1
0
Fork 0
mirror of https://github.com/ajnart/homarr.git synced 2025-11-14 09:25:47 +01:00
Code Issues Packages Projects Releases Wiki Activity

Edit ColorSchemeToggle

Browse Source
This commit is contained in:
Aj - Thomas
2022-04-25 23:33:19 +02:00
parent 8c975ea5f3
commit a4fcea76d4
1 changed files with 4 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
components/ColorSchemeToggle/ColorSchemeToggle.tsx
View File

@@ -1,4 +1,4 @@
import { ActionIcon, useMantineColorScheme } from '@mantine/core'; import { ActionIcon, Box, useMantineColorScheme } from '@mantine/core';
import { Sun, MoonStars } from 'tabler-icons-react'; import { Sun, MoonStars } from 'tabler-icons-react';
import { motion } from 'framer-motion'; import { motion } from 'framer-motion';
@@ -14,15 +14,15 @@ export function ColorSchemeToggle() {
borderRadius: '100%', borderRadius: '100%',
}} }}
> >
<ActionIcon <Box
onClick={() => toggleColorScheme()} onClick={() => toggleColorScheme()}
size="xl"
sx={(theme) => ({ sx={(theme) => ({
cursor: "pointer",
color: theme.colorScheme === 'dark' ? theme.colors.yellow[4] : theme.colors.blue[6], color: theme.colorScheme === 'dark' ? theme.colors.yellow[4] : theme.colors.blue[6],
})} })}
> >
{colorScheme === 'dark' ? <Sun size={24} /> : <MoonStars size={24} />} {colorScheme === 'dark' ? <Sun size={24} /> : <MoonStars size={24} />}
</ActionIcon> </Box>
</motion.div> </motion.div>
); );
} }