This content originally appeared on DEV Community 👩‍💻👨‍💻 and was authored by Hector Sosa
TIL: @pacocoursey next-themes. I've been pretty happy using @tailwindCSS and letting the system render the right theme for the user, but if you do want to add UI controls. Give this no-brainer a shot, here's how I did mine.
Set the provider and attribute to display the active theme as a class. This will enable all dark classes present in the HTML tree. Don't forget to declare this in your @tailwindCSS config file: module.exports = { darkMode: 'class' }:
import { ThemeProvider } from "next-themes";
import type { AppProps } from "next/app";
function MyApp({ Component, pageProps }: AppProps) {
return (
<ThemeProvider attribute="class">
<Component {...pageProps} />
</ThemeProvider>
);
}
To consume and toggle the UI, use their useTheme hook. To avoid hydration errors, return a loading state of your choice until fully mounted:
import { useState, useEffect } from "react";
import { useTheme } from "next-themes";
import { SunIcon, MoonIcon } from "@heroicons/react/outline";
export default function ThemeToggler() {
const { resolvedTheme, setTheme } = useTheme();
const [mounted, setMounted] = useState(false);
useEffect(() => { setMounted(true) }, []);
if (!mounted) return <></>;
return (
<button
onClick={() => {
setTheme(resolvedTheme === "dark" ? "light" : "dark");
}}
>
{resolvedTheme === "dark" ? <SunIcon /> : <MoonIcon />}
</button>
);
}
It is that simple. It has 74,528 weekly npm downloads and if it's good enough for @leeerob, it's good for me too. Get creative with your loading state and toggle button (or not && KISS). Check out their next-themes GH repo for more info.
This content originally appeared on DEV Community 👩‍💻👨‍💻 and was authored by Hector Sosa
Hector Sosa | Sciencx (2022-09-18T22:57:45+00:00) No-brainer Dark Mode for Next.js. Retrieved from https://www.scien.cx/2022/09/18/no-brainer-dark-mode-for-next-js/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.