search

morajabi / styled-media-query

💅💍 Better media queries for styled-component
MIT License
1.32k stars 53 forks source link

Dark color scheme support (via prefers-color-scheme media query) #24

Open zenojunior opened 4 years ago

zenojunior commented 4 years ago

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?