7시간마다 색이 바뀌는 사이트
이 사이트는 7시간마다 전체 색 구성이 바뀝니다. 블로그에서 채팅으로 넘어가도 같은 시각이면 같은 색입니다.
서버가 필요 없는 이유
색 번호를 시계로 계산하기 때문입니다.
const PERIOD = 7 * 60 * 60; // 25,200초
const slot = Math.floor(Date.now() / 1000 / PERIOD);
document.documentElement.dataset.palette = slot % 6;UNIX 시각은 전 세계 어디서나 같으므로, 모든 방문자와 모든 페이지가 저절로 맞춰집니다. 7은 24와 서로소라서 매일 다른 시각에 색이 바뀌고, 6개 팔레트가 42시간마다 한 바퀴 돕니다.
색은 변수로만
모든 화면은 --c-bg, --c-text, --c-a1 같은 변수만 씁니다. 팔레트는 이 변수의 값 묶음일 뿐이라, 새 팔레트를 더해도 화면 코드는 바뀌지 않습니다. 픽셀 그림도 같은 변수로 칠해서 색이 함께 바뀝니다.
접근성
팔레트를 더할 때마다 글자 대비를 자동으로 계산해 WCAG AA(4.5:1) 아래면 빌드를 멈춥니다. 동작 줄이기 설정에서는 색 전환 애니메이션을 끄고, JavaScript 가 꺼져 있으면 기본 팔레트를 씁니다.