tailWind CSS darkMode 적용

먼저 darkMode를 브라우저의 설정대로 적용할 것인지 사용자가 임의로 버튼을 만들어서 class상태를 통해 적용할 것인지를 정해야 합니다.

 

tailwind.config.ts or tailwind.config.js 파일에서 darkMode 속성이 media일 때는 브라우저의 설정대로 적용, class일 때는 사용자가 임의로 조정이 가능한 상태입니다.

import type { Config } from "tailwindcss";

const config: Config = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {},
  },
  darkMode: "class", // media일 때는 브라우저의 설정대로 darkMode가 적용 됨
  plugins: [],
};
export default config;

 

이때 class를 통해서 darkMode를 브라우저의 설정과 임의로 관리하고 싶다.

하시면 최상단 즉 rootComponent에서 관리하시면 될 것 같습니다.

 

아래는 Next.js에서 적용시키는 임시 코드입니다.

import "@/styles/globals.css";
import type { AppProps } from "next/app";
import { useState } from "react";

export default function App({ Component, pageProps }: AppProps) {
  const [dark, setDark] = useState(false);
  return (
    <div className={dark ? "dark" : ""}>
      <Component {...pageProps} />
    </div>
  );
}

 

이런 식으로 적용시키면 되지 않을까 싶습니다.