mkdocs_puml icon indicating copy to clipboard operation
mkdocs_puml copied to clipboard

feat: support dark mode

Open OnceUponALoop opened this issue 1 year ago • 2 comments

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 transparent directive to the puml exmaple diagrams.

output

OnceUponALoop avatar Jul 22 '24 04:07 OnceUponALoop

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 avatar Jul 22 '24 08:07 MikhailKravets

@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.

output

OnceUponALoop avatar Jul 22 '24 12:07 OnceUponALoop

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

OnceUponALoop avatar Sep 06 '24 21:09 OnceUponALoop

Hi @OnceUponALoop, yes, this looks nice! Thank you for the contribution. I'll put now everything together for a new release 🎉

MikhailKravets avatar Sep 12 '24 07:09 MikhailKravets