PostCSS Themes

PostCSS plugin to add themes in CSS file.

Note about at-rules: Except for Conditional Group At-rules, others will simply be ignored because of irrelevance. @keyframes may contain css varialbe, but it's not feasible to deduce their scope values at build time.

Usage

npm install postcss-themes -D

module.exports = {
  plugins: [
    'postcss-themes': {
      themes: {
        filePath: 'theme-aaa.css',
      }
    },
  ]
}

If you do not use PostCSS, add it according to official docs and set this plugin in settings.

Input CSS

:root {
  --main-color: green;
}
.foo {
  font-size: 16px;
  color: var(--main-color);
}

theme-aaa.css

:root {
  --main-color: red;
}

Output CSS

:root {
  --main-color: green;
}
.foo {
  font-size: 16px;
  color: var(--main-color);
}
.theme-aaa {
  --main-color: red;
}
.theme-aaa .foo {
  color: var(--main-color);
}

Change Theme

document.body.className = document.body.className + ' theme-aaa'

Work With Other Postcss Plugins

module.exports = {
  plugins: [
    'postcss-themes': {
      themes: {
        filePath: 'theme-aaa.css',
      }
    },
    'postcss-css-variables': {},
    'postcss-preset-env': {
      ...
    }
  ]
}

Attribute

| attribute | intro | type | default | | --- | --- | --- | --- | | themes | themes data | ThemeObject|Array<ThemeObject> | - |

ThemeObject

| attribute | intro | type | default | | --- | --- | --- | --- | | className | the theme className. | string | - | | filePath | The path of CSS file that define CSS variables; The fileName will be the theme className by default if className is not defined. | string | - | | variables | CSS variables; The CSS variables in CSS files will bo ignored If the same CSS variables are defined not only in variables but also in the CSS file that filePath linked to. | object | - |