npm install @csstools/postcss-light-dark-function --save-devPostCSS Light Dark Function lets you use the light-dark color function in
CSS, following the CSS Color 5 Specification.
.dark {
color-scheme: dark;
}
.light {
color-scheme: light;
}
.theme {
color: light-dark(pink, magenta);
}
.prop {
--theme-color: light-dark(cyan, deepskyblue);
}
/* becomes */
.dark {
--csstools-color-scheme--dark: initial;
color-scheme: dark;
}
.light {
--csstools-color-scheme--dark: ;
color-scheme: light;
}
.theme {
--csstools-light-dark-toggle--0: var(--csstools-color-scheme--dark) pink;
color: var(--csstools-light-dark-toggle--0, magenta);
color: light-dark(pink, magenta);
}
.prop {
--csstools-light-dark-toggle--1: var(--csstools-color-scheme--dark) cyan;
--theme-color: var(--csstools-light-dark-toggle--1, deepskyblue);
& * {
--csstools-light-dark-toggle--1: var(--csstools-color-scheme--dark) cyan;
--theme-color: var(--csstools-light-dark-toggle--1, deepskyblue);
}
}
@supports (color: light-dark(red, red)) {
.prop {
--theme-color: light-dark(cyan, deepskyblue);
}
}Add PostCSS Light Dark Function to your project:
npm install postcss @csstools/postcss-light-dark-function --save-devUse it as a PostCSS plugin:
const postcss = require('postcss');
const postcssLightDarkFunction = require('@csstools/postcss-light-dark-function');
postcss([
postcssLightDarkFunction(/* pluginOptions */)
]).process(YOUR_CSS /*, processOptions */);PostCSS Light Dark Function runs in all Node environments, with special instructions for:
The preserve option determines whether the original notation
is preserved. By default, it is preserved.
postcssLightDarkFunction({ preserve: false }).dark {
color-scheme: dark;
}
.light {
color-scheme: light;
}
.theme {
color: light-dark(pink, magenta);
}
.prop {
--theme-color: light-dark(cyan, deepskyblue);
}
/* becomes */
.dark {
--csstools-color-scheme--dark: initial;
color-scheme: dark;
}
.light {
--csstools-color-scheme--dark: ;
color-scheme: light;
}
.theme {
--csstools-light-dark-toggle--0: var(--csstools-color-scheme--dark) pink;
color: var(--csstools-light-dark-toggle--0, magenta);
}
.prop {
--csstools-light-dark-toggle--1: var(--csstools-color-scheme--dark) cyan;
--theme-color: var(--csstools-light-dark-toggle--1, deepskyblue);
& * {
--csstools-light-dark-toggle--1: var(--csstools-color-scheme--dark) cyan;
--theme-color: var(--csstools-light-dark-toggle--1, deepskyblue);
}
}The enableProgressiveCustomProperties option determines whether the original notation
is wrapped with @supports when used in Custom Properties. By default, it is enabled.
[!NOTE] We only recommend disabling this when you set
preservetofalseor if you bring your own fix for Custom Properties.
See what the plugin does in its README.
postcssLightDarkFunction({ enableProgressiveCustomProperties: false })