PlantUML text colors unreadable on dark backgrounds

[Redsandro]

Current behavior

Choosing a dark theme is popular. These are the most common reasons for choosing a dark theme:

• Cooler looking
• Easier on the eyes
• More battery friendly for OLED displays

Boostnote was very aware of this, and you can choose a dark theme:

The problem is that PlantUML, which has black borders and black text, now becomes unreadable:

Expected behavior

Colors are automatically adjusted to a more fitting and contrasting palette for dark themes.

Steps to reproduce

1. Select a dark theme.
2. Enter some PlantUML in a note.

Environment

• Version : 11.9
• OS Version and name : Ubuntu 18.04

[IssueHuntBot]

@boostio funded this issue with $10. See it on IssueHunt

[simosdev]

I realize this is not a real fix for this, but for time being you can use plantuml skinparam to change the background to be able to read the text. It seems Boostnote makes white background transparent which causes issues with dark themes.

You can use skinparam backgroundColor #FFFFFE or similar to get almost white background. Another quick one if you need something more dark is skinparam monochrome reverse.

You could probably define custom colors for all the elements, but the definitions depends on type a diagram, so not really feasible to do that manually everytime (you could copy-paste though). Probably the real implementation to fix this would define hidden defaults for each Boostnote interface theme, but still allow user customization with skinparam if needed.

[Lythenas]

I had the same issue when embedding svgs. Black text (or lines) are not readable in dark themes.

As a fix I added

img {
  background-color: #fff;
}

to the custom css setting.

That also worked for plantuml diagrams because they are just pngs with transparent background.

[pradeepgangwar]

Is this issue still open to solve? @Redsandro

[Flexo013]

@pradeepgangwar You can try this with the latest version (0.13.0) and check the current behavior. If the behavior is still the same, then yes the issue is still open to solve. If the behavior is already different/fixed, then you can comment here so we can close this issue.

[MiloTodt]

As a temporary measure, if you'd like you can add

skinparam monochrome reverse
skinparam backgroundColor transparent

inside of your UML diagram.