postcss-minicloud-theme-colors

A PostCSS plugin that automatically transforms color groups for light and dark themes, allowing you to define colors once and apply them across your project with ease. This plugin also supports CSS custom properties (variables) for more flexible theming.

Features

• Automatic Theme Switching: Easily define and switch between light and dark theme colors.
• Support for Custom Properties: Use CSS variables to define theme colors.
• Nesting Support: Automatically handles nested CSS selectors when used with postcss-nested or postcss-nesting.

Installation

Install via npm:

1npm install postcss-minicloud-theme-colors --save-dev

Usage

1// postcss.config.js
2module.exports = {
3  plugins: [
4    require('postcss-nested'), // If you use nested CSS
5    require('postcss-minicloud-theme-colors').default({
6      function: 'transformColor',
7      groups: {
8        primary: ['#ffffff', '#000000'],
9        secondary: ['#333333', '#cccccc'],
10      },
11      useCustomProperties: false,
12      darkThemeSelector: 'html[data-theme="dark"]',
13      nestingPlugin: 'nested', // Set to 'nesting' if using postcss-nesting
14    }),
15    require('autoprefixer'),
16  ]
17};

If your project supports ES model, use the following config:

1// postcss.config.mjs
2import postcssNested from 'postcss-nested';
3import minicloudThemeColors from 'postcss-minicloud-theme-colors';
4import autoprefixer from 'autoprefixer';
5
6export default {
7  plugins: [
8    postcssNested,
9    minicloudThemeColors.default({
10      function: 'transformColor',
11      groups: {
12        primary: ['#ffffff', '#000000'],
13        secondary: ['#f0f0f0', '#333333']
14      },
15      colors: {
16        white: '#ffffff',
17        black: '#000000'
18      },
19      useCustomProperties: true,
20      darkThemeSelector: 'html[data-theme="dark"]',
21      nestingPlugin: 'nested',
22    }),
23    autoprefixer,
24  ]
25};

Example

Given the following CSS:

1.header {
2  background-color: transformColor(primary);
3  color: transformColor(secondary);
4}

The plugin will generate:

1.header {
2  background-color: #ffffff;
3  color: #333333;
4}
5
6html[data-theme="dark"] .header {
7  background-color: #000000;
8  color: #cccccc;
9}

---

You can also use CSS custom properties (variables) to define your theme colors:

1// postcss.config.js
2module.exports = {
3  plugins: [
4    require('postcss-minicloud-theme-colors').default({
5      function: 'transformColor',
6      groups: {
7        primary: ['--primary-color', '--primary-dark-color'],
8        secondary: ['--secondary-color', '--secondary-dark-color'],
9      },
10      useCustomProperties: true,
11      darkThemeSelector: 'html[data-theme="dark"]',
12    }),
13    require('autoprefixer'),
14  ]
15};

With the following CSS:

1.header {
2  background-color: transformColor(primary);
3  color: transformColor(secondary);
4}

The plugin will generate:

1.header {
2  background-color: var(--primary-color);
3  color: var(--secondary-color);
4}
5
6html[data-theme="dark"] .header {
7  background-color: var(--primary-dark-color);
8  color: var(--secondary-dark-color);
9}

Options

• function (string): The function name used in your CSS to trigger color transformation. Default is 'transformColor'.

• groups (object): An object where keys are group names and values are arrays of two colors: the first for light theme, and the second for dark theme.

• colors (object): An optional object that maps color names to actual color values or CSS variables.

• useCustomProperties (boolean): If set to true, the plugin will treat the group values as CSS custom properties (variables). Default is false.

• darkThemeSelector (string): The selector for dark theme styles. Default is 'html[data-theme="dark"]'.

• nestingPlugin (string or null): If you're using a nesting plugin like postcss-nesting or postcss-nested, specify its name here. This allows the plugin to correctly generate nested styles.

Error Handling

If the plugin encounters an invalid color value or group, it will throw an error and stop processing. Ensure that all color groups are properly defined and that any defaultValue passed to the transformColor function is a valid CSS color.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Support

If you encounter any issues or have questions, feel free to open an issue on the GitHub repository.