Fix contrast for mermaid diagram elements in dark-mode

[vidbina]

Issue

When switching to dark mode on some diagram types, the backgrounds do not change to offer sufficient contrast to be able to read the text within some elements of those diagrams.

Relevant or related issues

Noticed no recent open issues for Mermaid diagrams other than #7047 (which was just a listing of the mermaid websites) and a bunch of older issues https://github.com/darkreader/darkreader/issues?q=mermaid that didn't seem too relevant.

Solution

Attempted to define generally applicable fixes for mermaid diagrams embedded in pages. Since mermaid diagrams can appear on a variety of pages, I reckoned that the top of the dynamic-theme-fixes.config file was a correct place for the changes. These fixes should be general enough but let me know if this design choice is not in line with the project design constraints/goals.

Changes

• for mermaid controls: set the colors to the darkreader bg and fg values (mermaid adds navigation controls on some embedded diagrams)
• for ER: set fills on different element types
• for Gantt: set the task fill color to the darkreader selection bg
• more generally, but likely just for Flow diagrams: set fill for rects and polygons

Testing

Tested on:

• Mermaid Live Editor (https://mermaid-js.github.io/mermaid-live-editor)
• mermaid in Markdown or Orgdown on GitHub
• mermaid in Markdown or Orgdown on GitLab (see some docs at https://about.gitlab.com/handbook/tools-and-tips/mermaid/)

Examples

For the sake of completeness, I repeat some of the diagrams (from the live editor samples) that were causing issues for me in dark mode in Chromium. These show show up in GitHub with some elements having light backgrounds and light text, rendering the diagrams more-or-less unreadable (poor contrast between bg and text).

Flowcharts

flowchart TD
    A[Christmas] -->|Get money| B(Go shopping)
    B --> C{Let me think}
    C -->|One| D[Laptop]
    C -->|Two| E[iPhone]
    C -->|Three| F[fa:fa-car Car]

Loading

Problematic diagram

](url)

Fixed diagram

ER Diagrams

erDiagram
    CUSTOMER }|..|{ DELIVERY-ADDRESS : has
    CUSTOMER ||--o{ ORDER : places
    CUSTOMER ||--o{ INVOICE : "liable for"
    DELIVERY-ADDRESS ||--o{ ORDER : receives
    INVOICE ||--|{ ORDER : covers
    ORDER ||--|{ ORDER-ITEM : includes
    PRODUCT-CATEGORY ||--|{ PRODUCT : contains
    PRODUCT ||--o{ ORDER-ITEM : "ordered in"

Loading

Problematic diagram

Fixed diagram

Gantt Diagrams

gantt
    title A Gantt Diagram
    dateFormat  YYYY-MM-DD
    section Section
    A task           :a1, 2014-01-01, 30d
    Another task     :after a1  , 20d
    section Another
    Task in sec      :2014-01-12  , 12d
    another task      : 24d

Loading

Problematic diagram

Fixed diagram

Sequence Diagram

sequenceDiagram
    Alice->>+John: Hello John, how are you?
    Alice->>+John: John, can you hear me?
    John-->>-Alice: Hi Alice, I can hear you!
    John-->>-Alice: I feel great!

Loading

Problematic diagram

Solved diagram

[vidbina]

In GitHub, the mermaid diagrams is classes with mermaid and have some behavior that I didn't have on the Live Mermaid editor, so I provided some workarounds that these diagrams at least appear in a legible state on GitHub as well. I have edited my first message to outline the general mermaid sequence diagram points but am providing separate examples of the GitHub-only issue for which the commit is on the way.

Sequence Diagram

sequenceDiagram
    Alice->>+John: Hello John, how are you?
    Alice->>+John: John, can you hear me?
    John-->>-Alice: Hi Alice, I can hear you!
    John-->>-Alice: I feel great!

Loading

Problematic diagram

Solved diagram