css-prefers-color-scheme
Advanced tools
Comparing version 1.0.0 to 2.0.0
# Changes to Prefers Color Scheme | ||
### 2.0.0 (November 3, 2018) | ||
- The client library now returns an object with various features, including: | ||
- `scheme` to get or set the preferred color scheme | ||
- `hasNativeSupport` to report whether `prefers-color-scheme` is supported | ||
- `onChange` to listen for when the preferred color scheme changes | ||
- `removeListener` to destroy the native `prefers-color-scheme` listener | ||
### 1.0.0 (September 24, 2018) | ||
- Initial version |
{ | ||
"name": "css-prefers-color-scheme", | ||
"version": "1.0.0", | ||
"description": "Use a light or dark color theme in CSS CSS", | ||
"version": "2.0.0", | ||
"description": "Use light and dark color schemes in all browsers", | ||
"author": "Jonathan Neal <jonathantneal@hotmail.com>", | ||
@@ -10,7 +10,10 @@ "license": "CC0-1.0", | ||
"bugs": "https://github.com/csstools/css-prefers-color-scheme/issues", | ||
"main": "client.js", | ||
"module": "client.mjs", | ||
"main": "index.js", | ||
"module": "index.mjs", | ||
"files": [ | ||
"client.js", | ||
"client.mjs", | ||
"browser.js", | ||
"browser.js.map", | ||
"browser.min.js", | ||
"index.mjs", | ||
"index.js", | ||
"postcss.js", | ||
@@ -20,8 +23,11 @@ "postcss.mjs" | ||
"scripts": { | ||
"build": "npm run build:client && npm run build:postcss", | ||
"build:client": "rollup -c .rollup.client.js --silent", | ||
"build:postcss": "rollup -c .rollup.postcss.js --silent", | ||
"build": "npm run build:browser && npm run build:node && npm run build:postcss", | ||
"build:browser": "npm run build:browser:dist && npm run build:browser:min", | ||
"build:browser:dist": "cross-env NODE_ENV=browser rollup -c .rollup.js --silent", | ||
"build:browser:min": "cross-env NODE_ENV=browser:min rollup -c .rollup.js --silent", | ||
"build:node": "rollup -c .rollup.js --silent", | ||
"build:postcss": "cross-env NODE_ENV=postcss rollup -c .rollup.js --silent", | ||
"prepublishOnly": "npm test", | ||
"pretest": "npm run build", | ||
"test": "echo 'Running tests...'; npm run test:js && npm run test:tape", | ||
"test": "npm run test:js && npm run test:tape", | ||
"test:js": "eslint src/*.js --cache --ignore-path .gitignore --quiet", | ||
@@ -34,14 +40,16 @@ "test:tape": "postcss-tape --plugin=postcss.js" | ||
"dependencies": { | ||
"postcss": "^7.0.2" | ||
"postcss": "^7.0.5" | ||
}, | ||
"devDependencies": { | ||
"@babel/core": "^7.1.0", | ||
"@babel/preset-env": "^7.0.0", | ||
"babel-eslint": "^9.0.0", | ||
"eslint": "^5.6.0", | ||
"@babel/core": "^7.1.2", | ||
"@babel/preset-env": "^7.1.0", | ||
"babel-eslint": "^10.0.1", | ||
"cross-env": "^5.2.0", | ||
"eslint": "^5.8.0", | ||
"eslint-config-dev": "^2.0.0", | ||
"postcss-tape": "^2.2.0", | ||
"pre-commit": "^1.2.2", | ||
"rollup": "^0.66.2", | ||
"rollup-plugin-babel": "^4.0.1", | ||
"rollup": "^0.66.6", | ||
"rollup-plugin-babel": "^4.0.3", | ||
"rollup-plugin-terser": "^3.0.0", | ||
"uglify-js": "^3.4.9" | ||
@@ -48,0 +56,0 @@ }, |
@@ -17,13 +17,22 @@ 'use strict'; | ||
var postcss$1 = postcss.plugin('postcss-prefers-color-scheme', () => root => { | ||
root.walkAtRules(mediaRegExp, atRule => { | ||
const params = atRule.params; | ||
const altParams = params.replace(prefersInterfaceRegExp, prefersInterfaceReplacer); | ||
var postcss$1 = postcss.plugin('postcss-prefers-color-scheme', opts => { | ||
const preserve = 'preserve' in Object(opts) ? opts.preserve : false; | ||
return root => { | ||
root.walkAtRules(mediaRegExp, atRule => { | ||
const params = atRule.params; | ||
const altParams = params.replace(prefersInterfaceRegExp, prefersInterfaceReplacer); | ||
if (params !== altParams) { | ||
atRule.params = altParams; | ||
} | ||
}); | ||
if (params !== altParams) { | ||
if (preserve) { | ||
atRule.cloneBefore({ | ||
params: altParams | ||
}); | ||
} else { | ||
atRule.params = altParams; | ||
} | ||
} | ||
}); | ||
}; | ||
}); | ||
module.exports = postcss$1; |
133
README.md
@@ -7,4 +7,4 @@ # Prefers Color Scheme [<img src="https://jonathantneal.github.io/dom-logo.svg" alt="PostCSS" width="90" height="90" align="right">][Prefers Color Scheme] | ||
[Prefers Color Scheme] lets you use light or dark color themes in CSS, | ||
following the [Media Queries] specification. | ||
[Prefers Color Scheme] lets you use light and dark color schemes in all | ||
browsers, following the [Media Queries] specification. | ||
@@ -15,2 +15,12 @@ ```bash | ||
There are 2 steps required to get color schemes working: | ||
- Transform your queries using the included [PostCSS plugin](#PostCSS-Plugin). | ||
- Apply your queries using the included [browser library](#Browser-Library). | ||
## PostCSS Plugin | ||
[Prefers Color Scheme] transforms `prefers-color-scheme` media queries into | ||
something all browsers understand. | ||
```css | ||
@@ -29,7 +39,5 @@ @media (prefers-color-scheme: dark) { | ||
} | ||
``` | ||
[PostCSS] transforms these into cross-browser compatible `color-index` queries: | ||
/* becomes */ | ||
```css | ||
@media (color-index: 48) { | ||
@@ -49,27 +57,98 @@ :root { | ||
`CSS._prefersColorScheme()` applies these “light mode” and “dark mode” queries | ||
to documents on the fly. The entire frontend script is less than 300 bytes. | ||
## Browser Library | ||
[Prefers Color Scheme] works in all major browsers, including Safari 6+ and | ||
Internet Explorer 9+. | ||
[See it for yourself.](https://app.crossbrowsertesting.com/public/i76b092cd2b52b86/screenshots/z25c0ccdfcc9c9b8956f?size=medium&type=windowed) | ||
[Prefers Color Scheme] applies color schemes previously transformed by the | ||
[PostCSS plugin](#PostCSS-Plugin). | ||
```js | ||
const prefersColorScheme = require('css-prefers-color-scheme'); | ||
// initialize prefersColorScheme (applies the system color scheme, if available) | ||
const prefersColorScheme = require('css-prefers-color-scheme')(); | ||
// apply "dark" queries | ||
prefersColorScheme('dark'); | ||
prefersColorScheme.scheme = 'dark'; | ||
// apply "light" queries (also disabling "dark" queries) | ||
prefersColorScheme('light'); | ||
prefersColorScheme.scheme = 'light'; | ||
``` | ||
## PostCSS Usage | ||
The script is also available from the [unpkg.com](https://unpkg.com/) CDN: | ||
Add [Prefers Color Scheme] to your project: | ||
```html | ||
<script src="https://unpkg.com/css-prefers-color-scheme/browser.js"></script> | ||
<script> | ||
// initialize prefersColorScheme (applies the system color scheme, if available) | ||
initPrefersColorScheme() | ||
</script> | ||
``` | ||
```bash | ||
npm install css-prefers-color-scheme --save-dev | ||
A minified version is also available: | ||
```html | ||
<script src="https://unpkg.com/css-prefers-color-scheme/browser.js"></script> | ||
<script> | ||
// initialize prefersColorScheme (applies the system color scheme, if available) | ||
initPrefersColorScheme() | ||
</script> | ||
``` | ||
[Prefers Color Scheme] works in all major browsers, including Safari 6+ and | ||
Internet Explorer 9+ without any polyfills. | ||
[See it for yourself.](https://app.crossbrowsertesting.com/public/i76b092cd2b52b86/screenshots/z25c0ccdfcc9c9b8956f?size=medium&type=windowed) | ||
--- | ||
## Browser Usage | ||
Use [Prefers Color Scheme] to activate your `prefers-color-scheme` queries: | ||
```js | ||
const prefersColorScheme = require('css-prefers-color-scheme')(); | ||
``` | ||
By default, the system color scheme is applied, if your browser supports it. | ||
Otherwise, the light color scheme is applied. You may override this by passing | ||
in a color scheme. | ||
```js | ||
const prefersColorScheme = require('css-prefers-color-scheme')('dark'); | ||
``` | ||
The `prefersColorScheme` object returns the following properties: | ||
### value | ||
The `value` property returns the currently preferred color scheme, and can be | ||
set to change it. | ||
```js | ||
const prefersColorScheme = require('css-prefers-color-scheme')(); | ||
// log the preferred color scheme | ||
console.log(prefersColorScheme.scheme); | ||
// apply "dark" queries | ||
prefersColorScheme.scheme = 'dark'; | ||
``` | ||
### hasNativeSupport | ||
The `hasNativeSupport` boolean represents whether `prefers-color-scheme` is | ||
supported by the current browser. | ||
### onChange | ||
The `onChange` function can be added in order to listen for changes to the | ||
preferred color scheme, whether they are triggered by the system or manually by | ||
the `change` function. | ||
### removeListener | ||
The `removeListener` function removes the native `prefers-color-scheme` | ||
listener, which may or may not be applied, depending on your browser support. | ||
This is provided to give you complete control over plugin cleanup. | ||
--- | ||
## PostCSS Usage | ||
Use [Prefers Color Scheme] to process your CSS: | ||
@@ -102,9 +181,15 @@ | ||
## How does the frontend work? | ||
## How does it work? | ||
The `color-index` media query is understood in all major browsers going back to | ||
Internet Explorer 9, but all implementations only seem to allow a `color-index` | ||
of `0`. | ||
The [Prefers Color Scheme] [PostCSS plugin](#PostCSS-Plugin) transforms | ||
`prefers-color-scheme` queries into `color-index` queries, changing | ||
`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)`. | ||
This script changes `(color-index: 48)` queries into | ||
The frontend receives these `color-index` queries, which are understood in all | ||
major browsers going back to Internet Explorer 9. However, all browsers only | ||
apply a `color-index` of `0`, so all other values are otherwise ignored. | ||
[Prefers Color Scheme] changes `(color-index: 48)` queries into | ||
`not all and (color-index: 48)` to activate “dark mode” specific CSS, and then | ||
@@ -115,3 +200,3 @@ it inverts `(color-index: 70)` queries into `not all and (color-index: 48)` | ||
```css | ||
@media (color-index: 70) { /* "light" query */ | ||
@media (color-index: 70) { /* prefers-color-scheme: light */ | ||
body { | ||
@@ -125,3 +210,3 @@ background-color: white; | ||
These valid queries are accessible to `document.styleSheet`, so no css parsing | ||
is required to use this library, which is how the script is less than 300 bytes. | ||
is required to use this library, which is how the script is only 482 bytes. | ||
@@ -128,0 +213,0 @@ ## Why does the fallback work this way? |
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
29337
11
203
222
12
1
Updatedpostcss@^7.0.5