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.

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

Mermaid sequence diagram numbers unreadable in dark mode #4713

Closed
5 tasks done
alexhayes opened this issue Dec 7, 2022 · 1 comment · Fixed by #4628
Closed
5 tasks done

Mermaid sequence diagram numbers unreadable in dark mode #4713

alexhayes opened this issue Dec 7, 2022 · 1 comment · Fixed by #4628
Labels
bug Issue reports a bug resolved Issue is resolved, yet unreleased if open

Comments

@alexhayes
Copy link

alexhayes commented Dec 7, 2022

Contribution guidelines

I've found a bug and checked that ...

  • ... the problem doesn't occur with the mkdocs or readthedocs themes The diagrams don't work either with these things so not sure it's relevant.
  • ... the problem persists when all overrides are removed, i.e. custom_dir, extra_javascript and extra_css
  • ... the documentation does not mention anything about my problem
  • ... there are no open or closed issues that are related to my problem

Description

Mermaid's Sequence Diagram can support auto-numbering of sequence numbers.

This works as expected (thank-you!), however when we switch to a dark theme, while the diagram switches, the numbers within the sequences become unreadable.

Expected behaviour

The sequence numbers are readable when in dark mode.

Actual behaviour

The sequence numbers are not readable when in dark mode as they are white on white.

image

image

Steps to reproduce

  1. Apply the following diff against this repo

    diff --git a/docs/reference/diagrams.md b/docs/reference/diagrams.md
    index d6ce3a995..0521ef7cf 100644
    --- a/docs/reference/diagrams.md
    +++ b/docs/reference/diagrams.md
    @@ -91,6 +91,7 @@ between those actors:
     ```` markdown title="Sequence diagram"
     ``` mermaid
     sequenceDiagram
    +  autonumber
       Alice->>John: Hello John, how are you?
       loop Healthcheck
           John->>John: Fight against hypochondria
    @@ -106,6 +107,7 @@ sequenceDiagram
     
     ``` mermaid
     sequenceDiagram
    +  autonumber
       Alice->>John: Hello John, how are you?
       loop Healthcheck
           John->>John: Fight against hypochondria
  2. Go to http://localhost:8000/mkdocs-material/reference/diagrams/?h=mermaid#using-sequence-diagrams

  3. Toggle between light and dark mode.

Package versions

  • Python: Python 3.10.7
  • MkDocs: mkdocs, version 1.4.2 / ae7ed95
  • Material: Version: 8.5.11

Configuration

As per https://github.com/squidfunk/mkdocs-material/blob/master/mkdocs.yml

System information

  • Operating system: OSX
  • Browser: Chrome
@squidfunk squidfunk added the bug Issue reports a bug label Dec 7, 2022
@squidfunk
Copy link
Owner

squidfunk commented Dec 7, 2022

Thanks for reporting! Fixed in ee2c7ee. The fix will be released with the next beta of v9, tracked in #4714.

Bildschirmfoto 2022-12-07 um 21 18 47

Bildschirmfoto 2022-12-07 um 21 18 54

@squidfunk squidfunk added the resolved Issue is resolved, yet unreleased if open label Dec 7, 2022
@squidfunk squidfunk linked a pull request Dec 7, 2022 that will close this issue
25 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Issue reports a bug resolved Issue is resolved, yet unreleased if open
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants