Mermaid diagrams rendering to dark in dark mode (8.3.0 regression)

[mbelangergit]

Contribution guidelines

• I've read the contribution guidelines and wholeheartedly agree

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

When upgrading form 8.2.16 to 8.3.2, I noticed that the Mermaid diagrams fonts and colors are not following the theme fonts and colors as before.

With 8.2.16:

With 8.3.2:

Expected behaviour

The 8.2 behavior is expected.

Actual behaviour

The fonts and colors of diagrams are not consistent with the theme.

Steps to reproduce

1. Create a new site in 8.3.2
2. Enable Mermaid diagrams in mkdocs.yml
3. Add a Mermaid diagram in Markdown

``` mermaid
classDiagram
    class BankAccount
    BankAccount : +String owner
    BankAccount : +Bigdecimal balance
    BankAccount : +deposit(amount)
    BankAccount : +withdrawl(amount)
```

Package versions

• Python: 3.10.4
• MkDocs: 1.3.0
• Material: 8.3.2

Configuration

site_name: My Docs
theme:
  name: material
  palette:
    scheme: slate
    primary: indigo
markdown_extensions:
  - pymdownx.superfences:
      custom_fences:
        - name: mermaid
          class: mermaid
          format: !!python/name:pymdownx.superfences.fence_code_format

System information

• Operating system: Windows 10
• Browser: Chrome

[squidfunk]

Thanks for reporting and congratulations on issue #4000! This is very likely a regression that got introduced due to the drop in specificity on the dark mode selectors. I'll look into it asap.

[squidfunk]

Fixed in 26010be.

[squidfunk]

The fix was released as part of 8.3.3.

[mbelangergit]

Again, a fantastic response time!

Thanks!

[dkadrios]

I'm not sure if this regressed again or if titles specifically were overlooked. It might warrant its own ticket, but I notice that titles still have the default styling when in dark mode, making them difficult to read

[squidfunk]

If Mermaid.js changes something upstream, we might need to adapt. Regardless, we're going to need a new issue with a minimal reproduction to investigate. Please also carefully study our bug reporting process.