diff options
| author | lonkaars <loek@pipeframe.xyz> | 2021-07-13 11:52:13 +0200 |
|---|---|---|
| committer | lonkaars <loek@pipeframe.xyz> | 2021-07-13 11:52:13 +0200 |
| commit | 63a9aad62ef9c27c413abd6ee20498e0e387c962 (patch) | |
| tree | 09a15a7dea4b6fc790e4988354a8cef68d42454d | |
| parent | 86d5773c3ab4814cc9a6d09bc991c5bf18003404 (diff) | |
head v2
| -rw-r--r-- | pages/_app.tsx | 12 |
1 files changed, 9 insertions, 3 deletions
diff --git a/pages/_app.tsx b/pages/_app.tsx index f0b964e..e7ed373 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -1,4 +1,5 @@ import Head from 'next/head'; +import { useEffect, useState } from 'react'; import '../styles/button.css'; import '../styles/card.css'; @@ -13,6 +14,13 @@ import '../styles/search.css'; import '../styles/tags.css'; export default function Blog({ Component, pageProps }) { + var [dark, setDark] = useState(false); + useEffect(() => { + let colorSchemeQueryList = window.matchMedia('(prefers-color-scheme: dark)'); + setDark(!!colorSchemeQueryList.matches); + colorSchemeQueryList.addEventListener('change', e => setDark(!!e.matches)); + }, []); + return <> <Head> <link rel='preload' as='style' href='/font/font.css' onLoad={() => this.rel = 'stylesheet'} /> @@ -24,9 +32,7 @@ export default function Blog({ Component, pageProps }) { <meta property='og:title' content="Loek's excruciatingly interesting blog" /> <meta property='og:description' content='This is my personal blog website' /> <meta property='og:type' content='website' /> - - <meta name='theme-color' media='(prefers-color-scheme: light)' content='#c9c9dd' /> - <meta name='theme-color' media='(prefers-color-scheme: dark)' content='#0D0C1A' /> + <meta name='theme-color' content={dark ? '#0D0C1A' : '#c9c9dd'} /> </Head> <Component {...pageProps} /> </>; |