PostCSS 轻暗函数

npm install @csstools/postcss-light-dark-function --save-dev

PostCSS 轻暗函数 让你使用 light-dark 颜色函数在 支助科,随 CSS 颜色 5 规格。 。 。 .

更多信息,请访问mdn上的此功能:

• 定义光和暗的颜色 light-dark()
• 定义支持光和/或暗的元素 color-scheme

结合这两个特性,您可以在单一文档中混合并匹配配色方案,同时也尊重用户的偏好.

.foo {
    color: light-dark(pink, magenta);
}

.bar {
    --bar: light-dark(cyan, deepskyblue);
}

/* becomes */

.foo {
    --csstools-light-dark-toggle--0: var(--csstools-color-scheme--light) magenta;
    color: var(--csstools-light-dark-toggle--0, pink);
    color: light-dark(pink, magenta);
}

.bar {
    --csstools-light-dark-toggle--1: var(--csstools-color-scheme--light) deepskyblue;
    --bar: var(--csstools-light-dark-toggle--1, cyan);
    @supports not (color: light-dark(tan, tan)) {

        & * {
    --csstools-light-dark-toggle--1: var(--csstools-color-scheme--light) deepskyblue;
    --bar: var(--csstools-light-dark-toggle--1, cyan);
        }
    }
}

@supports (color: light-dark(red, red)) {
.bar {
    --bar: light-dark(cyan, deepskyblue);
}
}

声明您的文档支持光和暗模式:

:root {
    color-scheme: light dark;
}

/* becomes */

:root {
    --csstools-color-scheme--light: initial;
    color-scheme: light dark;
}@media (prefers-color-scheme: dark) {:root {
    --csstools-color-scheme--light:  ;
}
}

动态修改一些元素的支持颜色方案 :

:root {
    /* Root only supports light mode */
    color-scheme: light;
}

.foo {
    /* This element and its children only support dark mode */
    color-scheme: dark;
}

/* becomes */

:root {
    /* Root only supports light mode */
    --csstools-color-scheme--light: initial;
    color-scheme: light;
}

.foo {
    /* This element and its children only support dark mode */
    --csstools-color-scheme--light:  ;
    color-scheme: dark;
}

使用量

添加 PostCSS 轻暗函数 对您的项目:

npm install postcss @csstools/postcss-light-dark-function --save-dev

当作一个 邮政 插件 :

const postcss = require('postcss');
const postcssLightDarkFunction = require('@csstools/postcss-light-dark-function');

postcss([
    postcssLightDarkFunction(/* pluginOptions */)
]).process(YOUR_CSS /*, processOptions */);

选项

保护

这个 preserve 选项决定原始标记是否 被保存下来。 默认保存.

postcssLightDarkFunction({ preserve: false })

.foo {
    color: light-dark(pink, magenta);
}

.bar {
    --bar: light-dark(cyan, deepskyblue);
}

/* becomes */

.foo {
    --csstools-light-dark-toggle--0: var(--csstools-color-scheme--light) magenta;
    color: var(--csstools-light-dark-toggle--0, pink);
}

.bar {
    --csstools-light-dark-toggle--1: var(--csstools-color-scheme--light) deepskyblue;
    --bar: var(--csstools-light-dark-toggle--1, cyan);
    & * {
    --csstools-light-dark-toggle--1: var(--csstools-color-scheme--light) deepskyblue;
    --bar: var(--csstools-light-dark-toggle--1, cyan);
    }
}

启用渐进自定义收益

这个 enableProgressiveCustomProperties 选项决定原始标记是否 包裹着 @supports 当使用自定义属性时。 默认情况下, 它被启用 .

[注] 我们只建议在您准备好的时候取消这个 preserve 改为 false 或者你带了自定义属性的修补.
查看插件在其中的用途 读取。 。 。 .

postcssLightDarkFunction({ enableProgressiveCustomProperties: false })