핵심 개념
다크 모드
다크 모드에서 사이트를 스타일링하기 위해 variants를 사용하는 방법.
개요
다크 모드는 이제 많은 운영체제에서 퍼스트클래스 기능으로 자리 잡았습니다. 따라서 기본 디자인과 함께 다크 버전의 웹사이트를 디자인하는 것이 점점 더 일반화되고 있습니다.
Tailwind는 이를 쉽게 구현할 수 있도록 dark 변형을 제공합니다. 이 변형을 사용하면 다크 모드가 활성화되었을 때 사이트의 스타일을 다르게 지정할 수 있습니다.
라이트 모드
거꾸로 쓰기
제로 그래비티 펜은 거꾸로를 포함한 모든 방향에서 사용할 수 있습니다. 심지어 우주에서도 작동합니다.
다크 모드
거꾸로 쓰기
제로 그래비티 펜은 거꾸로를 포함한 모든 방향에서 사용할 수 있습니다. 심지어 우주에서도 작동합니다.
<div class="bg-white dark:bg-gray-800 rounded-lg px-6 py-8 ring shadow-xl ring-gray-900/5"> <div> <span class="inline-flex items-center justify-center rounded-md bg-indigo-500 p-2 shadow-lg"> <svg class="h-6 w-6 stroke-white" ...> <!-- ... --> </svg> </span> </div> <h3 class="text-gray-900 dark:text-white mt-5 text-base font-medium tracking-tight ">거꾸로 쓰기</h3> <p class="text-gray-500 dark:text-gray-400 mt-2 text-sm "> 제로 그래비티 펜은 거꾸로를 포함한 모든 방향에서 사용할 수 있습니다. 심지어 우주에서도 작동합니다. </p></div>기본적으로 이 기능은 prefers-color-scheme CSS 미디어 기능을 사용합니다. 하지만 다크 변형을 재정의하여 수동으로 다크 모드를 전환할 수 있는 사이트를 구축할 수도 있습니다.
다크 모드 수동 전환
prefers-color-scheme 미디어 쿼리 대신 CSS 선택자로 다크 테마를 제어하고 싶다면, dark 변형을 커스텀 선택자를 사용하도록 재정의할 수 있습니다.
@import "tailwindcss";@variant dark (&:where(.dark, .dark *));이제 dark:* 유틸리티는 prefers-color-scheme에 따라 적용되는 대신, HTML 트리 상위에 dark 클래스가 있을 때마다 적용됩니다.
<html class="dark"> <body> <div class="bg-white dark:bg-black"> <!-- ... --> </div> </body></html>html 엘리먼트에 dark 클래스를 추가하는 방법은 여러분의 선택에 달려 있지만, 일반적으로 class 속성을 업데이트하고 해당 설정을 localStorage와 같은 곳에 동기화하는 JavaScript 코드를 사용하는 방법이 많이 쓰입니다.
데이터 속성 사용하기
클래스 대신 데이터 속성을 사용하여 다크 모드를 활성화하려면, dark 변형을 속성 선택자로 재정의하면 됩니다.
@import "tailwindcss";@variant dark (&:where([data-theme=dark], [data-theme=dark] *));이제 data-theme 속성이 dark로 설정된 경우, 트리 상위 어디에서든 다크 모드 유틸리티가 적용됩니다.
<html data-theme="dark"> <body> <div class="bg-white dark:bg-black"> <!-- ... --> </div> </body></html>시스템 테마 지원 포함
라이트 모드, 다크 모드, 그리고 시스템 테마를 지원하는 3가지 방식의 테마 토글을 만들려면, 커스텀 다크 모드 선택자와 window.matchMedia() API를 사용해 시스템 테마를 감지하고 필요할 때 html 엘리먼트를 업데이트하면 됩니다.
다음은 라이트 모드, 다크 모드, 그리고 운영체제 설정을 존중하는 방법을 보여주는 간단한 예제입니다:
// 페이지 로드 시 또는 테마 변경 시, FOUC를 피하기 위해 `head`에 인라인으로 추가하는 것이 좋음document.documentElement.classList.toggle( "dark", localStorage.currentTheme === "dark" || (!("theme" in localStorage) && window.matchMedia("(prefers-color-scheme: dark)").matches),);// 사용자가 명시적으로 라이트 모드를 선택할 때localStorage.currentTheme = "light";// 사용자가 명시적으로 다크 모드를 선택할 때localStorage.currentTheme = "dark";// 사용자가 명시적으로 OS 설정을 존중하도록 선택할 때localStorage.removeItem("theme");이 설정은 여러분이 원하는 대로 관리할 수 있습니다. 심지어 선호도를 서버 측 데이터베이스에 저장하고 서버에서 클래스를 렌더링하는 것도 가능합니다. 이는 전적으로 여러분의 선택에 달려 있습니다.
