README-POSTCSS.md

Prefers Color Scheme

Prefers Color Scheme transforms prefers-color-scheme media queries into something all browsers understand.

@media (prefers-color-scheme: dark) {
  :root {
    --site-bgcolor: #1b1b1b;
    --site-color: #fff;
  }
}

body {
  background-color: var(--site-bgcolor, #f9f9f9);
  color: var(--site-color, #111);
  font: 100%/1.5 system-ui;
}

/* becomes */

@media (color-index: 48) {
  :root {
    --site-bgcolor: #1b1b1b;
    --site-color: #fff;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --site-bgcolor: #1b1b1b;
    --site-color: #fff;
  }
}

body {
  background-color: var(--site-bgcolor, #f9f9f9);
  color: var(--site-color, #111);
  font: 100%/1.5 system-ui;
}

Usage

Use Prefers Color Scheme to process your CSS:

npx css-prefers-color-scheme INPUT.css OUTPUT.css

Or use it within Node:

const postcssPrefersColorScheme = require('css-prefers-color-scheme/postcss');

postcssPrefersColorScheme.process(YOUR_CSS /*, processOptions, pluginOptions */);

Or use it as a PostCSS plugin:

const postcss = require('postcss');
const postcssPrefersColorScheme = require('css-prefers-color-scheme/postcss');

postcss([
  postcssPrefersColorScheme(/* pluginOptions */)
]).process(YOUR_CSS /*, processOptions */);

Prefers Color Scheme runs in all Node environments, with special instructions for:

Node	Webpack	Create React App	Gulp	Grunt

Options

preserve

The preserve option determines whether the original prefers-color-scheme query will be preserved or removed. By default, it is preserved.

require('css-prefers-color-scheme/postcss')({ preserve: false });

@media (prefers-color-scheme: dark) {
  body {
    background-color: black;
  }
}

/* becomes */

@media (color-index: 48) {
  body {
    background-color: black;
  }
}