mirror of
https://github.com/skidoodle/albert.lol.git
synced 2025-02-15 06:09:15 +01:00
c:
This commit is contained in:
parent
bb3af41117
commit
9a5ac2e681
1 changed files with 3 additions and 13 deletions
|
@ -5,26 +5,16 @@ export const ThemeSwitcher = () => {
|
||||||
const { theme, setTheme } = useTheme()
|
const { theme, setTheme } = useTheme()
|
||||||
|
|
||||||
const toggle = () => {
|
const toggle = () => {
|
||||||
switch (theme) {
|
setTheme(theme === 'light' ? 'dark' : 'light')
|
||||||
case 'dark':
|
|
||||||
setTheme('light')
|
|
||||||
break
|
|
||||||
case 'light':
|
|
||||||
setTheme('dark')
|
|
||||||
break
|
|
||||||
default:
|
|
||||||
setTheme('dark')
|
|
||||||
break
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<button
|
<button
|
||||||
aria-label='Switch Theme'
|
aria-label='Switch Theme'
|
||||||
type='button'
|
type='button'
|
||||||
className={`ml-auto mr-5 mt-5 flex transition duration-300 ease-in-out ${
|
className={`ml-auto mr-5 mt-5 flex transition-colors duration-300 ease-in-out p-2 rounded-full ${
|
||||||
theme === 'light' ? 'hover:bg-gray-300' : 'dark:hover:bg-gray-700'
|
theme === 'light' ? 'hover:bg-gray-300' : 'dark:hover:bg-gray-700'
|
||||||
} p-2 rounded-full`}
|
}`}
|
||||||
onClick={() => toggle()}
|
onClick={() => toggle()}
|
||||||
>
|
>
|
||||||
<VscColorMode size={30} />
|
<VscColorMode size={30} />
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue