feat: support dark mode #44
Conversation
- generate 2 versions of each diagram, one light and one dark - hide the dark image by default using css - javascript will detect user pref changes and switch images accordingly
- fixed incorrect parameter in example
- use the svg background using the `(--md-default-bg-color)` var
|
That's fantastic @OnceUponALoop! I thought about similar implementation myself recently. Haven't you tried to run the dark theme with C4 diagrams? I'll take a look more detailed a bit later this week. Anyway, great job and thank you for the contribution 🎉 |
|
@MikhailKravets thank you for the awesome well structured project, it was easy to deal with 👍 I was curious about the C4 diagrams, so I tested it out and i'm happy to report it seems to work with no issue. I think ultimately the support will depend on the theme chosen, I know some themes support dark mode and some don't 🤷 C4 Diagrams ExampleYou can find the updated develop branch with C4 Diagram example.
|
- fixed mismatch between readme and behavior
- remove duplicate return
- Use separate light and dark PlantUML instances - Add output_format parameter to PlantUML class - Remove dark_mode flag from translate and request methods - Simplify URL construction in PlantUML class - Update docstrings to reflect changes (cherry picked from commit 09358e1)
- remove intermediate list creation `diagram_contents` - iteration simplified, no placeholder var `_` - pass diagram values directly to translate method
- update fixtures: (diagram, None) tuples - assert light/dark puml configs - extend on_env test: light/dark svg validation
- add auto_dark feature tests - expand on_post_page scenario coverage - implement on_post_build tests - add _replace method tests - improve existing test assertions
- add assertions for num_workers validation - add comments to explain test behavior - fix tuple type annotation
- standardize quotation marks - remove unused imports and variables - adjust type annotations and docstrings
|
All the formatting changes are in the last commit, only after pushing did I realize I should have probably checked with you first on such a big style-only change. Please let me know if that's ok and I can roll it back. To make the review less painful you can review the code changes with the commit filter and then review it independently |
|
Hi @OnceUponALoop, yes, this looks nice! Thank you for the contribution. I'll put now everything together for a new release 🎉 |
Added support for dark mode with the
auto_darkoption to address #33When this option is set the module will generate a second copy of the diagram in dark mode using the
/dsvgserver option.In order to dynamically switch the image choice the module include a javascript file (
mkdocs_puml/static/dark.js).I just submitted a similar PR to the mkdocs_build_plantuml but I have to say, it was a lot easier to do in this project 👍
Some things I would focus on when reviewing:
dark.js
I'm not a webdev by any means so it might need some love.
puml.py/_stylize_svg()Now uses a css var lookup to set the background instead of fixing it to
#ffffExample Output
Here's an example of the output - I used the 2 cards to show they system state and the user preference so it's easier to follow along with the transition. You can find the whole example in my develop branch.