CSS 변수로 다크모드 구현하기

다크모드 구현할 때 어떻게 하세요?

컴포넌트마다 .dark 분기 쓰면 CSS가 2배로 늘어요.

CSS 변수 쓰면 훨씬 깔끔해요.

기본 구조

.card 스타일은 하나만 쓰면 돼요. 모드 전환하면 변수값만 바뀌니까.

시맨틱 토큰

색상 이름을 용도로 지으면 더 좋아요:

--color-gray-100 이런 식보다 --color-surface 이런 게 나아요. 쓸 때 "이 색이 뭐였지?" 안 찾아봐도 돼요.

Tailwind에서 쓰기

dark: prefix 안 써도 자동으로 바뀌어요.

모드 전환 로직

핵심은 document.documentElement.classList에 dark 추가/제거하는 거예요.

깜빡임 방지

SSR이나 Next.js 쓸 때 페이지 로드시 깜빡이는 문제 있어요. 해결법:

이 스크립트가 렌더링 전에 실행돼서 깜빡임 없어요.

색상 팔레트 만들기

다크모드 색상은 그냥 반전하면 안 돼요:

텍스트도 마찬가지:

실전 색상 세트

검증된 색상 조합이에요:

Primary 색상은 다크모드에서 더 밝게 해야 눈에 잘 띄어요.

주의할 점

1. 이미지

2. 그림자

3. 색상 하드코딩 금지

KRDS에서의 다크모드

공공기관 프로젝트라면 KRDS 색상 체계를 따라야 해요.

HANUI는 KRDS 기준 다크모드가 설정되어 있어요:

정리

1. CSS 변수로 색상 정의
2. .dark 클래스에서 변수값만 변경
3. 컴포넌트는 변수만 참조
4. 시맨틱 이름 사용 (surface, text-primary 등)
5. SSR 깜빡임 방지 스크립트 추가

이렇게 하면 다크모드 유지보수가 훨씬 편해져요.

---

관련 링크

• HANUI — KRDS 기반 디자인 시스템
• Tailwind CSS 다크모드 공식 문서
• Claude Code 설정 자동화