mkdocs_puml
mkdocs_puml copied to clipboard
feat: support dark mode
Added support for dark mode with the auto_dark option to address #33
When this option is set the module will generate a second copy of the diagram in dark mode using the /dsvg server 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 :+1:
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#ffff
Example 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.
Note: Example include addition of the
skinparam backgroundColor transparentdirective to the puml exmaple diagrams.
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 :+1:
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 :shrug:
C4 Diagrams Example
You can find the updated develop branch with C4 Diagram example.
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 🎉