설명
Tailwind에는 다크 모드가 활성화되었을 때 사이트를 다르게 스타일링할 수 있는 dark 키워드를 사용할 수 있습니다. 기본적으로는 Prefers-color-scheme CSS 미디어 기능을 사용하지만 selector 방식을 사용해 수동으로 전환 가능합니다.
prefers-color-scheme CSS 미디어 쿼리
사용자가 어떤 테마를 선호하는지 감지할 수 있는 CSS 기능입니다. 이 쿼리는 사용자가 시스템 설정에서 밝은(light) 또는 어두운(dark) 테마를 선택했는지 여부를 확인하여 스타일을 적용 할 수 있습니다.
/* 다크 테마에 대한 스타일 */
@media (prefers-color-scheme: dark) {
body {
background-color: #000000; /* 어두운 배경색 */
color: #ffffff; /* 밝은 텍스트 */
}
}수동 전환
기존 media 전략 대신 selector 전략을 사용해 수동으로 다크 모드 전환을 사용할 수 있습니다.
/** @type {import('tailwindcss').Config} */
module.exports = {
darkMode: 'selector',
// ...
}이제 dark:{class} 클래스가 prefer-color-scheme 를 기반으로 적용되는 대신 HTML 트리에 dark 클래스가 있을 때마다 적용됩니다.
html 요소에 dark 클래스를 추가하기 위해서 일반적으로 localStorage 와 같은 어딘가에서 기본 설정을 읽고 이에 따라 DOM 을 업데이트하는 약간의 JavaScript 를 사용하는 것입니다.
<!-- 다크모드 활성화 -->
<html class="dark">
<body>
<!-- dark:bg-black 가 활성화 됨 -->
<div class="bg-white dark:bg-black">
<!-- ... -->
</div>
</body>
</html>사용자 정의 테마
색상 팔레트, 간격 크기, 타이포그래피 크기, 중단점 등을 변경하려면 tailwind.config.js 파일의 theme 섹션에 추가할 수 있습니다. Theme Configuration 자세한 내용
// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
theme: {
screens: {
sm: '480px',
md: '768px',
lg: '976px',
xl: '1440px',
},
colors: {
'blue': '#1fb6ff',
'pink': '#ff49db',
'orange': '#ff7849',
'green': '#13ce66',
'gray-dark': '#273444',
'gray': '#8492a6',
'gray-light': '#d3dce6',
},
fontFamily: {
sans: ['Graphik', 'sans-serif'],
serif: ['Merriweather', 'serif'],
},
extend: {
spacing: {
'128': '32rem',
'144': '36rem',
},
borderRadius: {
'4xl': '2rem',
}
}
}
}참고
'Tailwind CSS' 카테고리의 다른 글
| 7. Tailwind CSS 기본 설정과 옵션 - 1 (0) | 2024.05.06 |
|---|---|
| 6. Tailwind CSS 커스텀 스타일과 관련 지시어 및 함수 (0) | 2024.05.04 |
| 4. Tailwind CSS 반응형 디자인 (0) | 2024.04.29 |
| 3. Tailwind CSS 의사 클래스(Pesudo classes), 의사 요소(Pesudo elements) (0) | 2024.04.28 |
| 2. Tailwind CSS 이해와 의의 (0) | 2024.04.28 |
