Mermaid flowChart title can't see clearly in dark mode #7781
Description
Context
Mermaid flowchart title is too dark to see in dark mode.
Bug description
Mermaid allow write title above the flowchart
---
title: Hello World
---
flowchart LR
user --> website
---
title: Hello World
---
flowchart LR
user --> website
But in dark mode, this title will be unclearly to see
I tried customize CSS, but as #4582 shows, this is not easy.
Related links
- How to modify Mermaid CSS #4582
- Mermaid has title theme config in Flowchart Variables
- my document with this situation: https://evan361425.github.io/essay/confidential-computing/#%E8%99%9B%E6%93%AC%E8%A8%98%E6%86%B6%E9%AB%94%E7%AE%A1%E7%90%86
Reproduction
My palette config is
theme:
palette:
- media: "(prefers-color-scheme: light)"
scheme: default
primary: indigo
accent: light-blue
- media: "(prefers-color-scheme: dark)"
scheme: slate
primary: blue-grey
accent: deep orangeand extensions config is
markdown_extensions:
- pymdownx.highlight
- pymdownx.superfences:
custom_fences:
- name: mermaid
class: mermaid
format: !!python/name:pymdownx.superfences.fence_code_formatSteps to reproduce
- Create mermaid codeblock same as above
---
title: Hello World
---
flowchart LR
user --> website
- Build the site
- Toggle to dark mode
I'm not providing .zip file because it has 119 MB and I think it is not valuable for this situation, but I'll provide it if you need it!
Browser
Chrome
Before submitting
- I have read and followed the bug reporting guidelines.
- I have attached links to the documentation, and possibly related issues and discussions.
- I assure that I have removed all customizations before submitting this bug report.
- I have attached a .zip file with a minimal reproduction using the built-in info plugin.