현대 웹사이트와 앱은 라이트모드와 다크모드를 모두 지원해야 합니다. 하나의 색상이 두 모드에서 모두 잘 보이도록 팔레트를 설계해야 합니다.
다크모드 색상 원칙
다크모드에서는 순백(#FFFFFF) 대신 약간 어두운 흰색(#E5E5E5)을 사용하고, 배경은 순검정(#000000) 대신 짙은 회색(#1A1A1A)을 사용합니다. 눈의 피로를 줄이기 위함입니다.
색상 변수 활용
CSS 변수로 --bg-color, --text-color 등을 정의하고 미디어 쿼리로 전환하면 됩니다. 색상 변환기로 라이트/다크 버전의 색상 쌍을 미리 준비해두면 개발이 수월합니다.