한눈에 보는 정의
어두운 배경에 밝은 글자로 화면을 보여 주는 표시 방식. 기기 설정에 맞춰 사이트가 자동으로 바꿀 수 있다.
이런 말로 들어요
- 다크 모드에서 로고가 배경이랑 섞여서 안 보여요.
- 색은 변수로 정리해 둬서 다크 모드 추가가 어렵지 않습니다.
그림으로 보기
다크 모드는 prefers-color-scheme으로 사용자 설정을 감지하고, CSS 색 변수만 바꿔 전환합니다. 두 테마 모두 대비를 확인합니다.
하캄솔루션 자체 제작 설명도식직접 해 보기
상담 신청
문의를 남기면 하루 안에 연락드립니다.
신청하기--bg: #ffffff; --text: #20231f; --accent: #164595;자세히 알아보기
휴대폰이나 PC에서 다크 모드를 켠 사용자는 사이트도 어둡게 보이기를 기대하는 경우가 많습니다. CSS의 prefers-color-scheme 미디어 기능으로 사용자가 밝은 테마와 어두운 테마 중 무엇을 요청했는지 알 수 있습니다. 색을 CSS 변수로 정해 두면 배경·글자·테두리 색만 바꿔 쉽게 전환할 수 있습니다. 로고, 그림, 그림자도 어두운 배경에서 잘 보이는지 따로 확인해야 합니다.
실무 예시
예를 들어 배경 #ffffff·글자 #20231f로 쓰던 색을 변수로 바꾸고, 다크 모드에서는 배경 #16181a·글자 #eeeeea로 바꾸되 남색 강조 버튼은 밝기를 조금 올려 대비를 유지합니다.
함께 살펴볼 점
단순히 색을 반전하면 사진이 이상해지고 명도 대비가 떨어질 수 있습니다. 두 테마 모두에서 글자 대비를 확인하고, 투명 배경 로고는 어두운 배경용을 따로 준비합니다.
AI에게 이렇게 요청해 보세요
사이트 색을 CSS 변수로 정리하고 prefers-color-scheme: dark일 때 어두운 테마로 바뀌게 해 줘. 두 테마 모두 본문 글자 명도 대비가 4.5:1 이상인지 확인해 줘.
코딩·작성 도구에 붙여 쓰기 전에 내 상황에 맞게 바꾸고, 결과는 직접 확인하세요.출처와 검토 정보
- prefers-color-scheme - MDN Web Docs 새 창
사용자가 운영체제나 브라우저 설정으로 밝은·어두운 테마를 요청했는지 감지하는 미디어 기능을 확인했습니다.
자료 확인
내용 검토
최초 발행 · 내용 수정