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

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

Closed
5 tasks done
btbf opened this issue Mar 4, 2022 · 18 comments
Closed
5 tasks done
Labels
change request Issue requests a new feature or improvement resolved Issue is resolved, yet unreleased if open

Comments

@btbf
Copy link

btbf commented Mar 4, 2022

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

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

marmaid

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
Copy link
Owner

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?

@squidfunk squidfunk added the needs input Issue needs further input by the reporter label Mar 4, 2022
@btbf
Copy link
Author

btbf commented Mar 4, 2022

Added markdown code.

@btbf
Copy link
Author

btbf commented Mar 4, 2022

image

@btbf
Copy link
Author

btbf commented Mar 4, 2022

image

@squidfunk squidfunk added change request Issue requests a new feature or improvement and removed needs input Issue needs further input by the reporter labels Mar 4, 2022
@pawamoy
Copy link
Sponsor Contributor

pawamoy commented Mar 5, 2022

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

@squidfunk
Copy link
Owner

Fixed by @pawamoy in #3657. Thanks!

@squidfunk squidfunk added the resolved Issue is resolved, yet unreleased if open label Mar 6, 2022
@squidfunk
Copy link
Owner

Released as part of 8.2.5.

@btbf
Copy link
Author

btbf commented Mar 6, 2022

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
Copy link
Sponsor Contributor

pawamoy commented Mar 6, 2022

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

@btbf
Copy link
Author

btbf commented Mar 6, 2022

@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
Copy link
Sponsor Contributor

pawamoy commented Mar 6, 2022

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

@btbf
Copy link
Author

btbf commented Mar 6, 2022

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

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

Is this not good enough?

@pawamoy
Copy link
Sponsor Contributor

pawamoy commented Mar 6, 2022

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

@btbf
Copy link
Author

btbf commented Mar 6, 2022

I fixed it, but it didn't change.

@pawamoy
Copy link
Sponsor Contributor

pawamoy commented Mar 6, 2022

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

@btbf
Copy link
Author

btbf commented Mar 6, 2022

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
Copy link
Author

btbf commented Mar 6, 2022

This issue is not yet closed

@squidfunk
Copy link
Owner

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
change request Issue requests a new feature or improvement resolved Issue is resolved, yet unreleased if open
Projects
None yet
Development

No branches or pull requests

3 participants