# PostCSS Dark Theme Class

<img align="right" width="135" height="95"
     title="Philosopher’s stone, logo of PostCSS"
     src="https://postcss.org/logo-leftp.svg">

CSS solution for light/dark/auto theme switcher for websites.

* It doesn’t have [FART] **flash of light theme** during JS initialization.
* **Pure CSS** solution. You need JS only to set HTML class, when user.
* **Automatic theme** provide better UX for users with theme switching
  by subset/sunrise (all operating systems now have theme switching schedule).

[PostCSS] plugin to make switcher to force dark or light theme by copying styles
from media query or [`light-dark()`] to special class.

[PostCSS]: https://github.com/postcss/postcss
[FART]: https://css-tricks.com/flash-of-inaccurate-color-theme-fart/
[`light-dark()`]: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/light-dark

```css
/* Input CSS */

@media (prefers-color-scheme: dark) {
  html {
    --text-color: white
  }
  body {
    background: black
  }
}

section {
  background: light-dark(white, black);
}
```

```css
/* Output CSS */

@media (prefers-color-scheme: dark) {
  html:where(:not(.is-light)) {
    --text-color: white
  }
  :where(html:not(.is-light)) body {
    background: black
  }
}
html:where(.is-dark) {
  --text-color: white
}
:where(html.is-dark) body {
  background: black
}

@media (prefers-color-scheme: dark) {
  :where(html:not(.is-light)) section {
    background: black;
  }
}
:where(html.is-dark) section {
  background: black;
}
@media (prefers-color-scheme: light) {
  :where(html:not(.is-dark)) section {
    background: white;
  }
}
:where(html.is-light) section {
  background: white;
}
```

By default (without classes on `html`), website will use browser dark/light
theme. If user want to use dark theme, you set `html.is-dark` class.
If user want to force light theme, you use `html.is-light`.

<a href="https://evilmartians.com/?utm_source=postcss-dark-theme-class">
  <img src="https://evilmartians.com/badges/sponsored-by-evil-martians.svg"
       alt="Sponsored by Evil Martians" width="236" height="54">
</a>


## Docs
Read full docs **[here](https://github.com/postcss/postcss-dark-theme-class#readme)**.