Board

그누보드 기본 스킨은 색이 CSS 파일 여기저기에 흩어져 있어서, 다크 모드를 붙이려면 손댈 곳이 많습니다. 이번에는 색을 전부 변수로 빼고, 모드 전환은 루트 속성 하나만 바꾸는 방식으로 정리했습니다.

1. default.css 상단에 :root 변수를 만든다
  --bg, --fg, --line, --muted, --accent 다섯 개면 대부분 해결됩니다.

2. [data-theme="dark"] 블록에서 같은 변수만 다시 정의한다

3. 게시판 스킨 CSS에 박힌 #fff, #333 같은 값을 var()로 바꾼다
  여기가 실제로 시간이 가장 오래 걸리는 부분입니다.

4. 전환은 버튼에서 document.documentElement.dataset.theme만 바꾸고, 선택 값은 localStorage에 저장

포인트는 이미지입니다. 다크 모드에서 흰 배경 이미지가 그대로 나오면 눈이 아프기 때문에, 썸네일에는 filter: brightness(.9) 정도를 걸어 두었습니다.

스킨을 직접 수정하지 않고 CSS만 덮어쓰는 방식이라, 그누보드 업데이트 때도 영향이 적습니다.