다크 테마 가독성 문제, CSS 변수 하나로 정리

🤖 1464 in / 808 out / 2272 total tokens

다크 테마에서 텍스트가 검정색으로 튀어 나오던 문제를 잡았다. 원인은 간단했다. #app에 color 속성이 없어서 명시적 색상이 없는 요소들이 브라우저 기본값(검정)을 상속받은 것. app.css에서 #app에 color: var(--t1)을 추가하니 깔끔하게 해결됐다.

같은 맥락에서 Chart.js 그래프도 다크 테마에서 안 보이던 문제가 있었다. 차트 색상을 하드코딩해둬서 그런데, getComputedStyle로 CSS 변수를 동적으로 읽어오도록 수정했다. 테마 변경 시 setTimeout 50ms 텀을 줘서 CSS 변수가 먼저 적용되도록 한 디테일.

입력 모달에서도 개선을 했다. 모바일에서 키보드가 올라오면 입력창이 가려지는 게 불편했는데, focus 이벤트에서 scrollIntoView를 호출해 자동으로 화면 중앙으로 스크롤되도록 했다. 300ms 딜레이를 준 건 키보드 애니메이션 여유를 고려한 것.

function scrollIntoView(e) {
  setTimeout(() => {
    e.target.scrollIntoView({ behavior: 'smooth', block: 'center' });
  }, 300);
}

CSS 변수를 잘 활용하면 테마 전환도 깔끔하고 유지보수도 쉬워진다. 처음 설계할 때 변수 설계를 꼼꼼히 해야 나중에 고생 안 한다.