jake/jarv.is
1
Fork 0
mirror of https://github.com/jakejarvis/jarv.is.git synced 2026-07-21 20:55:56 -04: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
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
lib/restore-theme.js
+14
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();