d2
d2 copied to clipboard
terrastruct
dynamic dark theme based on CSS class selector
- introduce
--dark-theme-class: the CSS class to enable dark mode. When left unset prefers-color-scheme media query is used; - add test for combined light and dark themes (original test uses light theme in dark theme test, not clear why);
When D2-produced SVG file is embedded into some documentation/site framework where dark mode is controlled by CSS class, using prefers-color-scheme media query leads to inability to switch dark theme if needed. Writerside issue. Same for mkdocs and so on. IntelliJ D2 plugin also will use a new flag.
Media Query Level 5, where it is possible to use some class as a condition, is not supported by any modern browser.
https://github.com/terrastruct/d2/assets/350686/ddcb6fcb-b5ee-4637-8145-f230bcbadc51
- Certain websites add a CSS class to all images when dark mode is turned on.
The "dark" class is technically applied to the html or other top-level elements. See, for example, the Tailwind Documentation template — it applies class dark to html. (<html lang="en" class="h-full antialiased __variable_e66fe9 __variable_b436a8 dark" style="color-scheme: dark;">)
The downside is obviously that the image is no longer portable -- it's generated to be on a certain website. just have you specify two images
Writerside also supports this, enabling us to generate or provide two different static images, but I wouldn't say it is a downside.
When rendering SVGs into bitmap format, the user loses the ability to copy text from the diagrams. To me, this is a valuable feature. Additionally, we should also consider scaling — Retina screens, for example, require 2x resolution images to provide crisp, detailed visuals.
Cool and lastly, can you sign your PR please @develar ? We have it turned on as an organization-wide setting.
