Next.js를 위한 간단한 다크 모드

TIL: next-themes . 나는 시스템이 사용자에게 적합한 테마를 렌더링하도록 사용하고 허용하는 것이 매우 기뻤지만 UI 컨트롤을 추가하려는 경우. 이 간단한 시도를 해보세요. 제가 한 방법은 다음과 같습니다.

활성 테마를 클래스로 표시하도록 공급자 및 속성을 설정합니다. 이렇게 하면 HTML 트리에 있는 모든dark 클래스가 활성화됩니다. 구성 파일에서 다음을 선언하는 것을 잊지 마십시오: 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>
    );
}

UI를 사용하고 전환하려면 해당 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 다운로드를 가지고 있으며 에 충분하다면 나에게도 좋습니다. 로드 상태 및 토글 버튼(또는 && KISS 아님)으로 창의력을 발휘하십시오. 자세한 내용은 next-themes GH repo을 확인하십시오.