Dark theme shouldn't be used with Markdown Preview Github Styling

[AndrewKvalheim]

When using:

• a dark VS Code theme
• mjbvz/vscode-github-markdown-preview-style
• mjbvz/vscode-markdown-mermaid

Mermaid charts are styled with illegible colors:

I'm not sure how you'd prefer to address this—a special case in theme detection, an override setting, or some user adjustment to markdown.styles?

[kityan]

+1

The only solution for this moment is:

1. Extract CSS rules for default theme from https://raw.githubusercontent.com/mjbvz/vscode-markdown-mermaid/master/page.bundle.js (look for text ./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./src/themes/default/index.scss)
2. Add !important to each rule
3. Save rules to file and load from markdown.styles in vscode

[DamianSuess]

FYI: The latest version of VSCode does blend a bit better. However, graph TD could use a little bit more padding on the | block | elements. None the less, nicely done!! Love the extension

In the example below, the text for Get money, One, Two, and Three touch the edges of the blocks. Just a few pixels of padding would help.

i.e.

graph TD
A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think}
C -->|One| D[Laptop]
C -->|Two| E[Phone]
C -->|Three| F[Car]

[codykonior]

The alt and opt text tags still show in illegible colours.

[bobatsar]

If you do a GANTT chart, the dates are not visible and the title is also really hard to read. Also the "Active" tasks can't be read.

[ex-nerd]

The issues with padding happens with the built-in markdown preview, too (not just bierner.github-markdown-preview). I lose 3-4 characters off the right of most words.

[kulak]

ER diagram looks pretty bad and forcing custom colors had some success.

I am expanding kityan's on advice that works:

2. Add `!important` to each rule

3. Save rules to file and load from `markdown.styles` in vscode

I recommend that you use live editor to find out which parameter works bad and change it with CSS !important.

Example:

.er.entityBox {
    fill:rgb(181, 181, 238) !important;
}

.er.entityLabel {
    stroke: black !important;
    font-size: 11px !important;
    font-weight: 90 !important;
    font-family: "trebuchet ms",verdana,arial,sans-serif !important;
    letter-spacing: 1px !important;
}

result:

[kulak]

The following combination seems to produce the best outcome for ER in dark mode:

erDiagram
    account {
        odd int
        even int
    }

.er.entityBox {
    fill:rgb(2, 2, 59) !important;
}

.er.entityLabel {
    /*stroke: white !important;*/
    font-size: 11px !important;
    font-weight: 90 !important;
    font-family: "trebuchet ms",verdana,arial,sans-serif !important;
    letter-spacing: 1px !important;
}

.er.attributeBoxOdd {
    fill: black !important;
}

.er.attributeBoxEven {
    fill: rgb(43, 41, 41) !important;
}

[yudigoh]

The best way to go about this is to add an extension settings to drive whether the user wanted to use dark or light option for the page.js

[dcousineau-godaddy]

I was going to file a separate issue but the colors in general need updating for Gantts as well (in both light and dark).

I don't know how much time I have to commit to this but I hope to be able to help and dig in later. Just documenting this for posterity

---

Github's dynamically rendered chart

gantt
    dateFormat  YYYY-MM-DD
    title       Adding GANTT diagram functionality to mermaid
    excludes    weekends
    %% (`excludes` accepts specific dates in YYYY-MM-DD format, days of the week ("sunday") or "weekends", but not the word "weekdays".)

    section A section
    Completed task            :done,    des1, 2014-01-06,2014-01-08
    Active task               :active,  des2, 2014-01-09, 3d
    Future task               :         des3, after des2, 5d
    Future task2              :         des4, after des3, 5d

    section Critical tasks
    Completed task in the critical line :crit, done, 2014-01-06,24h
    Implement parser and jison          :crit, done, after des1, 2d
    Create tests for parser             :crit, active, 3d
    Future task in critical line        :crit, 5d
    Create tests for renderer           :2d
    Add to mermaid                      :1d
    Functionality added                 :milestone, 2014-01-25, 0d

    section Documentation
    Describe gantt syntax               :active, a1, after des1, 3d
    Add gantt diagram to demo page      :after a1  , 20h
    Add another diagram to demo page    :doc1, after a1  , 48h

    section Last section
    Describe gantt syntax               :after doc1, 3d
    Add gantt diagram to demo page      :20h
    Add another diagram to demo page    :48h

[danielniccoli]

ERD's are illegible as well.

VSCode

GitHub (dark mode renders just as bad)

erDiagram
    CAR ||--o{ NAMED-DRIVER : allows
    CAR {
        string allowedDriver FK "The license of the allowed driver"
        string registrationNumber
        string make
        string model
    }
    PERSON ||--o{ NAMED-DRIVER : is
    PERSON {
        string driversLicense PK "The license #"
        string firstName
        string lastName
        int age
    }

Sample

erDiagram
    CAR ||--o{ NAMED-DRIVER : allows
    CAR {
        string allowedDriver FK "The license of the allowed driver"
        string registrationNumber
        string make
        string model
    }
    PERSON ||--o{ NAMED-DRIVER : is
    PERSON {
        string driversLicense PK "The license #"
        string firstName
        string lastName
        int age
    }

[TrueWill]

This would be a really valuable feature. C4 diagrams are difficult to read in dark mode, and none of the existing dark mode theme settings for this extension fix that. I'd have to change my VS theme to light, and that's not happening. 😉