docs(read-diagrams): make crow's-foot ER diagrams dark-mode adaptive - #269
Open
dimitri-yatsenko wants to merge 1 commit into
Open
docs(read-diagrams): make crow's-foot ER diagrams dark-mode adaptive#269dimitri-yatsenko wants to merge 1 commit into
dimitri-yatsenko wants to merge 1 commit into
Conversation
The four er-*.svg crow's-foot diagrams (Mermaid erDiagram exports) had baked-in light-only colors and no prefers-color-scheme block, so they stayed light on a dark page — unlike the dj.Diagram SVGs, which adapt. Inject a @media (prefers-color-scheme: dark) block into each (same mechanism as the dj.Diagram outputs), remapping panels/rows/strokes/text to a brand-family dark palette (navy-tinted panels, grey rules, light text) per dj-brand V1.0. Light mode is unchanged.
dimitri-yatsenko
added
the
documentation
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.
Fixes the crow's-foot ER diagrams on how-to/read-diagrams not adapting to dark mode. (The
dj.Diagramoutputs on that page already adapt — this is only the four traditional-ERD comparison figures.)Cause
er-one-to-one.svg,er-one-to-many.svg,er-reference.svg,er-many-to-many.svgare MermaiderDiagramexports with baked-in light-only colors (fill:#eee/#f4f4f4/white,stroke:#999/#666, black text) and noprefers-color-schemeblock — so they stayed light on a dark page, while thedj.DiagramSVGs adapt because they carry that block.Fix
Inject a
@media (prefers-color-scheme: dark)block into each SVG — the same mechanism thedj.Diagramoutputs use — remapping every color the four files use (enumerated to be complete): entity panels and rows to navy-tinted darks, rules/relationship lines/crow's-foot markers to grey, text to light. Colors follow dj-brand V1.0 (navy structure, grey secondary) and match the siblingdj.Diagramdark theme. Light mode is byte-for-byte unchanged (block only appended).Note
Like the
dj.DiagramSVGs, this follows the OSprefers-color-scheme. The site's palette auto-selects the dark (slate) scheme under OS-dark, so they move together. A manual palette toggle that overrides the OS setting is a pre-existing limitation shared by all embedded SVGs here, out of scope for this fix.