light / dark mode themes

[xenoterracide]

I'm no designer, which is why I'm opening this. I'm using Github's new dark mode, (really everything's new dark mode) and using PlantUML SVG's. wondering if it'd be possible to have a style that looks reasonably decent in both light and dark mode on GitHub, this is not yet resolved. I guess I'd be ok with it having a grey or something background, not certain if it'd be possible to get the SVG background with rounded corners or anything like that.

[bschwarz]

For now, you can have a transparent background, and then choose colors for the text and elements to a color that looks good in both black and white background. I probably can tweak some existing themes to do that...will take a little bit...just cause it will be tedious.

Ultimately, it would be nice to have a variable passed in, so the theme file could automatically adjust. I tried to do this when I first started this, but I couldn't get it working...I think there was a bug. I can try again.

You can get rounded corners with any image, you just specify:
skinparam RoundCorner 10
as an example

I'll see if I can whip something up later today.

[xenoterracide]

Yeah, I just couldn't figure out colors that worked well with both, the specific problem being the association count numbers, because they don't seem to have a background or anything like that.

…

On Sun, Apr 4, 2021, 8:20 PM bschwarz ***@***.***> wrote: For now, you can have a transparent background, and then choose colors for the text and elements to a color that looks good in both black and white background. I probably can tweak some existing themes to do that...will take a little bit...just cause it will be tedious. Ultimately, it would be nice to have a variable passed in, so the theme file could automatically adjust. I tried to do this when I first started this, but I couldn't get it working...I think there was a bug. I can try again. You can get rounded corners with any image, you just specify: skinparam RoundCorner 10 as an example I'll see if I can whip something up later today. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#13 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAABLDIUXRPY7URTY33R5Y3THEF4FANCNFSM42J2VOXA> .

[bschwarz]

Sorry, what do you mean by "association count numbers"?

Also, what type of diagram are you working with?

[nikelkrome]

HI.
I think that @xenoterracide is talking about multiplicity and link name like in Class diagram. I have provide standard version and the same using spacelab them. Let me know your feedback.

[xenoterracide]

oops I meant to get back to this, and yes, talking about multiplicity and suchness

[bschwarz]

Ah ok. Same problem for sequence diagrams.

I think a long term solution would be to have the SVG output have class and/or id attributes, so you can style via CSS. Then if the user can choose between light and dark mode, then the CSS can change. Of course this is only for web.

As far picking colors that will go well with both, I can experiment (sorry, I've been busy lately). I know for sequence diagrams there is no skinparam for text color, so you would have to do explicitly color each text:
A --> B: <color=#777777>This is colored text for sequence

But that is kind of a pain. I am not sure if there is skinparam for class text.

I found this, which I will try...but you guys can give it a try too if you want:

http://trace.wisc.edu/contrast-ratio-examples/PassingMidColorSamples_4-5to1.htm

[bschwarz]

So, some good news. They are in the process of implementing a new feature in plantuml, where you can specify 2 colors, one for dark backgrounds and one for light backgrounds. I am not sure yet what happens if the background is transparent. I am not sure if this will help in all cases, but some cases.

It will have a syntax like:

document {
  BackGroundColor white
}
root {
  FontColor #?black:white
}

where document gives the document attributes. And the FontColor #?black:white specifies if the background is light, then use 'black'. If it is dark, use 'white'.

Not sure on the timeframe for this.