Is there a way for the plantuml diagrams to honor the context style (light or dark)? #882
Replies: 4 comments 12 replies
-
|
There is an undocumented feature which is not exactly what you are looking for. When defining a color, you can use the This is currently only working for text font and must be done before SVG generation. I guess that your request is that the SVG itself changes, depending of the context. Do you have a simple and short example of such a SVG file ? Thanks. |
Beta Was this translation helpful? Give feedback.
-
|
Hello @arnaudroques Yes, you are correct. I am looking to obtain an SVG file that dynamically adapts to the style of the context. Here is an example based on html - Creating SVG that appears black in light mode and light in dark mode - Stack Overflow. <?xml version="1.0" standalone="no"?>
<svg width="4cm" height="4cm" viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg" version="1.1">
<style>
* {
fill:white;
stroke:yellow;
stroke-width:10
}
@media (prefers-color-scheme:dark) {
* {
fill:black;
stroke:blue;
stroke-width:30
}
}
</style>
<rect x="1" y="1" width="398" height="398" />
<path d="M 100 100 L 300 100 L 200 300 z" />
</svg>SVG Link: Png captured from Chrome (light mode): Png captured from Edge (dark mode): I hope it will be useful. Greetings, |
Beta Was this translation helpful? Give feedback.
-
|
I try your svg example in both firefox and chrome using a dark mode extension, and I could not see the blue (dark mode) version. Is this normal? It won't help for testing :-) |
Beta Was this translation helpful? Give feedback.
-
|
And if you could check if the following example is working: |
Beta Was this translation helpful? Give feedback.
-
|
Without any extension, the first SVG example works. Tested on Edge:
|
Beta Was this translation helpful? Give feedback.
-
You should not need any "dark mode extension". This is a setting present in the browser, and your system as a whole. It is likely that the dark mode extension is doing some kind of other CSS magic behind the scenes, but I cannot offer any other ideas without knowing more. And yes, on my system (Firefox, Windows 11) the SVG shows dark mode without fail. Windows 11 |
Beta Was this translation helpful? Give feedback.
-
|
This is really an alpha version but with last snapshot you can try: It's only working right now for background color, and probably only in rectangles. About the general background of the document ( Any idea anybody? Thanks! |
Beta Was this translation helpful? Give feedback.
-
|
@arnaudroques is there a way to disable new color-schema behaviour and generate SVG as it was generated before? Otherwise you cannot include SVG on a page that does not support dark mode |
Beta Was this translation helpful? Give feedback.
-
|
Ok, we will propose something. What tool does not support dark mode? Do you get an error message? Or is dark mode directive ignored and is the SVG rendered in dark ? Thanks! |
Beta Was this translation helpful? Give feedback.
-
|
Here is the situation: you have a website that doesn't have dark mode (ie. only black text on white background). You embed SVG with dark mode support (during day it has black text, at night white text). You embed this svg to your website. During the day you can see svg because it has black text on white background but during the night you cannot see svg because it has white text (from svg styles) on white background (from website styles). As I am thinking about it this dark mode in svg should be opt-in feature |
Beta Was this translation helpful? Give feedback.
-
|
Thanks for the feedback. |
Beta Was this translation helpful? Give feedback.
-
|
This discussion led us to future changes. I think it's time to slightly improve the default theme for PlantUML and to fully support dark mode. Since by default images generated by PlantUML are based on light mode, those images do not render nicely on those IDE. So, probably, the future default theme for PlantUML will be more color-neutral. (source here ) So if you are curious about the future, you can try: or this one: The generated SVG manages Any though? |
Beta Was this translation helpful? Give feedback.
-
|
@arnaudroques The "curious about the future" link in this comment thread no longer works. 
|
Beta Was this translation helpful? Give feedback.
-
|
Hello @mbucc, The future is currently now... Then just change, for new skin (by default now): skin plantumlAnd for old skin: skin roseEnjoy, |
Beta Was this translation helpful? Give feedback.
-
|
The produced svg fails to render using Batik. Dunno why. |
Beta Was this translation helpful? Give feedback.
-
|
Beta Was this translation helpful? Give feedback.
-
Hello
Sometimes diagrams are used by people who use one style or the other.
I wonder if there is a way to make the appearance of the diagram adapt to the context.
As I understand it this can be done for example in svg files.
I would appreciate comments and suggestions in this regard.
Regards,
Claudio
I 💙 PlantUML
Beta Was this translation helpful? Give feedback.
All reactions