디자인을 참고할 때 "비슷해 보이게"는 위험한 기준입니다. 라이트 모드에서 맞춘 색이 다크 모드에서 어긋나고, 어긋난 이유를 설명할 수 없게 됩니다. 그래서 눈이 아니라 렌더링 결과를 재서 값으로 옮겼습니다.
나중에 참고한 서비스의 설정 화면을 볼 기회가 생겨 대조해 봤더니 재서 맞춘 값들이 그쪽 설정과 일치했습니다.
항목 | 값 |
모서리 둥글게 (갤러리, 콜아웃) | 4px |
모서리 둥글게 (이미지) | 0 |
페이지 너비 | 900px |
상단 메뉴 높이 | 48px |
마우스 오버 색상 | #669DFD |
예외가 하나 있었습니다. 설정 화면의 "폰트 크기 16"과 달리 실제 nav 링크는 14px, 굵기 700으로 렌더됩니다. 라벨과 실측이 다를 때는 실측을 따랐습니다. 화면에 그려지는 쪽이 사용자가 보는 것입니다.
색을 두 벌로 관리하는 법
모든 색과 간격은
styles/folio-tokens.css의 CSS 변수 하나로 모았습니다. 라이트는 :root에서 정의하고, 다크는 .dark-mode에서 필요한 토큰만 덮어씁니다. 값을 새로 정의하는 게 아니라 덮어쓰는 구조라, 라이트에만 있는 색이 다크에서 투명하게 비는 일이 생기지 않습니다.다크 모드는
next-themes가 <html>에 클래스를 붙여 처리합니다. system, light, dark 3-state이고, 방문자의 선택은 localStorage에 남습니다.토큰 파일 하나만 고치면 사이트 전체 톤이 바뀝니다. 색을 고를 때 들인 시간보다, 색을 한 곳에 모으는 데 들인 시간이 더 값이 나갔습니다.