1.0.3 • Published 1 month ago
@csstools/postcss-light-dark-function v1.0.3
PostCSS Light Dark Function
npm install @csstools/postcss-light-dark-function --save-dev
PostCSS 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);
}
}
Usage
Add PostCSS Light Dark Function to your project:
npm install postcss @csstools/postcss-light-dark-function --save-dev
Use 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:
Options
preserve
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);
}
}
enableProgressiveCustomProperties
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
preserve
tofalse
or if you bring your own fix for Custom Properties.
See what the plugin does in its README.
postcssLightDarkFunction({ enableProgressiveCustomProperties: false })