Is the way dark-light-theme selection is implemented part of the public API? #1764
Labels
question
Question about functionality
Comments
|
Yes - I consider this part of the public API, but it will change in 0.23, most likely to use the method in #1706. |
|
Thank you for the info. Regarding #1706: This solution still seems suboptimal to me. Let's say I simply want to set some CSS variables @media (prefers-color-scheme: light) {
:root {
--foo: white;
--bar: lightgreen;
}
}
@media (prefers-color-scheme: dark) {
:root {
--foo: black;
--bar: darkgreen;
}
}
:root[data-theme="light"] {
--foo: white;
--bar: lightgreen;
}
:root[data-theme="dark"] {
--foo: black;
--bar: darkgreen;
}I need 2 copies of all variable assignments per color scheme. I wonder if you could get rid of the document.documentElement.dataset.theme =
window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light" |
|
That works - for people who have JavaScript turned on. It won't work for anyone with JS turned off. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Search terms
theme, API, dark, light
Question
Currently, selecting the dark, light, or OS theme is done by adding special classes (
darkorlight) to the<body>and by using@mediaqueries if those special classes aren't present.Is this way of doing things part of the public API? Or in other words, can I rely on this behavior?
Motivation
Some plugins need to know this.
Example: kamiazya/typedoc-plugin-mermaid#456. This plugin renders Mermaid graphs in comments. Mermaid always renders graphs into a standalone SVG with a specific Mermaid theme backed in. My idea is to render two versions of the same graph (one for dark mode and one for light mode) and use CSS to switch between the two (making it so that only one of them is visible at a time depending on dark mode). However, I need a CSS way for detecting light/dark mode to do that.
The text was updated successfully, but these errors were encountered: