Gathering detailed insights and metrics for @csstools/postcss-light-dark-function
Gathering detailed insights and metrics for @csstools/postcss-light-dark-function
Installations
npm install @csstools/postcss-light-dark-functionDeveloper Guide
BETA
Typescript
Yes
Module System
ESM
Min. Node Version
>=18
Node Version
22.12.0
NPM Version
10.9.0
Score
98.1
Supply Chain
98.6
Quality
87.8
Maintenance
100
Vulnerability
100
License
Releases
Unable to fetch releases
Languages
7
CSS
JavaScript
TypeScript
HTML
Nunjucks
Shell
SCSS
CSS (43.25%)
JavaScript (30.24%)
TypeScript (22.9%)
HTML (3.03%)
Nunjucks (0.48%)
Shell (0.1%)
Developer
Download Statistics
Total Downloads
46,451,894
Last Day
49,893
Last Week
1,146,298
Last Month
4,894,938
Last Year
41,976,582
GitHub Statistics
MIT-0 License
981 Stars
4,379 Commits
78 Forks
9 Watchers
6 Branches
132 Contributors
Updated on Jun 30, 2025
Bundle Size
85.02 kB
Minified
15.95 kB
Minified + Gzipped
Sponsor this package
Maintainers
3
Package Meta Information
Latest Version
2.0.9
Package Id
@csstools/postcss-light-dark-function@2.0.9
Unpacked Size
15.66 kB
Size
4.95 kB
File Count
7
NPM Version
10.9.0
Node Version
22.12.0
Published on
May 27, 2025
Total Downloads
Cumulative downloads
Total Downloads
46,451,894
Last Day
-0.2%
49,893
Compared to previous day
Last Week
-3.7%
1,146,298
Compared to previous week
Last Month
1.3%
4,894,938
Compared to previous month
Last Year
838%
41,976,582
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
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.
Read more about this feature on mdn:
- define the colors for light and dark with
light-dark() - define which elements support light and/or dark with
color-scheme
With both features combined you can mix and match color schemes in a single document, while also respecting the user's preferences.
1.foo { 2 color: light-dark(pink, magenta); 3} 4 5.bar { 6 --bar: light-dark(cyan, deepskyblue); 7} 8 9/* becomes */ 10 11.foo { 12 --csstools-light-dark-toggle--0: var(--csstools-color-scheme--light) magenta; 13 color: var(--csstools-light-dark-toggle--0, pink); 14 color: light-dark(pink, magenta); 15} 16 17.bar { 18 --csstools-light-dark-toggle--1: var(--csstools-color-scheme--light) deepskyblue; 19 --bar: var(--csstools-light-dark-toggle--1, cyan); 20 @supports not (color: light-dark(tan, tan)) { 21 22 & * { 23 --csstools-light-dark-toggle--1: var(--csstools-color-scheme--light) deepskyblue; 24 --bar: var(--csstools-light-dark-toggle--1, cyan); 25 } 26 } 27} 28 29@supports (color: light-dark(red, red)) { 30.bar { 31 --bar: light-dark(cyan, deepskyblue); 32} 33}
Declare that your document supports both light and dark mode:
1:root { 2 color-scheme: light dark; 3} 4 5/* becomes */ 6 7:root { 8 --csstools-color-scheme--light: initial; 9 color-scheme: light dark; 10}@media (prefers-color-scheme: dark) {:root { 11 --csstools-color-scheme--light: ; 12} 13}
Dynamically alter the supported color scheme for some elements:
1:root { 2 /* Root only supports light mode */ 3 color-scheme: light; 4} 5 6.foo { 7 /* This element and its children only support dark mode */ 8 color-scheme: dark; 9} 10 11/* becomes */ 12 13:root { 14 /* Root only supports light mode */ 15 --csstools-color-scheme--light: initial; 16 color-scheme: light; 17} 18 19.foo { 20 /* This element and its children only support dark mode */ 21 --csstools-color-scheme--light: ; 22 color-scheme: dark; 23}
Usage
Add PostCSS Light Dark Function to your project:
1npm install postcss @csstools/postcss-light-dark-function --save-dev
Use it as a PostCSS plugin:
1const postcss = require('postcss'); 2const postcssLightDarkFunction = require('@csstools/postcss-light-dark-function'); 3 4postcss([ 5 postcssLightDarkFunction(/* pluginOptions */) 6]).process(YOUR_CSS /*, processOptions */);
Options
preserve
The preserve option determines whether the original notation
is preserved. By default, it is preserved.
1postcssLightDarkFunction({ preserve: false })
1.foo { 2 color: light-dark(pink, magenta); 3} 4 5.bar { 6 --bar: light-dark(cyan, deepskyblue); 7} 8 9/* becomes */ 10 11.foo { 12 --csstools-light-dark-toggle--0: var(--csstools-color-scheme--light) magenta; 13 color: var(--csstools-light-dark-toggle--0, pink); 14} 15 16.bar { 17 --csstools-light-dark-toggle--1: var(--csstools-color-scheme--light) deepskyblue; 18 --bar: var(--csstools-light-dark-toggle--1, cyan); 19 & * { 20 --csstools-light-dark-toggle--1: var(--csstools-color-scheme--light) deepskyblue; 21 --bar: var(--csstools-light-dark-toggle--1, cyan); 22 } 23}
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
preservetofalseor if you bring your own fix for Custom Properties.
See what the plugin does in its README.
1postcssLightDarkFunction({ enableProgressiveCustomProperties: false })
No vulnerabilities found.
Reason
30 commit(s) and 8 issue activity found in the last 90 days -- score normalized to 10
Reason
license file detected
Details
- Info: project has a license file: LICENSE.md:0
- Info: FSF or OSI recognized license: MIT No Attribution: LICENSE.md:0
Reason
no dangerous workflow patterns detected
Reason
security policy file detected
Details
- Info: security policy file detected: SECURITY.md:1
- Info: Found linked content: SECURITY.md:1
- Info: Found disclosure, vulnerability, and/or timelines in security policy: SECURITY.md:1
- Info: Found text in security policy: SECURITY.md:1
Reason
no binaries found in the repo
Reason
1 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw
Reason
SAST tool detected but not run on all commits
Details
- Info: SAST configuration detected: CodeQL
- Warn: 0 commits out of 9 are checked with a SAST tool
Reason
branch protection is not maximal on development and all release branches
Details
- Info: 'allow deletion' disabled on branch 'main'
- Info: 'force pushes' disabled on branch 'main'
- Info: 'branch protection settings apply to administrators' is required to merge on branch 'main'
- Warn: could not determine whether codeowners review is allowed
- Warn: no status checks found to merge onto branch 'main'
- Warn: PRs are not required to make changes on branch 'main'; or we don't have data to detect it.If you think it might be the latter, make sure to run Scorecard with a PAT or use Repo Rules (that are always public) instead of Branch Protection settings
Reason
dependency not pinned by hash detected -- score normalized to 3
Details
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/codeql.yml:24: update your workflow using https://app.stepsecurity.io/secureworkflow/csstools/postcss-plugins/codeql.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/codeql.yml:27: update your workflow using https://app.stepsecurity.io/secureworkflow/csstools/postcss-plugins/codeql.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/codeql.yml:33: update your workflow using https://app.stepsecurity.io/secureworkflow/csstools/postcss-plugins/codeql.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/codeql.yml:42: update your workflow using https://app.stepsecurity.io/secureworkflow/csstools/postcss-plugins/codeql.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/deploy-preset-env.yml:20: update your workflow using https://app.stepsecurity.io/secureworkflow/csstools/postcss-plugins/deploy-preset-env.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/deploy-preset-env.yml:23: update your workflow using https://app.stepsecurity.io/secureworkflow/csstools/postcss-plugins/deploy-preset-env.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/labeler.yml:13: update your workflow using https://app.stepsecurity.io/secureworkflow/csstools/postcss-plugins/labeler.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/lint.yml:17: update your workflow using https://app.stepsecurity.io/secureworkflow/csstools/postcss-plugins/lint.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/lint.yml:20: update your workflow using https://app.stepsecurity.io/secureworkflow/csstools/postcss-plugins/lint.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test.yml:34: update your workflow using https://app.stepsecurity.io/secureworkflow/csstools/postcss-plugins/test.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test.yml:37: update your workflow using https://app.stepsecurity.io/secureworkflow/csstools/postcss-plugins/test.yml/main?enable=pin
- Warn: npmCommand not pinned by hash: .github/workflows/test.yml:98
- Info: 0 out of 11 GitHub-owned GitHubAction dependencies pinned
- Info: 6 out of 7 npmCommand dependencies pinned
Reason
Found 1/24 approved changesets -- score normalized to 0
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
detected GitHub workflow tokens with excessive permissions
Details
- Warn: no topLevel permission defined: .github/workflows/codeql.yml:1
- Warn: no topLevel permission defined: .github/workflows/deploy-preset-env.yml:1
- Warn: no topLevel permission defined: .github/workflows/labeler.yml:1
- Warn: no topLevel permission defined: .github/workflows/lint.yml:1
- Warn: no topLevel permission defined: .github/workflows/test.yml:1
- Info: no jobLevel write permissions found
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Score
5.8
/10
Last Scanned on 2025-06-30
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More