postcss-theme-colors

Expand theme color groups to allow non-static handling of relative color syntax or color-mix() function.

Installation

1npm install postcss-theme-colors postcss-preset-env

Usage

Input:

1a {
2  /* any value with theme (light/dark) color */
3  color: oklch(from var(--G01) l c h / 0.1);
4  /* more:
5  border: 1px solid oklch(from var(--G01) .8 c h);
6  box-shadow: 0 0 0 2px var(--G01), 0 0 0 4px oklch(from var(--G01) l c h / .1);
7  --anyVar: value-with-theme-color;
8  */
9}

Output:

1a {
2  --v1868641404: var(--flag-light, rgba(238, 238, 238, 0.1)) var(--flag-dark, rgba(17, 17, 17, 0.1));
3  color: rgba(238, 238, 238, 0.1); /* fallback */
4  color: var(--v1868641404); /* expand for color scheme */
5}
6
7@supports (color: lab(from red l 1 1% / calc(alpha + 0.1))) {
8  a {
9    color: oklch(from var(--G01) l c h / 0.1); /* W3C */
10  }
11}

Configuration

1const colors = {
2  '--G01': ['#eee', '#111'],
3}
4
5postcss([
6  require('postcss-theme-colors')({colors}),
7  require('postcss-preset-env'),
8  require('@csstools/postcss-global-data')({
9    files: [
10      // example flags
11      require.resolve('postcss-theme-colors/flag.css'),
12      // your global theme colors
13      'vars.css',
14    ],
15  }),
16]).process(css)

Plugin Options

1type Options = {
2  /** color groups */
3  colors: Record<string, string | string[]>
4  /**
5   * boolean flags
6   * @default ['--flag-light', '--flag-dark']
7   */
8  flags?: string[]
9  /**
10   * Whether to inject boolean flags, could also be defined in global CSS files
11   * @default false
12   */
13  shouldInjectFlags?: boolean
14}