mermaid-js / mermaid-cli

Command line tool for the Mermaid library
MIT License
2.23k stars 210 forks source link

Frontformatter config is not respected #621

Closed TeaDrinkingProgrammer closed 7 months ago

TeaDrinkingProgrammer commented 7 months ago

Describe the bug The CLI does not respect the use of a config file

To Reproduce

  1. Make a repro.mmd file with the following contents:
    
    ---
    title: Test
    config:
    theme: dark
    ---
    mindmap
    root((ML5))
    Hello world

3. Execute the following command in the folder: `mmdc -i ./repro.mmd -o output.png`

**Expected behavior**
Resulting image should have the configuration applied, but has a light theme instead of a dark theme.

**Screenshots**
Resulting image:
![output](https://github.com/mermaid-js/mermaid-cli/assets/20358521/593af0f0-0ed2-470d-9553-873393dbd0cc)

**Desktop (please complete the following information):**

- OS: Fedora 39 KDE
- Browser N.A
- Version 10.6.1

Related to #620
aloisklink commented 7 months ago

Hi @TeaDrinkingProgrammer, I'm a bit confused by your bug report.

The screenshot you're showing shows dark theme working correctly. I've also tested this locally on commit f0a90b86392d0fc047db78ad169db015dc990e0d and I'm also getting the same results:

Dark mode

The following diagram outputs the same PNG that you described:

```mermaid
---
title: Test
config:
  theme: dark
---
mindmap
  root((ML5))
    Hello world

![output](https://github.com/mermaid-js/mermaid-cli/assets/19716675/f7a8adb2-54a0-4950-9285-fc91746d1d60)

#### Changing `theme` to `theme: forest`

````markdown
```mermaid
---
title: Test
config:
  theme: forest
---
mindmap
  root((ML5))
    Hello world

![output](https://github.com/mermaid-js/mermaid-cli/assets/19716675/60714fa2-6dc5-49e9-9954-37d5d14eee21)

#### Changing `theme` to `theme: light`

````markdown
```mermaid
---
title: Test
config:
  theme: light
---
mindmap
  root((ML5))
    Hello world


![output](https://github.com/mermaid-js/mermaid-cli/assets/19716675/2117db07-063a-4fea-8bc0-6497d570dd7e)
TeaDrinkingProgrammer commented 7 months ago

I figured out the confusion. In things like OSes and browsers, dark theme means everything is dark, including the background. Now I have discovered that dark theme only means the nodes themselves are dark. I understand that this is clear from a developer point of view but I missed that you also need to set dark mode. I will make a mr for the documentation so that the line for dark theme links to the dark mode API config. Thank you for your help.

aloisklink commented 7 months ago

No worries! Dark theme and dark mode do sound very similar! I guess it only didn't occur to me because I normally only use the forest theme :)