Conversation
- 전체 32개 다이어그램에 단계 번호(1, 2, 3...) 추가 - 의미 기반 색상 코딩: 파란(정보), 보라(검증), 빨강(차단), 초록(성공), 노랑(경고), 주황(위험) - 다크모드 prefers-color-scheme 미디어쿼리 fallback 추가
|
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 improves the visual UI/UX of 32+ Mermaid flowchart SVG diagram images embedded in blog posts. It adds step-numbering prefixes (e.g., "1. Phishing Email") to diagram nodes, applies semantic color coding to node backgrounds (blue=info/process, purple=analysis, red=danger/block, green=success, yellow=warning, orange=important/risk), and adds a prefers-color-scheme: dark CSS media-query fallback in _includes/mermaid.html for Safari compatibility.
Changes:
- All mermaid SVG files regenerated with numbered step labels and semantic node background/stroke colors
- A subset of node labels were shortened to fit the new numbering prefix within node boxes
- Dark mode CSS fallback added to
_includes/mermaid.htmlvia@media (prefers-color-scheme: dark)targeting browsers where JS-drivendata-themeattribute may not yet be set
Reviewed changes
Copilot reviewed 1 out of 33 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
_includes/mermaid.html |
Adds prefers-color-scheme: dark fallback CSS for Safari dark mode |
*-mermaid-*.svg (multiple) |
Regenerated with step numbers and semantic color coding on all nodes |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| @media (prefers-color-scheme: dark) { | ||
| html:not([data-theme="light"]) img[src*="/mermaid/"] { | ||
| background: transparent; | ||
| border-color: rgba(255, 255, 255, 0.15); | ||
| filter: invert(1) hue-rotate(180deg); | ||
| } |
There was a problem hiding this comment.
The new prefers-color-scheme: dark media query applies the dark-mode invert filter when html does not have data-theme="light". However, when the user's system is in dark mode and they haven't explicitly chosen a theme (so data-theme is absent or set to "dark" by the JS theme toggle), the [data-theme="dark"] rule on line 17 already handles this case. The new rule is a safety net for Safari/system dark mode.
The problem is a potential double-application: if the JS theme switcher sets data-theme="dark" on <html>, both the [data-theme="dark"] rule (line 17) and the new @media (prefers-color-scheme: dark) rule (line 24) will match simultaneously. Although they apply identical filter values so the visual effect is the same, this selector conflict could cause unexpected specificity behaviour if the rules ever diverge (e.g. if the explicit [data-theme="dark"] rule is later changed to include additional styles).
To avoid this conflict and match only the true "unset/system dark" case, consider narrowing the media query selector to also exclude [data-theme="dark"], so the fallback only fires when no explicit theme is set:
html:not([data-theme="light"]):not([data-theme="dark"]) img[src*="/mermaid/"]
This way, the media-query fallback only applies when the data-theme attribute has not yet been set at all (e.g., before JavaScript runs on first paint in Safari), which is its stated purpose.
Summary
prefers-color-scheme미디어쿼리 fallback 추가 (Safari 호환)Test plan