Conversation
- /assets/images/diagrams/ 경로의 24개 SVG에 다크모드 filter 적용 - data-theme="dark" 및 prefers-color-scheme fallback 지원 - 이미 어두운 배경의 SVG (section-*.svg 등)는 제외
|
Deployment failed with the following error: Learn More: https://vercel.com/twodragon0s-projects?upgradeToPro=build-rate-limit |
There was a problem hiding this comment.
Pull request overview
This PR updates the site’s Mermaid include stylesheet to apply a dark-mode inversion filter to non-Mermaid diagram images under /assets/images/diagrams/, including a Safari/system dark-mode fallback via prefers-color-scheme.
Changes:
- Add
[data-theme="dark"]CSS rule to invert/diagrams/images in dark mode. - Add
prefers-color-scheme: darkfallback rule to invert/diagrams/images when no explicit light theme is set.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| html:not([data-theme="light"]) .post-content img[src*="/diagrams/"] { | ||
| filter: invert(1) hue-rotate(180deg); | ||
| } |
There was a problem hiding this comment.
현재 선택자 img[src*="/diagrams/"]는 SVG뿐 아니라 PNG(예: /assets/images/diagrams/mermaid_chart_1.png 또는 diagram_.png)까지 매칭될 수 있습니다. PR 설명/제목이 ‘SVG 다크모드’라면, 대상 파일 타입을 .svg로 제한하거나(또는 opt-in 클래스 기반으로) 의도치 않은 래스터 이미지까지 반전되지 않도록 범위를 줄이는 게 안전합니다.
| [data-theme="dark"] .post-content img[src*="/diagrams/"] { | ||
| filter: invert(1) hue-rotate(180deg); | ||
| } |
There was a problem hiding this comment.
다이어그램 다크모드 처리가 .post-content 내부로만 스코프되어 있는데, 레이아웃에 따라(예: _layouts/page.html의 .page-content) 동일한 /diagrams/ 이미지가 포함되면 다크모드 반전이 적용되지 않을 수 있습니다. 다이어그램이 포스트 외 페이지/문서에서도 사용된다면 .page-content 등도 포함하거나, 반전 대상 자체에 opt-in 클래스를 부여해 컨테이너 의존성을 없애는 쪽이 일관됩니다.
| /* Dark mode for diagram SVGs (light background, non-mermaid) */ | ||
| [data-theme="dark"] .post-content img[src*="/diagrams/"] { | ||
| filter: invert(1) hue-rotate(180deg); | ||
| } |
There was a problem hiding this comment.
/assets/images/diagrams/의 SVG들은 현재 다수(사실상 전부)가 배경을 #0d1117 같은 다크 팔레트로 직접 채우고 있습니다(예: assets/images/diagrams/2026-01-24-codex-agent-loop.svg). 이 상태에서 다크모드에 invert()를 일괄 적용하면 오히려 라이트 배경으로 뒤집히고 의미 있는 색상도 반전되어 의도와 반대로 보입니다. 다크모드 반전이 필요한 ‘라이트 배경 다이어그램’에만 적용되도록, 이미지에 opt-in 클래스/속성을 추가하거나(예: class로 구분) 파일명/경로로 대상을 분리한 뒤 그 대상에만 필터를 적용하는 방식으로 범위를 좁혀 주세요.
Summary
/assets/images/diagrams/경로의 24개 라이트 배경 SVG에 다크모드 filter 적용data-theme="dark"및prefers-color-schemeSafari fallback 지원Test plan