[Tailwind CSS] 14. DarkMode (다크모드)

tailwind CSS 로고

 

 

다크모드는 현대 운영체제에선 기본적으로 제공하는 기능이다.

더욱이 Light, Dark, System 모드로 제공한다. 

 

요약  

  1. 학습내용 : DarkMode (다크모드)

---

상세
  1. 학습내용 : DarkMode (다크모드)

 

◼︎DarkMode 예제

- 기본 전략 : 운영체제 선호도 사용 (media)

Tailwind는 기본적으로 운영 체제의 다크 모드 선호도에 따라 스타일을 적용합니다. 
이를 위해 CSS의 prefers-color-scheme 미디어 쿼리를 사용합니다. 
별도의 설정 없이 Tailwind에서 바로 사용할 수 있습니다.

 

- 선택자 전략 : 수동으로 다크 모드 전환 (selector)

// tailwind.config.js
module.exports = {
  darkMode: 'selector', // 선택자 전략(수동 전환)
  // ...
}

 

◼︎DarkMode 선작업 (tailwind.config.ts)

// npm 다운로드

npm install next-themes

// npm 설치

npm install @tailwindcss/forms @tailwindcss/typography @tailwindcss/aspect-ratio

---

// tailwind.config.ts
import type {Config} from 'tailwindcss';
import forms from '@tailwindcss/forms';
import typography from '@tailwindcss/typography';
import aspectRatio from '@tailwindcss/aspect-ratio';

const config: Config = {
  content: [
    './app/**/*.{js,ts,jsx,tsx,mdx}',
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  darkMode: 'class', // or 'media' or false
  theme: {
    extend: {
      colors: {
        primary: '#1E40AF',
        secondary: '#64748B',
      },
      fontFamily: {
        sans: ['Inter', 'sans-serif'],
      },
    },
  },
  plugins: [
    forms,
    typography,
    aspectRatio,
  ],
};

export default config;

 

 

◼︎DarkMode 예제

<div
  class="bg-white dark:bg-slate-800 text-slate-900 dark:text-white p-6 rounded-lg shadow-md max-w-lg"
>
  <h3 class="text-lg font-bold">Writes Upside-Down</h3>
  <p class="text-slate-600 dark:text-slate-400">
    The Zero Gravity Pen can be used to write in any orientation, including
    upside-down. It even works in outer space.
  </p>
</div>