Expand theme color groups to allow non-static handling of relative color syntax or color-mix() function.
Installation
npm install postcss-theme-colors postcss-preset-env
Usage
Input:
a { /* any value with theme (light/dark) color */ color: oklch(from var(--G01) l c h / 0.1); /* more: border: 1px solid oklch(from var(--G01) .8 c h); box-shadow: 0 0 0 2px var(--G01), 0 0 0 4px oklch(from var(--G01) l c h / .1); --anyVar: value-with-theme-color; */ }
Output:
a { --v1868641404: var(--flag-light, rgba(238, 238, 238, 0.1)) var(--flag-dark, rgba(17, 17, 17, 0.1)); color: rgba(238, 238, 238, 0.1); /* fallback */ color: var(--v1868641404); /* expand for color scheme */ } @supports (color: lab(from red l 1 1% / calc(alpha + 0.1))) { a { color: oklch(from var(--G01) l c h / 0.1); /* W3C */ } }
Configuration
const colors = { '--G01': ['#eee', '#111'], } postcss([ require('postcss-theme-colors')({colors}), require('postcss-preset-env'), require('@csstools/postcss-global-data')({ files: [ // example flags require.resolve('postcss-theme-colors/flag.css'), // your global theme colors 'vars.css', ], }), ]).process(css)
Plugin Options
type Options = { /** color groups */ colors: Record<string, string | string[]> /** * boolean flags * @default ['--flag-light', '--flag-dark'] */ flags?: string[] /** * Whether to inject boolean flags, could also be defined in global CSS files * @default false */ shouldInjectFlags?: boolean }