[Tailwind CSS] 다크모드 css 적용하기

 

Tailwind css를 사용하여 간단하게 다크모드 설정하기

 

tailwind.config.js 수정

Tailwind는 기본적으로 운영체제의 다크모드, 라이트모드를 따라 css를 적용할 수 있다.
그러나 우리가 웹사이트를 이용하다보면 토글 버튼을 이용하여 라이트, 다크 모드를 변경하는 옵션을 제공하는 경우가 많다.

수동으로 모드를 제어하고 싶은 경우 tailwind의 class 전략을 사용하면 된다.
tailwind.confg파일에 다크를 클래스로 사용하겠다고 추가해준다.

// tailwind.config.js

module.exports = {
  darkMode: 'class',
  // ...
}

이 설정을 주지 않으면 CSS의 media 설정의 prefers-color-scheme를 사용한다.
위 코드 처럼 설정파일에 다크모드 클래스를 추가 해 주면 HTML 트리에서 dark라는 클래스가 존재하는지에 따라서 테마가 적용된다.

다크모드 css 추가하기

설정파일을 수정 했다면 다크 모드를 적용하고자 하는 html 태그에 dark라는 클래스만 추가해주면 다크모드를 적용할 수 있다.

상위 태그에 dark를 추가해주면 그 하위의 모든 태그들은 dark:{} 클래스를 우선적으로 적용한다.

라이트모드

dark클래스를 지정해주지 않으면 기본(라이트모드)이다.

    <div>
      <div className="flex flex-wrap content-center justify-center w-screen h-screen ">
        <div className=" w-[400px] h-[250px]  p-2 rounded-lg shadow-md   bg-lime-100/60 ">
          <h1 className="mt-4 text-2xl font-extrabold ">
            Tailwind css 다크 모드 적용하기
          </h1>
          <p className="m-2 text-gray-700 ">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit
            repudiandae, dolore vitae praesentium ipsum accusamus nemo in earum
            ex. Laudantium quasi provident deleniti maiores id sunt odit eum
            earum delectus.
          </p>
        </div>
      </div>
    </div>

다크모드

다크모드를 적용할 곳의 최상단에 dark클래스를 추가한다.
하위 태그들은 다크모드일때 적용할 css를 dark:속성으로 작성해준다.

    <div className="dark">
      <div className="flex flex-wrap content-center justify-center w-screen h-screen dark:bg-slate-900 ">
        <div className=" w-[400px] h-[250px]  p-2 rounded-lg shadow-md  dark:bg-slate-600  dark:shadow-slate-400 bg-lime-100/60 ">
          <h1 className="mt-4 text-2xl font-extrabold dark:text-lime-200 ">
            Tailwind css 다크 모드 적용하기
          </h1>
          <p className="m-2 text-gray-700 dark:text-gray-50">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit
            repudiandae, dolore vitae praesentium ipsum accusamus nemo in earum
            ex. Laudantium quasi provident deleniti maiores id sunt odit eum
            earum delectus.
          </p>
        </div>
      </div>
    </div>