jake/jarv.is
1
Fork 0
mirror of https://github.com/jakejarvis/jarv.is.git synced 2025-11-05 09:05:39 -05:00
Code Issues Activity

separate theme restoration script and add meta[name="theme-color"] tag to _document.tsx

Browse Source
This commit is contained in:
Jake Jarvis
2022-01-04 18:04:33 -05:00
parent 72899ced57
commit 20d8b13bb1
3 changed files with 23 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
lib/restore-theme.js Normal file
View File

@@ -0,0 +1,14 @@
import { themeColorLight, themeColorDark } from "./config";
// Inlined JS in pages/_app.tsx to restore these light/dark theme settings ASAP:
// `<html data-theme="...">`, `<meta name="color-scheme" ...>`, and color-scheme CSS property.
export const restoreThemeScript = `
try {
var pref = localStorage.getItem("dark_mode"),
dark = pref === "true" || (!pref && window.matchMedia("(prefers-color-scheme: dark)").matches),
theme = dark ? "dark" : "light";
document.documentElement.setAttribute("data-theme", theme);
document.documentElement.style.colorScheme = theme;
document.head.querySelector('meta[name="theme-color"]').setAttribute("content", dark ? "${themeColorDark}" : "${themeColorLight}");
} catch (e) {}
`.trim();

20
pages/_app.tsx
View File

@@ -3,6 +3,7 @@ import { useRouter } from "next/router";
import Script from "next/script"; import Script from "next/script";
import { DefaultSeo, SocialProfileJsonLd } from "next-seo"; import { DefaultSeo, SocialProfileJsonLd } from "next-seo";
import * as Fathom from "fathom-client"; import * as Fathom from "fathom-client";
import { restoreThemeScript } from "../lib/restore-theme";
import * as config from "../lib/config"; import * as config from "../lib/config";
import type { AppProps } from "next/app"; import type { AppProps } from "next/app";
@@ -48,6 +49,10 @@ const App = ({ Component, pageProps }: AppProps) => {
return ( return (
<> <>
<Script id="restore_theme" strategy="afterInteractive">
{restoreThemeScript}
</Script>
{/* @ts-ignore */} {/* @ts-ignore */}
<DefaultSeo <DefaultSeo
defaultTitle={`${config.siteName} – ${config.shortDescription}`} defaultTitle={`${config.siteName} – ${config.shortDescription}`}
@@ -179,21 +184,6 @@ const App = ({ Component, pageProps }: AppProps) => {
]} ]}
/> />
{/*
Inline script to restore light/dark theme preference ASAP:
`<html data-theme="...">`, `<meta name="color-scheme" ...>`, and color-scheme style
*/}
<Script id="restore_theme" strategy="afterInteractive">{`try {
var pref = localStorage.getItem("dark_mode"),
dark = pref === "true" || (!pref && window.matchMedia("(prefers-color-scheme: dark)").matches),
meta = document.createElement("meta");
document.documentElement.setAttribute("data-theme", dark ? "dark" : "light");
document.documentElement.style.colorScheme = dark ? "dark" : "light";
meta.setAttribute("name", "theme-color");
meta.content = dark ? "${config.themeColorDark}" : "${config.themeColorLight}";
document.head.prepend(meta);
} catch (e) {}`}</Script>
<Component {...pageProps} /> <Component {...pageProps} />
</> </>
); );

5
pages/_document.tsx
View File

@@ -12,7 +12,10 @@ class MyDocument extends Document {
render() { render() {
return ( return (
<Html lang={config.siteLocale?.replace("_", "-")}> <Html lang={config.siteLocale?.replace("_", "-")}>
<Head /> <Head>
{/* set dynamically by script in _app.tsx, but tag must exist first */}
<meta name="theme-color" content="" />
</Head>
<body> <body>
<Main /> <Main />
<NextScript /> <NextScript />