styled-media-query
styled-media-query copied to clipboard
Dark color scheme support (via prefers-color-scheme media query)
Well, many operating systems now support a dark mode or dark theme.
I believe it would be interesting for this to be implemented here as well.
The media consultation of the preferred color scheme allows you to adjust the appearance of the website to match the user's preferred mode.
Syntax
no-preference
Indicates that the user has made no preference known to the system. This keyword value evaluates to false in the boolean context.
light
Indicates that user has notified the system that they prefer an interface that has a light theme.
dark
Indicates that user has notified the system that they prefer an interface that has a dark theme.
Mozilla Firefox: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme Google Chrome: https://www.chromestatus.com/feature/5109758977638400
Suggestion
${media.prefersColorScheme("dark")`
body {
background-color: black;
color: white;
}
`}
What do you think about it?