m/portfolio
1
0
Fork 0
mirror of https://github.com/kremalicious/portfolio.git synced 2024-12-22 09:13:19 +01:00
Code Releases Activity

dark mode fix

Browse Source
This commit is contained in:
Matthias Kretschmann 2022-11-16 19:54:06 +00:00
parent 4bed995812
commit 23b0f8dcc7
Signed by: m
GPG Key ID: 606EEEF3C479A91F
3 changed files with 11 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Meta/Favicon.tsx
View File

@ -10,7 +10,7 @@ const MetaFavicons = () => {
<link rel="icon" href="/favicon.ico" sizes="any" /> <link rel="icon" href="/favicon.ico" sizes="any" />
<link rel="icon" href="/favicon.svg" type="image/svg+xml" /> <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" /> <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<link rel="manifest" href="/favicon/manifest.webmanifest"></link> <link rel="manifest" href="/manifest/manifest.webmanifest"></link>
</Head> </Head>
) )
} }

5
src/components/ThemeSwitch/index.tsx
View File

@ -12,11 +12,6 @@ export default function ThemeSwitch() {
<Head> <Head>
<meta name="theme-color" content={themeColor} /> <meta name="theme-color" content={themeColor} />
<meta name="msapplication-TileColor" content={themeColor} /> <meta name="msapplication-TileColor" content={themeColor} />
{/* <link
rel="mask-icon"
href="/favicon/safari-pinned-tab.svg"
color={themeColor}
/> */}
<meta <meta
name="apple-mobile-web-app-status-bar-style" name="apple-mobile-web-app-status-bar-style"
content="black-translucent" content="black-translucent"

12
src/hooks/useDarkMode.ts
View File

@ -25,18 +25,26 @@ function getDarkMode() {
} }
export default function useDarkMode() { export default function useDarkMode() {
const [darkMode, setDarkMode] = useState(getDarkMode()) const [darkMode, setDarkMode] = useState<boolean>()
const [themeColor, setThemeColor] = useState<string>() const [themeColor, setThemeColor] = useState<string>()
const toggleDarkMode = useCallback(() => { const toggleDarkMode = useCallback(() => {
setDarkMode(!darkMode) setDarkMode(!darkMode)
}, [darkMode]) }, [darkMode])
//
// Init
//
useEffect(() => {
const prefersDark = getDarkMode()
setDarkMode(prefersDark)
}, [])
// //
// Do things when darkMode changes // Do things when darkMode changes
// //
useEffect(() => { useEffect(() => {
const bodyClassList = document.body.classList const bodyClassList = document.querySelector('body').classList
bodyClassList.toggle('dark') bodyClassList.toggle('dark')
bodyClassList.toggle('light') bodyClassList.toggle('light')
setThemeColor(darkMode === true ? '#1d2224' : '#e7eef4') setThemeColor(darkMode === true ? '#1d2224' : '#e7eef4')