OpenNeo/impress-2020
OpenNeo/impress-2020
1
0
Fork 0
Code Pull requests Activity

Switch to Chakra's standard ColorModeScript

Browse source 
We'd previously emulated this tag's functionality in create-react-app via copy-paste, but now we can just use it directly the standard way!
This commit is contained in:
Emi Matchu 2022-09-14 18:43:51 -07:00
parent 8cd45d7082
commit 43089dd4ab
1 changed files with 2 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

40
pages/_document.tsx
View file

@ -1,3 +1,4 @@
import { ColorModeScript } from "@chakra-ui/react";
import Document, { Html, Head, Main, NextScript } from "next/document";
class MyDocument extends Document {
@ -66,44 +67,7 @@ class MyDocument extends Document {
as="font"
crossOrigin=""
/>
<script
dangerouslySetInnerHTML={{
__html: `
// HACK: This is copy-pasted output from Chakra's <ColorModeScript />. It
// initializes our color mode to match the system color mode. The
// component is built for a special Document element like in
// Next.js, but in create-react-app this is the best we can do!
(function setColorModeVar(initialValue) {
var mql = window.matchMedia("(prefers-color-scheme: dark)");
var systemPreference = mql.matches ? "dark" : "light";
var persistedPreference;
try {
persistedPreference = localStorage.getItem("chakra-ui-color-mode");
} catch (error) {
console.log(
"Chakra UI: localStorage is not available. Color mode persistence might not work as expected"
);
}
var isInStorage = typeof persistedPreference === "string";
var colorMode;
if (isInStorage) {
colorMode = persistedPreference;
} else {
colorMode =
initialValue === "system" ? systemPreference : initialValue;
}
if (colorMode) {
var root = document.documentElement;
root.style.setProperty("--chakra-ui-color-mode", colorMode);
}
})("system");
`,
}}
/>
<ColorModeScript initialColorMode="light" />
<noscript>You need to enable JavaScript to run this app.</noscript>
</Head>