Next.js의 Tailwindcss를 사용한 다크 모드

15865 단어 reacttailwindcssjavascriptnextjs
tailwindcss 버전 2.0은 다크 모드 지원을 포함하여 몇 가지 새로운 기능을 제공하여 다크 모드가 활성화되었을 때 애플리케이션을 동적으로 수정하는 것을 그 어느 때보다 쉽게 ​​만듭니다.

새로운 Next.js 애플리케이션을 만드는 것으로 시작하겠습니다.

npx create-next-app dark-mode


Tailwindcss 설치

yarn add -D tailwindcss postcss autoprefixer


다크 모드로 전환할 수 있는 다음 테마

yarn add next-themes


postcss.config.js 파일을 만들고 다음과 같은 postcss 구성을 붙여넣습니다.

module.exports = {
  plugins:{
    tailwindcss: {},
    autoprefixer: {}
  }
};


그런 다음 tailwindcss.config.js 파일을 만들고 아래 구성을 추가합니다.

module.exports = {
  darkMode: "class",
  purge: ["./components/**/*.{js,ts,jsx,tsx}", "./pages/**/*.{js,ts,jsx,tsx}"],
  theme: {},
  variants: {},
  plugins:[]
};


이 구성에서 테마 변경은 클래스와 함께 수행되므로 다음 테마와의 통합이 용이합니다.

페이지 디렉터리에서 새 파일 _document.js를 만들고 아래 구성을 추가합니다.

import React from "react";
import Document, { Html, Head, Main, NextScript } from "next/document";

class MyDocument extends Document {
  render() {
    return (
      <Html>
        <Head />
        <body className="bg-white text-black dark:bg-black dark:text-white">
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;


본문 수준에서 전역 className 구성을 정의했습니다. 테마가 기본으로 설정되면 텍스트 색상은 검은색이고 배경색은 흰색이 됩니다. 다크 모드가 실행되면 텍스트 색상은 흰색이 되고 배경 색상은 검정색이 됩니다. 원하는대로 수정할 수 있습니다

스타일 디렉토리를 삭제할 수 있습니다.

그런 다음 페이지 디렉토리의 _app.js 파일에서 다음 테마에서 ThemeProvider를 가져오고 tailwind.css도 가져옵니다.

import 'tailwindcss/tailwind.css';
import { ThemeProvider } from "next-themes";

function MyApp({ Component, pageProps }) {
  return (
    <ThemeProvider attribute="class">
      <Component {...pageProps} />
    </ThemeProvider>
  );
}

export default MyApp;


index.js 파일에서 초기 내용을 이것으로 바꿉니다.

import Head from "next/head";

export default function Home() {
  return (
    <div className="text-center">
      <Head>
        <title>Dark mode with Tailwind and Next.js</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <h1 className="text:2xl">Dark mode with Tailwind and Next-themes</h1>
    </div>
  );
}


그런 다음 서버를 시작하십시오.

yarn dev


다크 모드로 전환하려면 다음 테마에서 가져올 usetheme이 필요합니다. useTheme()에는 여러 속성이 포함되어 있지만 흥미로운 것은 활성 테마를 반환하는 theme과 테마를 변경할 수 있는 setTheme입니다.

이 라이브러리의 장점은 ThemeProvider가 페이지의 나머지 부분을 로드하기 전에 올바른 속성으로 html 요소를 업데이트하기 위해 next/head에 스크립트를 자동으로 삽입하기 때문에 서버 측에서 페이지를 로드할 때 플래시를 방지한다는 것입니다. 즉, 어떤 상황에서도 페이지가 깜박이지 않습니다.

index.js에서 useTheme를 가져올 것입니다.

 import { useTheme } from "next-themes"


우리는 theme와 setTheme를 추출할 것입니다.

 const { theme, setTheme } = useTheme();


클라이언트 측에서 테마를 변경할 것이므로 먼저 구성 요소가 마운트되었는지 확인합니다.

const [isMounted, setIsMounted] = useState(false);


구성 요소가 마운트되면 isMounted를 true로 설정합니다.

useEffect(() => {
    setIsMounted(true);
  }, []);


그런 다음 구성 요소가 마운트되었는지 먼저 확인하여 테마를 변경할 수 있는 함수를 정의할 것입니다.

const switchTheme = () => {
    if (isMounted) {
      setTheme(theme === "light" ? "dark" : "light");
    }
};


index.js의 전체 코드

import { useEffect, useState } from "react";
import Head from "next/head";
import { useTheme } from "next-themes";
export default function Home() {
  const [isMounted, setIsMounted] = useState(false);
  const { theme, setTheme } = useTheme();
useEffect(() => {
    setIsMounted(true);
  }, []);
const switchTheme = () => {
    if (isMounted) {
      setTheme(theme === "light" ? "dark" : "light");
    }
  };
return (
    <div className="text-center">
      <Head>
        <title>
          Dark mode with Tailwind and Next.js
        </title>
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <h1 className="text:2xl">
       Dark mode with Tailwind and Next- themes
      </h1>
      <button onClick={switchTheme}>Change theme</button>
    </div>
  );
}


페이지를 새로고침하면 플래시가 표시되지 않습니다.

next-themes 라이브러리만 있으면 tailwindcss 없이 다크 모드를 구현할 수도 있습니다. 스타일 구성 요소, 감정 또는 CSS 클래스로 구현할 수 있습니다.

Demo

Source code
LeetCode601-MySQL-체육관 사람 유동량
js 는 ie8 에서 표 tr 의 bug 를 동적 으로 증가 시 킵 니 다.

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage