postcss-dark-theme-class

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.