# postcss-dark-theme-class

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

Latest version **2.0.0** (published 2025-09-02) · MIT license · 0 weekly downloads

## Install

```sh
npm install postcss-dark-theme-class
pnpm add postcss-dark-theme-class
yarn add postcss-dark-theme-class
bun add postcss-dark-theme-class
```

## Health

**Score 45/100 (D)** — status: stable.

Positive: has types; no vulnerabilities; high maintenance score.

Warnings: low downloads; no esm support.

Negative: stale.

## Facts

| | |
|---|---|
| Version | 2.0.0 |
| Published | 2025-09-02 |
| First published | 2019-10-12 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Node | >=20.0 |
| Dependencies | 1 |
| Unpacked size | 9.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 162 |
| Author | Andrey Sitnik |
| Maintainers | ai |
| Keywords | postcss, css, postcss-plugin, dark, dark-theme, light, auto-theme, theme-switcher |

## Links

- npm: https://www.npmjs.com/package/postcss-dark-theme-class
- Repository: https://github.com/postcss/postcss-dark-theme-class
- Homepage: https://github.com/postcss/postcss-dark-theme-class#readme
- Issues: https://github.com/postcss/postcss-dark-theme-class/issues
- Funding: https://opencollective.com/postcss/
- npm.io page: https://npm.io/package/postcss-dark-theme-class

## Dependencies (1)

- [postcss-value-parser](https://npm.io/package/postcss-value-parser.md) ^4.2.0

## Alternatives

- [style-dictionary](https://npm.io/package/style-dictionary.md) — 2.0M weekly downloads
- [postcss-merge-idents](https://npm.io/package/postcss-merge-idents.md) — 1.7M weekly downloads
- [@fontsource/noto-sans](https://npm.io/package/@fontsource/noto-sans.md) — 93.0K weekly downloads
- [uglifycss](https://npm.io/package/uglifycss.md) — 71.6K weekly downloads
- [mat4-interpolate](https://npm.io/package/mat4-interpolate.md) — 23.3K weekly downloads

## Recent versions

- 2.0.0 (latest) — 2025-09-02
- 1.3.0 — 2024-04-22
- 1.2.3 — 2024-04-21
- 1.2.2 — 2024-04-20
- 1.2.1 — 2024-02-14
- 1.2.0 — 2024-02-10
- 1.1.0 — 2023-11-28
- 1.0.0 — 2023-08-17
- 0.8.0 — 2023-08-14
- 0.7.3 — 2021-10-13
- 0.7.2 — 2021-09-08
- 0.7.1 — 2021-07-09
- 0.7.0 — 2021-07-07
- 0.6.0 — 2021-07-04
- 0.5.2 — 2021-05-15
- … 8 more at https://npm.io/package/postcss-dark-theme-class/versions

## README

# 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)**.

---
_Source: https://npm.io/package/postcss-dark-theme-class · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._