Switch to Chakra's standard ColorModeScript
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:
parent
8cd45d7082
commit
43089dd4ab
1 changed files with 2 additions and 38 deletions
|
@ -1,3 +1,4 @@
|
||||||
|
import { ColorModeScript } from "@chakra-ui/react";
|
||||||
import Document, { Html, Head, Main, NextScript } from "next/document";
|
import Document, { Html, Head, Main, NextScript } from "next/document";
|
||||||
|
|
||||||
class MyDocument extends Document {
|
class MyDocument extends Document {
|
||||||
|
@ -66,44 +67,7 @@ class MyDocument extends Document {
|
||||||
as="font"
|
as="font"
|
||||||
crossOrigin=""
|
crossOrigin=""
|
||||||
/>
|
/>
|
||||||
<script
|
<ColorModeScript initialColorMode="light" />
|
||||||
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");
|
|
||||||
`,
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||||
</Head>
|
</Head>
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue