Package Exports

postcss-custom-themes
postcss-custom-themes/dist/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-custom-themes) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

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;
}