Skip to content

Illegible text color in dark scheme for mermaid diagram #4517

@2bndy5

Description

@2bndy5

Contribution guidelines

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

  • ... the problem doesn't occur with the mkdocs or readthedocs themes
  • ... 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

If a picture is worth a thousand words, then please observe these snapshots from the mkdocs-material docs
image
But notice that the "post-it note" node is legible in the light scheme:
image

Expected behaviour

If the node's bg color is static, then I would expect the text color also be static and legible.

After playing with it in my browser (Firefox), I was able to achieve expected behavior by removing the .noteText > tspan specifier from

/* Sequence message, loop and note text */
.messageText,
.loopText > tspan,
.noteText > tspan {
font-family: var(--md-mermaid-font-family) !important;
fill: var(--md-mermaid-edge-color);
stroke: none;
}

Actual behaviour

See description

Steps to reproduce

Whatever the docs CI is doing.

Package versions

I'm merging updates from here (v8.5.6) into sphinx-immaterial and I noticed this in our rendered docs (local only for now). After checking with the docs here, I found the same problem.

Configuration

See this repo's mkdocs config.

System information

  • Operating system: Whatever the docs CI is using.
  • Browser: Firefox

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugIssue reports a bugresolvedIssue is resolved, yet unreleased if open

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions