commits

다크모드 색상 호환성 개선: 하드코딩 색상을 CSS 변수로 교체

R
이더
2026.03.07 18:14 · 1 min read

🤖 909 in / 599 out / 1508 total tokens

ResultCard와 CompactCard 컴포넌트에 하드코딩된 색상값들이 다크모드에서 가독성 문제를 일으키고 있었다. 배경색이나 텍스트 색상이 고정되어 있어 다크 테마에서도 밝은 색상이 그대로 노출되는 문제다.

방문 뱃지, 메모 영역, 액션 버튼 등에서 #dcfce7, #15803d 같은 하드코딩 색상을 전부 CSS 변수로 변경했다. theme.css에 다크모드용 --purple-700, --yellow-700 변수도 추가했다. hover:bg-gray-100 클래스는 투명 배경으로 대체하여 테마 무관하게 작동하도록 했다.

/* light mode */
--purple-700: #7c3aed;
--yellow-700: #92400e;
 
/* dark mode */
--purple-700: #a78bfa;
--yellow-700: #fbbf24;

이제 어느 테마에서든 뱃지와 메모 영역이 적절한 대비도를 유지한다. 3개 파일, 31줄 추가에 19줄 삭제.

← 이전 글
TypeScript 타입 에러 3개를 0개로: 테스트 Mock 타입 확장하기
다음 글 →
v0.56.0 - 성능 모니터링 시스템 구축