-
-
Notifications
You must be signed in to change notification settings - Fork 6.3k
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
Light mode/dark mode auto switching. #2644
Comments
In mermaid.live, we are currently switching the theme in config based on the color scheme. |
Yes, it's a reasonable approach for browsers which don't support Can you explain how someone can integrate |
@sidharthv96 I would also be interested in how |
IMO it is kinda more complicated. First, websites have various methods to switch light/dark mode. In addition to media query Second, embedding styles for auto light/dark mode switching in SVG documents doesnot always work. Anyway, if you use class |
As a simple solution to support both [data-theme='dark'] .mermaid {
filter: invert(0.88);
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme='light']) .mermaid {
filter: invert(0.88);
}
} This CSS does two things:
Note: I'm using Hope that helps! |
It's possible (supported in Chrome but not Safari) to use
prefers-color-scheme
in SVG documents.With careful styling, this can be used to achieve diagram styling which responds to user preference.
As a fallback, we can detect changes to
prefers-color-scheme
and refresh SVGs.This would make the out-of-the-box light/dark styling much more seamless. As of now, the experience is less than ideal and the presentation of diagrams in a website which uses
prefers-color-scheme
is poor/unusable.Would this be of interest?
The text was updated successfully, but these errors were encountered: