Package Exports

postcss-dark-theme-class
postcss-dark-theme-class/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (postcss-dark-theme-class) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

PostCSS Dark Theme Class

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.

/* Input CSS */

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

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

/* 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.

Docs

Read full docs here.