feat(blog): 다크모드 도입 — 토큰 기반 테마 전환 (#90)#123
Merged
Merged
Conversation
- global.css: --color-surface 토큰 + .dark에서 색 변수 오버라이드(텍스트 그레이는 밝게, 배경 그레이는 어둡게, surface/border/brand/blue). Tailwind v4 유틸이 var()를 참조하므로 컴포넌트 대부분 변경 없이 전체가 전환됨 - ThemeToggle: html.dark + localStorage 토글, themechange 이벤트 발행 - layout: FOUC 방지 인라인 스크립트(paint 전 테마 결정) + suppressHydrationWarning - giscus: 사이트 테마 동적 연동(themechange 구독) - bg-white → bg-surface(5곳): 흰 텍스트(--color-white)와 충돌하던 surface만 토큰화 - e2e/theme: 토글·새로고침 유지 검증 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub. |
Owner
Author
🔍 코드 리뷰 (self-review)다크모드가 양쪽 모드에서 정상 동작하고(스크린샷·E2E·프로덕션 빌드 확인), 구현 중 발견한 이슈는 커밋 전에 고쳤습니다. 남은 개선 1건을 반영하겠습니다. 반영할 미흡사항
구현 중 발견·수정 완료
의도적 결정
1번 반영 후 별도 코멘트로 정리하겠습니다. |
- global.css: @custom-variant dark로 dark: 유틸이 .dark 클래스를 따르게 설정 - ThemeToggle 아이콘을 JS 상태 대신 CSS(dark:)로 토글 → 다크로 로드된 페이지에서 첫 프레임부터 해/달 아이콘이 html.dark와 일치(플래시 없음). aria-label만 상태 유지 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Owner
Author
✅ 리뷰 반영 완료 (
|
This was referenced Jul 1, 2026
Closed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
디자인 토큰(#94/#120)이 깔린 덕에 컴포넌트 대부분을 건드리지 않고 다크모드를 도입합니다.
동작 원리
Tailwind v4 유틸리티는
var(--color-*)를 참조합니다. 그래서html.dark에서 색 변수만 덮어쓰면 전체가 전환됩니다.gray-400~900,black) → 밝게gray-50~200) → 어둡게surface/border/brand/blue(링크)→ 다크 값ink)·흰 텍스트(text-white)는 별도 토큰이라 그대로 유지유일한 충돌(
--color-white: 배경 vs 흰 글자)만bg-white → bg-surface(5곳)로 분리했습니다.구성
ThemeToggle: 헤더 버튼(해/달).html.dark+localStorage토글,themechange이벤트 발행layout<head>에 인라인 스크립트로 paint 전에 테마 결정 +<html suppressHydrationWarning>themechange구독)prefers-color-scheme검증
.dark에서만 오버라이드) — 스크린샷 확인theme: 토글·새로고침 유지) → 총 8개 통과(로컬 dev +CI=true프로덕션)범위 결정
github-dark로 빌드타임 고정이라 두 모드 모두 다크 코드블록 유지(라이트에서도 원래 다크였음 → 일관성 유지). 모드별 코드 테마 전환은 런타임 비용이 커 보류..dark한 블록의 토큰이라 쉽게 조정 가능.🤖 Generated with Claude Code