use dark theme by default
This commit is contained in:
@@ -4,21 +4,12 @@ import { SunIcon, MoonIcon } from '@heroicons/react/outline'
|
|||||||
|
|
||||||
export const themeState = atom({
|
export const themeState = atom({
|
||||||
key: 'themeState',
|
key: 'themeState',
|
||||||
default: 'light',
|
default: 'dark',
|
||||||
})
|
})
|
||||||
|
|
||||||
export const ThemeChanger = () => {
|
export const ThemeChanger = () => {
|
||||||
const [theme, setTheme] = useRecoilState(themeState)
|
const [theme, setTheme] = useRecoilState(themeState)
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const darkThemeMq = window.matchMedia('(prefers-color-scheme: dark)')
|
|
||||||
if (darkThemeMq.matches) {
|
|
||||||
setTheme('dark')
|
|
||||||
} else {
|
|
||||||
setTheme('light')
|
|
||||||
}
|
|
||||||
}, [setTheme])
|
|
||||||
|
|
||||||
const themeSwitchHandler = () => {
|
const themeSwitchHandler = () => {
|
||||||
const newTheme = theme === 'light' ? 'dark' : 'light'
|
const newTheme = theme === 'light' ? 'dark' : 'light'
|
||||||
setTheme(newTheme)
|
setTheme(newTheme)
|
||||||
|
|||||||
Reference in New Issue
Block a user