search

Mermaid-Chart / vscode-mermaid-preview

Previews Mermaid diagrams
MIT License
148 stars 16 forks source link

Preview not compatible with dark themes #1

Closed taimila closed 8 years ago

taimila commented 8 years ago

Preview is not compatible with dark themes of VS Code. Arrows and texts should be in white on dark background.

See screenshot below:

mermaid_dark_theme
vstirbu commented 8 years ago

Thanks for trying the extension and opening this issue. I have overlooked that there might be an issue with dark themes... obviously I'm using light... ;)

The documentation does not mention how to detect programatically if the active theme is light or dark so that I can provide appropriate theme for each case. The API offers limited styling options targeted mainly at text content.

Investigating what is the best way to handle this situation...

taimila commented 8 years ago

One simple (but sub optimal) solution is to find a shade of grey that is visible against both backgrounds: dark and light. Or perhaps some other color.

Obviously, "the right way" would be to detect the vs theme and choose mermaid theme accordingly. Let's hope we can find a way to do that.

vstirbu commented 8 years ago

There is also the option to have an extension specific workspace setting that controls the stylesheet but that is not optimal either. I've asked a question on this topic on SO. Maybe someone will provide the right answer...

jrieken commented 8 years ago

@taimila fyi we are working on adding css-variables to the preview part such that you can work with those values. Also, you still have a chance to drop in some requirement ;-) For now, we have: color, background-color, font, and font-size

vstirbu commented 8 years ago

@jrieken any chance to get isLightTheme and getTheme exposed on the public API?

jrieken commented 8 years ago

I can think of a class we set on the document, ala <body class="lightTheme"> or <body class="darkTheme"> such that you can tailor you styles accordingly. I try to avoid exposing them in the API and adding an event for them.

vstirbu commented 8 years ago

We are talking about the body of the document that the extension is passing when vscode.previewHtml, right?

jrieken commented 8 years ago

correct

vstirbu commented 8 years ago

I guess this would enable fixing this issue. Any timeline for when this would be available in vscode?

jrieken commented 8 years ago

we'll have something end of May

vstirbu commented 8 years ago

Waiting the next vscode version and mermaid update to be published to npm to solve this issue...

vstirbu commented 8 years ago

@jrieken has this made it to 1.2 release? I wasn't able to spot it in the new features list... I might have missed it as the list was quite long... :)

vstirbu commented 8 years ago

this feature works in vscode 1.3 or newer.