다크모드 1초 완성: CSS 변수(Custom Properties)와 미디어 쿼리 활용법

CSS Custom Variables for Theme Control Visualized

요즘 출시되는 서비스들에서 다크모드(Dark Mode)는 선택이 아닌 필수 교양 옵션입니다. 예전에는 자바스크립트로 일일이 클래스를 바인딩하고 색상 스펙을 덮어쓰는 복잡한 방식을 썼지만, 이제는 순수 CSS의 커스텀 속성(CSS Variables)과 미디어 쿼리 연동만으로 유지보수성이 극도로 우수한 다크 테마를 셋업할 수 있습니다. CSS 핵심 설계 가이드를 살펴봅니다.

1. CSS 변수의 강력함

색상, 폰트 크기, 간격 등을 한 곳에 정의해 두고 변수 형태로 재사용합니다.

--main-color: 두 개의 대시(`--`)를 앞에 표기하여 사용자가 직접 브라우저 런타임 변수를 생성합니다.
var() 함수: 지정한 커스텀 변수 이름을 인자로 전달받아 레이아웃 색상을 다이렉트로 매핑합니다.

2. 실전 CSS 변수 기반 다크모드 코드 예시

시스템 다크테마 설정(prefers-color-scheme)과 수동 클래스 토글 테마 전환을 일괄 통제하는 완벽한 CSS 설계 예시입니다.

/* 1. 기본 라이트 테마 변수 셋업 */
:root {
  --bg-main: #ffffff;
  --text-main: #1f2937;
  --accent: #3b82f6;
  --border-color: #e5e7eb;
}

/* 2. 사용자 시스템 설정이 다크 모드일 때 자동 변경 */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-main: #111827;
    --text-main: #f9fafb;
    --border-color: #374151;
  }
}

/* 3. JS를 통한 수동 다크모드 토글용 클래스 지원 */
:root[data-theme="dark"] {
  --bg-main: #111827;
  --text-main: #f9fafb;
  --border-color: #374151;
}

/* 4. 요소에 변수 매핑 이식 */
body {
  background-color: var(--bg-main);
  color: var(--text-main);
  transition: background-color 0.3s, color 0.3s; /* 부드러운 전환 효과 */
}

.card {
  border: 1px solid var(--border-color);
  background-color: var(--bg-main);
}

"전역 테마 전환 시 하드코딩된 색상 코드(#fff 등)를 일일이 찾아 바꿀 필요 없이, root의 CSS 변수 4~5개 값만 스위칭해 주면 전체 레이아웃의 테마가 한 번에 교체됩니다."

실전 라이브 데모 프리뷰 (Live Theme Toggle Preview)

아래 박스는 CSS Custom Variables를 활용해 개별 컴포넌트 단위로 테마(Light/Dark)를 실시간 스위칭하는 실전 데모입니다.

실시간 테마 적용 카드 영역

버튼을 누르는 순간 CSS 변수의 속성값이 교체되며 부드러운 다크모드가 전환됩니다.

3. 요약: 효율 극대화 테마 셋업

단 한 줄의 복잡한 색상 덮어쓰기 코드 없이, `:root`에 정의된 CSS Custom Properties 변수의 대칭 교환을 장착하여 사용자가 쾌적하게 구독할 수 있는 모던 UI 테마를 완성해 보십시오.