-
-
Notifications
You must be signed in to change notification settings - Fork 6.7k
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.
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
Text colors are not correct in VSCODE #570
Comments
Mermaid has a dark theme which is suitable for dark backgrounds. https://unpkg.com/mermaid@7.0.0/dist/mermaid.dark.css Not sure who developed the VS Code extension. You can tell the author to add a feature to switch mermaid theme. |
I'm the author of the VSCode mermaid markdown extension. We do use the which overrides the dark css' |
Things have changed since 7.1.0. https://github.com/mermaidjs/mermaid-live-editor/blob/master/src/index.js#L8 In earlier versions you specify a CSS file. After 7.1.0 you just specify an option. And yes styles are inline. In fact after 7.1.0 we don't provide separate CSS files at all. You can still use 7.0.0. Then you can simply specify the dark theme css file. It's up to you. |
Hello, I'm maintaining another vscode mermaid extension and we have the same issue although the extension is selecting correctly the theme: Mermaid-Chart/vscode-mermaid-preview#41. The extension is using mermaid 7.1.0 so no way to mangle CSS files. We would appreciate if this issue is fixed in mermaid itself, rather than comping with hacks downstream :). |
For now, is it possible for your guys to add I am still doing lots of refactoring at the moment. If you want the old behavior, just use 7.0.0. I will figure out the best solution before 8.0.0 Update(2018-03-16): Latest syntax is |
@arjunachala please don't hi-jack the subject. This issue is about text and not shapes. Create another issue for that one please. |
sorry about that! opened another issue at - #578 |
I've tried updating the VSCode extension to use 7.1, but even after passing in @tylerlong Side note: using external style vs inline is also preferable for our use case since we allow dynamically changing styles. Not sure how to do that without a re-render currently |
Has there been any progress on this issue? |
Please try the latest version: Code is: mermaid.initialize({ theme: 'dark' }); It's not beautiful but I am a developer instead of a UI designer. And if you want to change the colors, simply change this file and send a PR: https://github.com/knsv/mermaid/blob/master/src/themes/dark/index.scss You can even create a new theme by creating a new .scss file. |
Now it is also possible to write CSS to override CSS in theme: mermaidjs/mermaid.cli#24 (comment) |
As you can see it in the screenshot,
ALT
,OPT
,LOOP
titles are not visible. (text is there, it is just a dark color which makes it very difficult to read on dark theme.)The text was updated successfully, but these errors were encountered: