search

postcss / postcss-dark-theme-class

PostCSS plugin to make dark/light theme switcher by copying styles from media query to special class
MIT License
160 stars 16 forks source link

Hope to support「preferred-color-scheme: light」🙏 #7

Closed aweiu closed 8 months ago

aweiu commented 4 years ago

input:

/* no theme */
:root {
  --bgColor: red;
}
/* light theme */
@media (prefers-color-scheme: light) {
  :root {
    --bgColor: yellow;
  }
}
/* dark theme */
@media (prefers-color-scheme: dark) {
  :root {
    --bgColor: blue;
  }
}

expect output:

/* no theme */
:root {
  --bgColor: red;
}
/* light theme */
:root[data-theme="light"] {
   --bgColor: yellow;
}
/* dark theme */
:root[data-theme="light"] {
   --bgColor: yellow;
}

real output:

/* no theme */
:root {
  --bgColor: red;
}

/* light theme */
@media (prefers-color-scheme: light) {
  :root {
    --bgColor: yellow;
  }
}

/* dark theme */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bgColor: blue;
  }
}

:root[data-theme="dark"] {
  --bgColor: blue;
}
ai commented 4 years ago

Good idea! Can you send a pull request to save your name in the project history?