Tailwind CSS 세팅 : 다크모드도 있어요

윤뿔소·2023년 3월 23일

Vargen dark next-themes tailwind

개인프로젝트: VarGen

목록 보기

9/15

전편에서 봤던 것처럼 이제 다크모드를 직접 적용토록 해보자.

nextjs와 가장 어울리는 테일윈드를 쓸 것이니 일단 세팅을 해주어야 한다.

Tailwind CSS 세팅

next.js에 관해 설치법은 여기 공식문서에 있다. 한번 봐보자.

설치

npm을 통해 Tailwind에 필요한 설정 파일과 피어 종속 요소를 설치한다.

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

아래 init 명령어를 입력하면 tailwind.config.js와 postcss.config.js이 생성된다. 이제 config 파일을 건드려 적용되는 템플릿을 작성해보자.

config 작성 및 설정 세팅

tailwind.config.js에 가서 작성해야하는 것이 있다. 기본적으로 생성하면 작성되어있는 내용은 다음과 같다.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}

여기서 content 부분에 작성하자.

  content: [
    "./app/**/*.{js,ts,jsx,tsx}",
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
 
    // src 디렉토리가 있다면
    "./src/**/*.{js,ts,jsx,tsx}",
  ],

src 경로의 js,ts,jsx,tsx 템플릿에 테일윈드 적용해주세요~ 하는 설정 코드이다. 나는 src가 있기에 아래를 택했다.

global.css 적용

global.css라고 공통 css 적용 파일이 있을 것이다. 거기에

@tailwind base;
@tailwind components;
@tailwind utilities;

이러면 이제 끝이다!

다크모드 적용

기본적으로 Tailwind는

class="text-slate-900 mt-5 text-base font-medium tracking-tight

적용 시 이런 모양을 띄고 있다. class를 따로 지정하여 적용하는 것.

여기에 기본값은 라이트모드로 두고, 다크모드는 dark:를 따로 붙여 사용한다. 기본 구동 방법은 알았으니 이제 제대로 적용해보자

라이브러리 사용: next-themes

원래는 리코일이나 상태관리를 써서 다크, 라이트 모드를 전역적으로 적용되게 해서 공통 변수를 만들어 css에 적용토록 해야하는데 그 과정을 만든 라이브러리가 있다.
간편하게 다크모드를 사용할 수 있는 next-themes 라이브러리를 이용할 것이다.

1. 설치

npm install next-themes

2. Provider 적용

그다음 리코일 사용하듯이 Provider를 사용해서 감싸줘야한다. nextjs를 쓰고 있으니 _app.js에 적용하면 된다.

import "@/styles/globals.css";
import { ThemeProvider } from "next-themes";
import type { AppProps } from "next/app";

export default function App({ Component, pageProps }: AppProps) {
  return (
    <ThemeProvider attribute="class">
      <Component {...pageProps} />
    </ThemeProvider>
  );
}

3. useTheme 적용

이제 하이라이트인 useTheme을 사용해 모드를 바꿔줘야한다. useState처럼 getter, setter가 따로 있고, 토글 버튼에 적용하면 된다.

<button
      className="css"
      type="button"
      onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
    >

이렇게 말이다! 이러면 setter가 적용돼 바뀌어진다.

이런 식으로 라이브러리를 사용하면 쉽게 해결되고, 사용자 시스템 설정 상 dark, light도 직접 잡아줘 편하게 다크모드 라이트모드를 변경할 수 있다! 끝!

dark: 적용

이제 기본적인 건 끝났으니 tailwind의 dark:를 이용할 차례다. 사람다 다양한 컴포넌트를 사용하니 폰트 컬러, footer등의 레이아웃에서 어떻게 사용할지 보여주겠다.

h1,
h2,
h3,
h4,
h5,
h6 {
  @apply text-slate-900 dark:text-slate-50 ease-in-out duration-200;
}

footer {
  @apply text-gray-600 dark:text-white
  bg-gray-100 dark:bg-slate-600/20 ease-in-out duration-200;
}

a {
  @apply text-slate-500 hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-50 ease-in-out duration-200;
}

p {
  @apply text-slate-700 dark:text-slate-400 ease-in-out duration-200;
}