postcss-custom-themes

PostCSS plugin to add custom themes with custom properties

Usage no npm install needed!

<script type="module">
  import postcssCustomThemes from 'https://cdn.skypack.dev/postcss-custom-themes';
</script>

README

postcss-custom-themes

Generate theme specific classes, substituting initial css variables for the theme ones. Creates a global theme-{themeName} class that is prepended to every class that has css variables. Must be inserted before postcss-custom-properties.

Install

npm install -D postcss-custom-themes

Usage

// postcss.config.js

module.exports = {
  plugins: [
    require('postcss-custom-themes')({
      themes: ['dark'],
      importFrom: 'css/colors.css',
      modules: false,
    }),
    require('postcss-custom-properties')({
      preserve: true,
      importFrom: 'css/colors.css',
    })
  ]
}

Options

Name Type Required Description
themes Array true Array of theme prefixes
importFrom String true File with css variables. Needed for substitution checks
modules Boolean false default: false If you use CSSModules, set it to true in order to apply the theme class globally (wraps the theme class in :global selector).

Input CSS

:root {
  --theme-dark-mainColor: #000;
  --theme-dark-additionalColor: #fff;
}

:root {
  --mainColor: #fff;
  --additionalColor: #000;
}
.root {
  display: block;
  background: var(--mainColor);
  color: var(--additionalColor);
}

Output CSS

.theme-dark .root {
  background: #000;
  color: #fff;
}
.root {
  display: block;
  background: #fff;
  color: #000;
}