Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Do you have plans to support dark mode in the plantuml-server such as /dsvg/ and /dnpg/? #314

Open
binge6 opened this issue Sep 23, 2023 · 9 comments
Labels
feature request New feature or request

Comments

@binge6
Copy link

binge6 commented Sep 23, 2023

No description provided.

@HeinrichAD
Copy link
Collaborator

Hi. Not as far as I know.

One of the reasons is: what theme should be used as default dark theme?

You can still use !theme <theme-name> to select your theme inside your plantuml code or use e.g. the PLANTUML_CONFIG_FILE environment variable to render all diagrams with a special theme by default.

With the second option you could also build something similar like /dpng using Nginx and two plantuml-server docker container. But maybe not the best idea 😅.

Here is a webpage with examples about different plantuml themes:
https://the-lum.github.io/puml-themes-gallery/

@The-Lum
Copy link
Collaborator

The-Lum commented Sep 24, 2023

Hi all,

@HeinrichAD:

One of the reasons is: what theme should be used as default dark theme?

FYI here are some element about dark mode:

Then a new question will be:

  • How to propagate the -darkmode flag to the plantuml-server?

If that can help the topic,
Regards,
Th.

@HeinrichAD
Copy link
Collaborator

HeinrichAD commented Sep 24, 2023

@The-Lum nice catch. Thank you.

Edit: In this case as a quick fix one could probably use the PLANTUML_PROPERTY_FILE environment variable. But you would force the complete server to always use the dark mode flag.

@HeinrichAD HeinrichAD added the feature request New feature or request label Sep 24, 2023
@arnaudroques
Copy link
Contributor

  • How to propagate the -darkmode flag to the plantuml-server?

Maybe I did not get the point, but to generate an image in "Dark Mode", you have to use the appropriate FileFormatOption.
Using .withColorMapper(ColorMapper.DARK_MODE)) method will switch you to Dark Mode.

For example, if you want to generate some PNG image, you will have:
new FileFormatOption(FileFormat.PNG).withColorMapper(ColorMapper.DARK_MODE))

So you just have to see if the requested URL starts by /dsvg/ or /dpng/ and if it's the case, call this .withColorMapper(ColorMapper.DARK_MODE)) method.

Concerning the theme, as @The-Lum said, you have to use @media (prefers-color-scheme:dark) in the theme definition, but that's only working for style, not for skinparam.

Hope this help!

@VladimirAlexiev
Copy link

@binge6 Do you mind describing exactly what you need?
The official server has a button "dark mode" that switches to /duml, and then the links become /dsvg and /dpng.

@nothingHereReally
Copy link

I don't know what /dsvg and /dpng is on dark mode (but I know svg and png files are),

the thing I did to get dark mode is just getting Dark Reader a web browser extension or addon that I use on firefox, due to plantuml-server just runs on a browser by running mvn jetty:run then going to firefox, it looks like this with Dark Reader
file

@HeinrichAD
Copy link
Collaborator

As far as I know, the official server is close source and not this project which is open source and community driven.

So, if a dark theme support is desired, somebody would need to add this feature. In general, it should not be that much work.

@nothingHereReally
Copy link

@VladimirAlexiev , sorry about that, HAHAHA, dark mode really does exist, just tried it, works fine
file

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
feature request New feature or request
Projects
None yet
Development

No branches or pull requests

6 participants