Next.js的无脑黑暗模式

TIL。@pacocoursey next-themes 。我一直很高兴使用@tailwindCSS并让系统为用户呈现正确的主题，但如果你确实想添加UI控件。给这个不费吹灰之力的方法一个机会，我是这样做的。

设置提供者和属性，将活动主题显示为一个类。这将启用HTML树中存在的所有dark 类。不要忘记在你的@tailwindCSS配置文件中声明这一点：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>
    );
}

要消耗和切换用户界面，请使用其useTheme 钩子。为了避免水合错误，返回一个你选择的加载状态，直到完全安装：

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>
    );
}

就是这么简单。它每周有74,528次npm下载，如果它对@leeerob来说足够好，对我来说也不错。对你的加载状态和切换按钮进行创造性的处理（或者不处理&&KISS）。请查看他们的next-themes GH repo以了解更多信息。