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.

Sign up for GitHub

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

Jump to bottom

Black lines for namespaces in Class diagrams difficult to see in dark theme #5669

Open
heaths opened this issue Jul 26, 2024 · 7 comments · May be fixed by #6026
Open

Black lines for namespaces in Class diagrams difficult to see in dark theme #5669

heaths opened this issue Jul 26, 2024 · 7 comments · May be fixed by #6026
Labels
Status: Triage Needs to be verified, categorized, etc Type: Bug / Error Something isn't working or is incorrect

Comments

@heaths
Copy link

heaths commented Jul 26, 2024

Description

The black lines (strokes) in a class diagram for namespaces are very difficult to see in a dark theme. I've tried setting every plausible themeVariables value but nothing helps that, and in GitHub any <style> tags are encoded (not kept as-is) so I can't restyle them according to your docs. It would be great if these were the same stroke color, by default, as other rects.

Steps to reproduce

  1. Define a class diagram e.g.,

    classDiagram
namespace foo {
    class bar
}

  2. View in a dark theme.

Screenshots

See https://gist.github.com/heaths/4f22611744e97c5768bf34fe92894cd3:

image

Code Sample

https://mermaid.live/edit#pako:eNptVE2P2jAQ_SuRz8lKsMBCtNpD22tPlXqoIlWziZNYxB7vxGlLKf-9zgfgSQgS4Jfn9-bD47PIsZAiFXkDbftFQUWgM2NAy9ZCLqMSsYjOmYn8M3Cikjrl2hD5JSvp4L2RHr1khm0fyFwArB2odwQJTMUh7RFkiEMNDjnrHYz_LG3vEXFri26hkSMZxpHA3wMRuqUHGKWhmRlo0D0YQiStU7OErXwgOO2dFeujA6dyXj8uVne-WAxpPzpFJHkcFdpa0oM8Rgdu-7uGWcgFNrZW3EervAbZ_PTCjV0qXzPn0q2BI5cuCSve6o7co9M04bOSj0H0J6hBVniw_QuehAEnG85rpEepwIVd3yXuVcwCzYFPQqnamoWA-fGaxtimKElwkun7OCxHlf57WF772bOi1yR5mwiBwOgTAJNRgFzLHEC3sk7Y678kWfQw4F8HNYBukxpg96EKwNvUBFnOkWl6RSy0JA2q8PfQUO5MuFpqmYnU_y2AjpmIA_w7kBqvG0-Y-pMJS34e6fQJqZD0GRukcb-GShoHmeiJvhMX7wedw28nk4vUUSdjQdhVtUhLP35-1dnCn5LpMryhslAO6et0XfY_sbBgfiDeOX4t0rP4I9LV4engn-3z_nl72O-221icRLperZ4O6_Vht97sd5uXzcv6Eou_g8Lq8h9NLO0H

Setup

  • Mermaid version: 10.9.1
  • Browser and Version: Edge 128.0.2730.0 (Official build) dev (64-bit)

Suggested Solutions

Make the namespace line the same color as class lines.

Additional Context

GitHub seems to use a darker theme than the online editor, but even in the latter the black lines are hard to see. If the dark theme had more visible lines it wouldn't matter in either host.
@heaths heaths added Status: Triage Needs to be verified, categorized, etc Type: Bug / Error Something isn't working or is incorrect labels Jul 26, 2024
@heaths
Copy link
Author

heaths commented Jul 26, 2024 •
edited
Loading

Using F12 tools I see that namespaces use the cluster class but none of the documented cluster* theme variables work e.g.,

---
config:
    theme: base
    themeVariables:
        clusterBkg: magenta
        clusterBorder: magenta
---

I've tried every theme variable even for other charts to no avail. Seems like a classDiagram's namespace border and background just isn't themeable without having to use CSS, which doesn't work on GitHub.

@jacbz
Copy link

jacbz commented Nov 1, 2024 •
edited
Loading

Still an issue in the new v3 unified renderer.

@yari-dewalt Previously this was possible to override by CSS. Now, the namespace's stroke gets !important so even that is not possible anymore. Is there some other way to set the color? Thanks!

@heaths
Copy link
Author

heaths commented Nov 5, 2024

I wanted to add that CSS on GitHub doesn't work but seemingly only for Safari. See https://github.com/heaths/ordinal-rs/blob/main/README.md#performance in Edge (source: https://github.com/heaths/ordinal-rs/blob/main/docs/suffix_violin_plot.svg) (white text, polylines) vs. Safari (black text, polylines).

Still, if the theming was correct I wouldn't need to resort to CSS, which appears to have its own problems...and I tried several ways of inlining the CSS, all to no avail.

@yari-dewalt yari-dewalt linked a pull request Nov 6, 2024 that will close this issue
Open
4 tasks
@yari-dewalt
Copy link
Collaborator

Just created a fix for this issue where the theming will work as expected #6026. @jacbz As far as I know and have tested there aren't any other ways possible for now due to what you said with the !important keyword. This was a result of how the new rendering method applies styles. Once this fix is in we won't have to resort to using CSS.

@heaths
Copy link
Author

heaths commented Nov 6, 2024

@yari-dewalt thanks! Any guess as to how long after the fix is merged - and perhaps a release created - would GitHub pick it up? Does this project have a contact to alert them of the fix or do they pick up regular updates?

@yari-dewalt
Copy link
Collaborator

@heaths From what I've seen GitHub typically picks up new releases about a month after they are released. I'm not aware of any contact, so I assume they just pick up regular updates but I can ask around!

@heaths
Copy link
Author

heaths commented Nov 7, 2024

A month or so isn't so bad. This isn't critical. I just figured if it was, like, a year or "with cause" we could reach out. I know a few people there as well that could probably forward on a request to update to the right team.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Status: Triage Needs to be verified, categorized, etc Type: Bug / Error Something isn't working or is incorrect
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Fix: Class diagram namespaces black lines, not responding to theme variables yari-dewalt/mermaid
3 participants
@heaths @jacbz @yari-dewalt