aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorlonkaars <loek@pipeframe.xyz>2021-07-13 11:52:13 +0200
committerlonkaars <loek@pipeframe.xyz>2021-07-13 11:52:13 +0200
commit63a9aad62ef9c27c413abd6ee20498e0e387c962 (patch)
tree09a15a7dea4b6fc790e4988354a8cef68d42454d
parent86d5773c3ab4814cc9a6d09bc991c5bf18003404 (diff)
head v2
-rw-r--r--pages/_app.tsx12
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} />
</>;