Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Preview not compatible with dark themes #1

Closed
taimila opened this issue May 16, 2016 · 13 comments
Closed

Preview not compatible with dark themes #1

taimila opened this issue May 16, 2016 · 13 comments

Comments

@taimila
Copy link

taimila commented May 16, 2016

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
Copy link
Collaborator

vstirbu commented May 16, 2016

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
Copy link
Author

taimila commented May 16, 2016

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
Copy link
Collaborator

vstirbu commented May 16, 2016

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
Copy link

jrieken commented May 17, 2016 •
edited
Loading

@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
Copy link
Collaborator

vstirbu commented May 17, 2016 •
edited
Loading

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

@jrieken
Copy link

jrieken commented May 17, 2016

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
Copy link
Collaborator

vstirbu commented May 17, 2016

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

@jrieken
Copy link

jrieken commented May 17, 2016

correct

@vstirbu
Copy link
Collaborator

vstirbu commented May 17, 2016

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

@jrieken
Copy link

jrieken commented May 17, 2016

we'll have something end of May

@vstirbu vstirbu mentioned this issue May 18, 2016
Merged
@vstirbu
Copy link
Collaborator

vstirbu commented May 19, 2016

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

@vstirbu
Copy link
Collaborator

vstirbu commented Jun 9, 2016

@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 vstirbu closed this as completed in e07e152 Jul 8, 2016
@vstirbu
Copy link
Collaborator

vstirbu commented Jul 8, 2016

this feature works in vscode 1.3 or newer.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@vstirbu @taimila @jrieken