akanealw/misode.github.io
1
0
Fork 0
mirror of https://github.com/misode/misode.github.io.git synced 2026-04-24 15:47:08 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Configure dark mode with tailwind

Browse Source
This commit is contained in:
Misode
2023-10-10 10:52:14 +02:00
parent 410fca7155
commit 27e5ea707b
5 changed files with 97 additions and 170 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/app/contexts/Theme.tsx
View File

@@ -1,9 +1,9 @@
import type { ComponentChildren } from 'preact'
import { createContext } from 'preact'
import { useCallback, useContext, useEffect, useState } from 'preact/hooks'
import { useCallback, useContext, useEffect, useMemo, useState } from 'preact/hooks'
import { Analytics } from '../Analytics.js'
import { useMediaQuery } from '../hooks/index.js'
import { Store } from '../Store.js'
import { useMediaQuery } from '../hooks/index.js'
interface Theme {
theme: string,
@@ -25,10 +25,6 @@ export function ThemeProvider({ children }: { children: ComponentChildren }) {
const prefersLight = useMediaQuery('(prefers-color-scheme: light)')
const prefersDark = useMediaQuery('(prefers-color-scheme: dark)')
useEffect(() => {
document.documentElement.setAttribute('data-theme', theme)
}, [theme])
const changeTheme = useCallback((newTheme: string) => {
Analytics.changeTheme(theme, newTheme)
Store.setTheme(newTheme)
@@ -39,13 +35,17 @@ export function ThemeProvider({ children }: { children: ComponentChildren }) {
Analytics.setPrefersColorScheme(prefersLight ? 'light' : prefersDark ? 'dark' : 'none')
}, [prefersLight, prefersDark])
const actualTheme = useMemo(() => {
return theme === 'light' || (theme !== 'dark' && prefersLight) ? 'light' : 'dark'
}, [theme, prefersLight])
useEffect(() => {
Analytics.setTheme(theme)
}, [])
document.documentElement.classList.toggle('dark', actualTheme === 'dark')
}, [actualTheme])
const value: Theme = {
theme,
actualTheme: theme === 'light' || (theme !== 'dark' && prefersLight) ? 'light' : 'dark',
actualTheme,
changeTheme,
}