# @csstools/postcss-light-dark-function > Use the light-dark() color function in CSS Latest version **3.0.4** (published 2026-09-06) · MIT-0 license · 0 weekly downloads ## Install ```sh npm install @csstools/postcss-light-dark-function pnpm add @csstools/postcss-light-dark-function yarn add @csstools/postcss-light-dark-function bun add @csstools/postcss-light-dark-function ``` ## Health **Score 60/100 (C)** — status: active. Positive: esm support; no vulnerabilities; recently updated; high maintenance score. Warnings: low downloads; no types. ## Facts | | | |---|---| | Version | 3.0.4 | | Published | 2026-09-06 | | First published | 2024-02-19 | | Weekly downloads | 0 | | License | MIT-0 | | TypeScript types | none | | Module format | ESM | | Node | >=20.19.0 | | Dependencies | 4 | | Unpacked size | 11.7 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 1053 | | Maintainers | jonathantneal, alaguna, romainmenke | | Keywords | postcss-plugin | ## Links - npm: https://www.npmjs.com/package/@csstools/postcss-light-dark-function - Repository: https://github.com/csstools/postcss-plugins - Homepage: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-light-dark-function#readme - Issues: https://github.com/csstools/postcss-plugins/issues - Funding: https://github.com/sponsors/csstools - npm.io page: https://npm.io/package/@csstools/postcss-light-dark-function ## Dependencies (4) - [@csstools/utilities](https://npm.io/package/@csstools/utilities.md) ^3.0.0 - [@csstools/css-tokenizer](https://npm.io/package/@csstools/css-tokenizer.md) ^4.0.0 - [@csstools/css-parser-algorithms](https://npm.io/package/@csstools/css-parser-algorithms.md) ^4.0.0 - [@csstools/postcss-progressive-custom-properties](https://npm.io/package/@csstools/postcss-progressive-custom-properties.md) ^5.1.3 ## Recent versions - 3.0.4 (latest) — 2026-09-06 - 3.0.3 — 2026-08-15 - 3.0.2 — 2026-06-28 - 3.0.1 — 2026-05-13 - 3.0.0 — 2026-01-14 - 2.0.11 — 2025-09-21 - 2.0.10 — 2025-08-22 - 2.0.9 — 2025-05-27 - 2.0.8 — 2025-04-19 - 2.0.7 — 2024-11-01 - 2.0.6 — 2024-10-23 - 2.0.5 — 2024-10-10 - 2.0.4 — 2024-09-22 - 2.0.3 — 2024-09-22 - 2.0.2 — 2024-08-18 - … 11 more at https://npm.io/package/@csstools/postcss-light-dark-function/versions ## README # PostCSS Light Dark Function [PostCSS Logo][PostCSS] `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]. Read more about this feature on mdn: - define the colors for light and dark with [`light-dark()`](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/light-dark) - define which elements support light and/or dark with [`color-scheme`](https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme) With both features combined you can mix and match color schemes in a single document, while also respecting the user's preferences. ```css .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); } } ``` Declare that your document supports both light and dark mode: ```css :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: ; } } ``` Dynamically alter the supported color scheme for some elements: ```css :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; } ``` ## Usage Add [PostCSS Light Dark Function] to your project: ```bash npm install postcss @csstools/postcss-light-dark-function --save-dev ``` Use it as a [PostCSS] plugin: ```js const postcss = require('postcss'); const postcssLightDarkFunction = require('@csstools/postcss-light-dark-function'); postcss([ postcssLightDarkFunction(/* pluginOptions */) ]).process(YOUR_CSS /*, processOptions */); ``` ## Options ### preserve The `preserve` option determines whether the original notation is preserved. By default, it is preserved. ```js postcssLightDarkFunction({ preserve: false }) ``` ```css .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 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` to `false` or if you bring your own fix for Custom Properties. > See what the plugin does in its [README](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-progressive-custom-properties#readme). ```js postcssLightDarkFunction({ enableProgressiveCustomProperties: false }) ``` [cli-url]: https://github.com/csstools/postcss-plugins/actions/workflows/test.yml?query=workflow/test [css-url]: https://cssdb.org/#light-dark-function [discord]: https://discord.gg/bUadyRwkJS [npm-url]: https://www.npmjs.com/package/@csstools/postcss-light-dark-function [PostCSS]: https://github.com/postcss/postcss [PostCSS Light Dark Function]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-light-dark-function [CSS Color 5 Specification]: https://drafts.csswg.org/css-color-5/#light-dark --- _Source: https://npm.io/package/@csstools/postcss-light-dark-function · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._