mkdocs-material: Custom CSS is not reflected when dark mode is selected for some mermaid configurations.

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