Custom CSS is not reflected when dark mode is selected for some mermaid configurations.

[btbf]

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

I am using flowchart BT on mermaid and the CSS is not reflected when I set it to dark mode.
In the case of graph LR, it switches.

Expected behaviour

I want to apply the style specified in extra.css.

Actual behaviour

mermaid
    flowchart BT
        a2[リレー1] & a3[リレー2] <-- 開放FW --> a4[カルダノネットワーク]
        subgraph ide1[プール]
            subgraph リレーIP指定FW
                a1[BP]
            end
                a1[BP] <--> a2[リレー1] & a3[リレー2]
        end
        c1[PC] --> ide1
        c1[PC] --> エアギャップ

 mermaid
    graph LR
        A[エアギャップ] -->|tx.signed| B[BP];

Steps to reproduce

N/A

Package versions

• Python: python --version
  Python 3.8
• MkDocs: mkdocs --version
  mkdocs, version 1.2.3
• Material: pip show mkdocs-material | grep -E ^Version
  Version: 8.2.4+insiders.4.10.1

Configuration

markdown_extensions:
  - pymdownx.superfences:
      custom_fences:
        - name: mermaid
          class: mermaid
          format: !!python/name:pymdownx.superfences.fence_code_format
extra_css:
  - stylesheets/extra.css

System information

• Operating system: ... Windows11
• Browser: ...Chrome

[squidfunk]

Thanks for reporting. When reporting something like this please always share the Markdown you are using to render what is seen in the screenshot. Otherwise, I'm not able to reproduce it.

@pawamoy is this related to #3657?

[btbf]

Added markdown code.

[btbf]

[btbf]

[pawamoy]

@squidfunk that definitely looks like the same issue! Flowchart clusters labels.

[squidfunk]

Fixed by @pawamoy in #3657. Thanks!

[squidfunk]

Released as part of 8.2.5.

[btbf]

I made an update, but it didn't improve.

$ pip show mkdocs-material | grep -E ^Version
Version: 8.2.5+insiders.4.11.0

[pawamoy]

@btbf are you trying to apply custom styling to Mermaid diagrams through that extra.css file? Can we see its contents?

[btbf]

@btbf are you trying to apply custom styling to Mermaid diagrams through that extra.css file? Can we see its contents?

Yes,

http://49.12.225.142:8000/setup/0-start-guide/

[pawamoy]

I mean, what's in your stylesheets/extra.css file? Try adding !important to your CSS rules? 👐

[btbf]

http://49.12.225.142:8000/stylesheets/extra.css

.label text{
    fill: :var(--md-mermaid-font-color) !important;
}

Is this not good enough?

[pawamoy]

I'm no expert but I believe it should be var and not :var.

[btbf]

I fixed it, but it didn't change.

[pawamoy]

Have a look at #3618 and #3657
@squidfunk explains how to update the Mermaid styling. I won't be able to help further!

[btbf]

This phenomenon occurs when you specify the following in mkdocs.yml.

  - pymdownx.superfences:
      custom_fences:
        - name: mermaid
          class: mermaid
          format: !!python/name:pymdownx.superfences.fence_code_format

In the following cases, css is applied normally, But js doesn't apply until refresh browser.

  - pymdownx.superfences:
      custom_fences:
        - name: mermaid
          class: mermaid
          format: !!python/name:pymdownx.superfences.fence_div_format

[btbf]

This issue is not yet closed

[squidfunk]

You cannot apply custom styles via extra_css in mkdocs.yml to override styles for specific nodes in Mermaid.js. If you want to do that, you would have to fork the theme, because the CSS for Mermaid.js needs to be provided explicitly when Mermaid.js is initializing. It must be inlined into the JavaScript, or Mermaid.js will not work locally when viewed via file:// (which we fixed in #3560) .

If you fork the theme, you can add adjust the styles in this file, but you will need to rebuild/compile the theme.