search

mermaid-js / mermaid

Generation of diagrams like flowcharts or sequence diagrams from text in a similar manner as markdown
https://mermaid.js.org
MIT License
72.05k stars 6.54k forks source link

Few Mermaid diagram rendering issues in Windows High Contrast Black mode #1003

Closed sulabh-msft closed 3 years ago

sulabh-msft commented 5 years ago

Describe the bug Certain part of mermaid diagrams are not visible in Windows High Contrast Black mode Edge

To Reproduce Steps to reproduce the behavior: ( Windows -> High Contrast Black mode and then open edge browser)

  1. Go to Gantt Chart in Windows Edge browser and High Contrast black mode

Or

  1. Go to Sequence Diagram in Windows Edge browser and High Contrast black mode

Or

  1. Go to FlowChart in Windows Edge browser and High Contrast black mode

Expected behavior a. Gantt Chart

  1. The color contrast of the text present should be equal or greater than 7:1
  2. The heading of the image as well as the text below should be seen in high contrast black theme.

b. Sequence Diagram

  1. Arrows message text/ line should be visible in high contrast black ( contrast ratio > 7:1)

c. FlowChart

  1. Arrows should be visible in high contrast black ( contrast ratio > 7:1)

Actual behavior a. Gantt 1: The color contrast of the text in Gantt Chart in high contrast black is below 7:1 2: The heading of the image as well as the text below cannot be seen in high contrast black theme.

b. Sequence diagram

  1. Color contrast ratio for the messageText /line is less than 7:1

FlowChart

  1. The color contrast for the arrow in high contrast black is below 7:1

Screenshots Gantt Chart ( High Contrast black -> Edge browser) image

Sequence Diagram ( High Contrast black -> Edge browser) image

FlowChart image

Desktop (please complete the following information):

Note: Similar issue is observed in Firefox as well ( in high contrast black mode

Mermaid version: 8.2.3

chrismoran-bkt commented 4 years ago

This has been (at least partially) addressed with my directives pr #1458 With a small change to the dark theme css (see what I did in the sequence diagram section and replicate it for other graph types to fix the colors) the fix can be propagated to other graph types.

jgreywolf commented 3 years ago

@sulabh-msft Can you confirm is this is still an issue for you, and if the PR from @chrismoran-bkt addressed this - and if only in part what is still missing. (if there is still a part that is not working quite right, we should open a new issue for that one)

jgreywolf commented 3 years ago

I will be closing this issue within 30 days if I do not hear back from anyone that this is still an issue (i.e.: the PR mentioned above did not resolve the issue)