css-prefers-color-scheme

v4.0.0

Use light and dark color schemes in all browsers

NPM

README

GitHub

Website

CC0-1.0

Latest version published 2 years ago

    npm install css-prefers-color-scheme

We couldn't find any similar packages Browse all packages

Package Health Score

52 / 100

Popularity
Influential project
Maintenance
Inactive
Security
No known security issues
Community
Limited

Make sure the open source you're using is safe to use

Secure my Project

Popularity

Influential project

Weekly Downloads (3,279,457)

Dependents: 14
GitHub Stars: 88
Forks: 5
Contributors: 2

The npm package css-prefers-color-scheme receives a total of 3,279,457 downloads a week. As such, we scored css-prefers-color-scheme popularity level to be Influential project.

Based on project statistics from the GitHub repository for the npm package css-prefers-color-scheme, we found that it has been starred 88 times, and that 14 other projects in the ecosystem are dependent on it.

Downloads are calculated as moving averages for a period of the last 12 months, excluding weekends and known missing data points.

Security

No known security issues

Security and license risk for significant versions

All Versions

Direct Vulnerabilities

1.0.0

2.0.0

3.1.1

4.0.0

Indirect Vulnerabilities

1.0.0

2.0.0

3.1.1

4.0.0

License Risks

1.0.0

2.0.0

3.1.1

4.0.0

All security vulnerabilities belong to production dependencies of direct and indirect packages.

License

CC0-1.0

Security Policy

We found a way for you to contribute to the project! Looks like css-prefers-color-scheme is missing a security policy.

You can connect your project's repository to Snyk to stay up to date on security alerts and receive automatic fix pull requests.

We found a way for you to contribute to the project! Looks like css-prefers-color-scheme is missing a security policy.

    # Install the Snyk CLI and test your project
npm i snyk && snyk test css-prefers-color-scheme

Keep your project free of vulnerabilities with Snyk

Maintenance

Inactive

Commit Frequency

Open Issues: 1
Merged PR: 5
Open PR: 1
Last Commit: 9 months ago

Further analysis of the maintenance status of css-prefers-color-scheme based on released npm versions cadence, the repository activity, and other data points determined that its maintenance is Inactive.

An important project maintenance signal to consider for css-prefers-color-scheme is that it hasn't seen any new versions released to npm in the past 12 months, and could be considered as a discontinued project, or that which receives low attention from its maintainers.

In the past month we didn't find any pull request activity or change in issues status has been detected for the GitHub repository.

Community

Limited

Readme.md: No
Contributing.md: No
Code of Conduct: No
Contributors: 2
Funding: No

This project has seen only 10 or less contributors.

We found a way for you to contribute to the project! Looks like css-prefers-color-scheme is missing a Code of Conduct.

How about a good first contribution to this project? It seems that css-prefers-color-scheme is missing a README file.

Embed Package Health Score Badge

Package

Node.js Compatibility: >=8.0.0

Age: 2 years
Dependencies: 1 Direct / 10 Total
Versions: 7
Install Size: 41.4 kB
Dist-tags: 1
# of Files: 14
Maintainers: 1
TS Typings: No

We detected a total of 10 direct & transitive dependencies for css-prefers-color-scheme. See the full dependency tree of css-prefers-color-scheme

css-prefers-color-scheme has more than a single and default latest tag published for the npm package. This means, there may be other tags available for this package, such as next to indicate future releases, or stable to indicate stable releases.

Prefers Color Scheme

Prefers Color Scheme lets you use light and dark color schemes in all browsers, following the Media Queries specification.

Usage

From the command line, transform CSS files that use prefers-color-scheme media queries:

npx css-prefers-color-scheme SOURCE.css TRANSFORMED.css

Next, use that transformed CSS with this script:

<link rel="stylesheet" href="TRANSFORMED.css">
<script src="https://unpkg.com/css-prefers-color-scheme/browser.min"></script>
<script>
colorScheme = initPrefersColorScheme('dark') // apply "dark" queries (you can change it afterward, too)
</script>

Dependencies got you down? Don’t worry, this script is only 537 bytes.

Usage

First, transform prefers-color-scheme queries using this PostCSS plugin.
Next, apply light and dark color schemes everywhere using this browser script.

How does it work?

Prefers Color Scheme uses a PostCSS plugin to transform prefers-color-scheme queries into color-index queries. This changes prefers-color-scheme: dark into (color-index: 48), prefers-color-scheme: light into (color-index: 70), and prefers-color-scheme: no-preference into (color-index: 22).

The frontend receives these color-index queries, which are understood in all major browsers going back to Internet Explorer 9. However, since browsers only apply color-index queries of 0, our color scheme values are ignored.

Prefers Color Scheme uses a browser script to change (color-index: 48) queries into not all and (color-index: 48) in order to activate “dark mode” specific CSS, and it changes (color-index: 70) queries into not all and (color-index: 48) to activate “light mode” specific CSS.

@media (color-index: 70) { /* prefers-color-scheme: light */
  body {
    background-color: white;
    color: black;
  }
}

Since these media queries are accessible to document.styleSheet, no CSS parsing is required.

Why does the fallback work this way?

The value of 48 is chosen for dark mode because it is the keycode for 0, the hexidecimal value of black. Likewise, 70 is chosen for light mode because it is the keycode for f, the hexidecimal value of white.