Set Initial Color Mode 🌗
Inspiration
The Quest for the Perfect Dark Mode by Josh Comeau
Usage
Plain HTML
<script src="https://unpkg.com/@rqbazan/set-initial-color-mode/dist/browser.js" />Next.js
import NextDocument, { Head, Html, Main, NextScript } from "next/document";
import { getJsText } from "@rqbazan/set-initial-color-mode";
export default class Document extends NextDocument {
render() {
return (
<Html lang="en">
<Head>
<script
id="set-initial-color-mode"
dangerouslySetInnerHTML={{ __html: getJsText() }}
/>
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}React.js
import * as React from "react";
import { useColorModeToggle } from "@rqbazan/set-initial-color-mode";
function Switch() {
const { onToggle } = useColorModeToggle();
return <input type="checkbox" onClick={onToggle} />;
}