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.

Sign up for GitHub

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

Jump to bottom

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

Closed

aweiu opened this issue Jun 30, 2020 · 1 comment

aweiu commented Jun 30, 2020 •

edited by ai

Loading

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;
}

Member

ai commented Jul 1, 2020

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

NataliaNagaeva mentioned this issue

Add preferred-color-scheme: light support #23

Merged

ai closed this as completed

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment