💡 다크모드 컬러를 CSS 변수로 맞추기

다크모드에서 배경을 순수 검정(#000), 글자를 순수 흰색(#fff)으로만 잡으면 대비가 너무 세서 눈이 피로하기 쉽습니다. 보통은 아주 어두운 남색·회색 배경에, 약간 밝힌 포인트 색과 부드러운 글자색을 씁니다. 이 도구는 메인(브랜드) 색 하나를 넣으면 라이트·다크용 배경·표면·텍스트·테두리·포인트 색 CSS 변수를 만들어 줍니다.

다크용 메인은 원색에 흰색을 섞어 밝힙니다. 슬라이더로 밝기 비율(기본 25%, 범위 10~40%)을 조절할 수 있습니다. 다크 배경·표면은 검정 쪽에 메인 색을 소량 섞어, 완전히 무채색만은 아니게 잡습니다. 라이트 쪽 배경·표면·글자색은 실무에서 자주 쓰는 중립값으로 고정해 두었습니다.

📊 변수 역할

* 모바일에서는 표를 좌우로 밀어 확인하세요.

📌 prefers-color-scheme과 테마 전환

통합 코드는 @media (prefers-color-scheme: dark)로 OS 다크 설정에 맞춥니다. 사이트에 라이트/다크 버튼을 두려면 html[data-theme="dark"]처럼 속성으로 같은 변수를 덮어쓰는 방식도 많이 씁니다. 통합 코드 하단 주석에 예시가 들어 있으니, 필요하면 주석을 풀고 버튼 클릭 시 document.documentElement.setAttribute('data-theme', 'dark')만 연결하면 됩니다.

다크모드 컬러를 잡을 때는 표면이 배경보다 조금 밝아야 카드가 앞으로 나옵니다. 미리보기 칩과 카드에서 그 관계를 확인해 보세요. 라이트·다크·통합 세 칸 중 프로젝트에 맞는 것만 복사해도 됩니다.

⚙️ 적용 팁

요소마다 색을 직접 넣지 말고 background: var(--bg-surface)처럼 변수만 쓰면, 테마를 바꿀 때 손볼 곳이 줄어듭니다. 메인 색이 원래 매우 밝거나 형광에 가까우면 다크에서 더 밝히지 않거나 채도를 낮추는 편이 나을 수 있습니다.

통합 코드를 붙인 뒤에는 body { background: var(--bg-default); color: var(--text-default); }처럼 최상위에 한 번만 연결해 두면, 하위는 변수만 따라갑니다. 미리보기 카드와 실제 페이지 여백·그림자가 다르면 느낌이 달라질 수 있으니, 카드·버튼에 먼저 시험해 보세요.

모니터·주변 조명에 따라 색감이 달라지니 실제 기기에서도 한 번 확인하세요. 이 값은 시작용 스케일이며, 접근성 대비율(WCAG)까지 자동으로 맞춰 주지는 않습니다. 중요한 본문·버튼은 대비율 검사 도구로 한 번 더 보는 편이 안전합니다.

❓ 자주 묻는 점

라이트 배경이 메인 색을 따라가지 않는 이유는, 밝은 화면에서는 브랜드 색을 바탕 전체에 깔기보다 버튼·링크에만 쓰는 경우가 많기 때문입니다. 브랜드가 연한 파스텔 바탕을 쓰도록 정해져 있으면 그 HEX로 --bg-default만 바꾸면 됩니다.