뒤늦게 알아서 뼈아픈 유용한 CSS : 다크모드 만들기 (@ media (prefers-color-sheme : dark)) + :root

구축사이트 온갖 데 다 써야 할 다크모드 CSS를 공유한다.

@media (prefers-color-scheme : dark) {
  .dark { background: #000; }
}

그런데 여기서 머리를 쓰면 더욱 편리하게 사용할 수 있다.

---

:root 활용 (이게 찐)

/* 기본 테마 */
:root {
  --text-color: black;
  --background-color: white;
}

/* 다크 모드에 대응하는 스타일 */
@media (prefers-color-scheme: dark) {
  :root {
    --text-color: white;
    --background-color: black;
  }
}

/* 다크 모드에서 사용할 스타일 */
body {
  color: var(--text-color);
  background-color: var(--background-color);
}

---

에뮬레이션 팁

f12 > 우측 상단 점세개 > 도구 더보기 > 렌더링에 들어가면 다크모드/라이트모드를 강제 실행해서 확인할 수 있다.