{"id":17613775,"url":"https://github.com/magica11y/environment-blending","last_synced_at":"2025-07-21T07:03:19.478Z","repository":{"id":98721074,"uuid":"198650161","full_name":"magica11y/environment-blending","owner":"magica11y","description":"📺 Detects the characteristics of the user’s display using the 'environment-blending' CSS3 level 5 media query.","archived":false,"fork":false,"pushed_at":"2023-10-17T10:41:15.000Z","size":757,"stargazers_count":1,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-07-09T00:47:08.245Z","etag":null,"topics":["a11y","accessibility","css-mediaquery","environment-blending","matchmedia"],"latest_commit_sha":null,"homepage":"https://magica11y.github.io","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/magica11y.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-07-24T14:19:29.000Z","updated_at":"2025-06-26T04:35:27.000Z","dependencies_parsed_at":"2024-10-22T21:37:11.836Z","dependency_job_id":null,"html_url":"https://github.com/magica11y/environment-blending","commit_stats":{"total_commits":19,"total_committers":4,"mean_commits":4.75,"dds":0.631578947368421,"last_synced_commit":"62caa250bb44d38268cb50f0740bea28676d6549"},"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"purl":"pkg:github/magica11y/environment-blending","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/magica11y%2Fenvironment-blending","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/magica11y%2Fenvironment-blending/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/magica11y%2Fenvironment-blending/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/magica11y%2Fenvironment-blending/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/magica11y","download_url":"https://codeload.github.com/magica11y/environment-blending/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/magica11y%2Fenvironment-blending/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266255244,"owners_count":23900098,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["a11y","accessibility","css-mediaquery","environment-blending","matchmedia"],"created_at":"2024-10-22T18:14:05.558Z","updated_at":"2025-07-21T07:03:19.456Z","avatar_url":"https://github.com/magica11y.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"`environmentBlending()`\n========================\n\u003e Detects the characteristics of the user’s display using 'environment-blending' CSS3 level 5 media query.\n\n[![Travis](https://img.shields.io/travis/com/magica11y/environment-blending.svg?style=for-the-badge)](https://app.travis-ci.com/github/magica11y/environment-blending)\n[![NPM](https://img.shields.io/npm/v/@magica11y/environment-blending.svg?style=for-the-badge \"NPM\")](https://www.npmjs.com/package/@magica11y/environment-blending)\n[![Bundlephobia](https://img.shields.io/bundlephobia/min/@magica11y/environment-blending.svg?style=for-the-badge \"Bundle size (minified)\")](https://bundlephobia.com/result?p=@magica11y/environment-blending)\n[![Bundlephobia](https://img.shields.io/bundlephobia/minzip/@magica11y/environment-blending.svg?style=for-the-badge \"Bundle size (minified+gzipped)\")](https://bundlephobia.com/result?p=@magica11y/environment-blending)\n[![Coveralls](https://img.shields.io/coveralls/github/magica11y/environment-blending.svg?style=for-the-badge \"Test coverage status\")](https://coveralls.io/github/magica11y/environment-blending)\n[![David DM](https://img.shields.io/david/magica11y/environment-blending.svg?style=for-the-badge \"Dependencies\")](https://david-dm.org/magica11y/environment-blending)\n[![David DM](https://img.shields.io/david/dev/magica11y/environment-blending.svg?style=for-the-badge \"Dev Dependencies\")](https://david-dm.org/magica11y/environment-blending?type=dev)\n[![NodeJS](https://img.shields.io/node/v/@magica11y/environment-blending.svg?style=for-the-badge \"Node engine\")](https://www.npmjs.com/package/@magica11y/environment-blending)\n[![License](https://img.shields.io/github/license/magica11y/environment-blending.svg?style=for-the-badge \"MIT license\")](LICENSE.md)\n[![Snyk](https://img.shields.io/snyk/vulnerabilities/github/magica11y/environment-blending?style=for-the-badge \"Snyk vulnerabilities status\")](https://snyk.io/test/github/magica11y/environment-blending?targetFile=package.json)\n\n[![Magica11y cover](https://cdn.jsdelivr.net/gh/magica11y/cauldron@1.0.7/assets/Magica11y-cover.jpg \"Magica11y cover\")](https://magica11y.github.io)\n\n\n# :sparkles: Introduction\n\nQuoting from the [CSS3](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS3) [level 5](https://www.w3.org/TR/mediaqueries-5/)\n[media queries](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries) specfication…\n\n\u003e The `environment-blending` media feature is used to query the characteristics of the user’s display so the author can adjust the style of the document. An author might choose to adjust the visuals and/or layout of the page depending on the display technology to increase the appeal or improve legibility.\n\n:tv: **`environmentBlending()`** is part of :crystal_ball: [**Magica11y**](https://magica11y.github.io), which provides a suite of functions to detect “user-preference” and “environment” media features.\n\n[Magica11y](https://magica11y.github.io) functions are awesome because…\n  * They have **zero** dependencies\n  * They’re **lightweight**; e.g. `environmentBlending()` is just [![Bundlephobia](https://img.shields.io/bundlephobia/min/@magica11y/environment-blending.svg?style=flat-square\u0026label \"Bundle size (minified)\")](https://bundlephobia.com/result?p=@magica11y/environment-blending) minified, or [![Bundlephobia](https://img.shields.io/bundlephobia/minzip/@magica11y/environment-blending.svg?style=flat-square\u0026label \"Bundle size (minified+gzipped)\")](https://bundlephobia.com/result?p=@magica11y/environment-blending) minified \u0026 gzipp’d\n  * They use the **[`window.matchMedia`](https://developer.mozilla.org/docs/Web/API/Window/matchMedia)** API underneath\n  * They’re optimized for **performance**; all the module functions are designed in such a way that they exit early\n  * They provide a **clean**, **well-documented** and **semantic** API to work with\n\nIn addition to `environmentBlending()`, [Magica11y](https://magica11y.github.io) also provides…\n\n  * :art: [`forcedColors()`](https://github.com/magica11y/forced-colors)\n  * :new_moon: [`invertedColors()`](https://github.com/magica11y/inverted-colors)\n  * ~:candle: [`lightLevel()`](https://github.com/magica11y/light-level)~\n  * :last_quarter_moon: [`prefersColorScheme()`](https://github.com/magica11y/prefers-color-scheme)\n  * :high_brightness: [`prefersContrast()`](https://github.com/magica11y/prefers-contrast)\n  * :roller_coaster: [`prefersReducedMotion()`](https://github.com/magica11y/prefers-reduced-motion)\n  * :gem: [`prefersReducedTransparency()`](https://github.com/magica11y/prefers-reduced-transparency)\n\n# :rocket: Getting started\n\n## :building_construction: Installation\n\nYou can install `environmentBlending()` using a package manager such as [`yarn`](https://yarnpkg.com/en/package/@magica11y/environment-blending) or [`npm`](https://www.npmjs.com/package/@magica11y/environment-blending)…\n\n```sh\n$ yarn add \"@magica11y/environment-blending\"\n# OR\n$ npm install --save \"@magica11y/environment-blending\"\n```\n\nYou can also include `environmentBlending()` from a CDN on your page, such as [jsDelivr](https://www.jsdelivr.com/package/npm/@magica11y/environment-blending) or [unpkg](https://unpkg.com/@magica11y/environment-blending)…\n\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/@magica11y/environment-blending@latest/dist/magica11y.environmentBlending.min.js\"\u003e\u003c/script\u003e\n\u003c!-- OR --\u003e\n\u003cscript src=\"https://unpkg.com/@magica11y/environment-blending@latest/dist/magica11y.environmentBlending.js\"\u003e\u003c/script\u003e\n```\n\n## :game_die: Usage\n\n`environmentBlending()` is distributed as a [UMD](https://github.com/umdjs/umd) module, so you can use it as a browser global…\n\n```js\nvar displayBlend = window.magica11y.environmentBlending.default();\nvar isAugmentedRealityDisplay = (displayBlend === window.magica11y.environmentBlending.availableDisplayBlends.ADDITIVE);\n```\n\n… or as a CommonJS module…\n\n```js\nconst environmentBlending = require('@magica11y/environment-blending');\nconst displayBlend = environmentBlending.default();\nconst isAugmentedRealityDisplay = (displayBlend === environmentBlending.availableDisplayBlends.ADDITIVE);\n```\n\n… or as an ES module…\n\n```js\nimport environmentBlending, { availableDisplayBlends } from '@magica11y/environmentBlending';\n\nconst displayBlend = environmentBlending();\nconst isAugmentedRealityDisplay = (displayBlend === availableDisplayBlends.ADDITIVE);\n```\n\nThe `availableDisplayBlends` object contains all the possible values supported by the `'environment-blending'` media query…\n\n* `availableDisplayBlends.OPAQUE` (spec: [`'opaque'`](https://www.w3.org/TR/mediaqueries-5/#valdef-media-environment-blending-opaque))\n  \u003e The document is rendered on an opaque medium, such as a traditional monitor or paper. Black is dark and white is 100% light.\n* `availableDisplayBlends.ADDITIVE` (spec: [`'additive'`](https://www.w3.org/TR/mediaqueries-5/#valdef-media-environment-blending-additive))\n  \u003e The display blends the colors of the canvas with the real world using additive mixing. Black is fully transparent and white is 100% light. For example: a head-up display in a car.\n* `availableDisplayBlends.SUBTRACTIVE` (spec: [`'subtractive'`](https://www.w3.org/TR/mediaqueries-5/#valdef-media-environment-blending-subtractive))\n  \u003e The display blends the colors of the canvas with the real world using subtractive mixing. White is fully transparent and dark colors have the most contrast. For example: an LCD display embedded in a bathroom mirror.\n* `null`\n  \u003e The display characteristics could not be determined.\n\n\n# :checkered_flag: Typechecking\n\nYou can import the [Flow](https://flow.org) types from the provided [libdefs](https://flow.org/en/docs/libdefs)\nin `node_modules/@magica11y/environment-blending/lib` by configuring them in your `.flowconfig`…\n\n```\n[libs]\nnode_modules/@magica11y/environment-blending/lib\n```\n\nNow, you can use the Flow types as follows…\n\n```js\n// @flow\nimport environmentBlending, { type DisplayBlend } from '@magica11y/environment-blending';\n\nconst displayBlend: ?DisplayBlend = environmentBlending();\n```\n\n:tophat: **Note**: `environmentBlending()` returns a [`nullable`](https://flow.org/en/docs/types/primitives/#toc-null-and-void)\ntype (i.e. `DisplayBlend`). So using the `?` prefix to indicate nullable types is recommended (i.e. `?DisplayBlend`).\n\n\n# :scroll: License\n\n[![License](https://img.shields.io/github/license/magica11y/magica11y.svg?style=for-the-badge \"MIT license\")](LICENSE.md)\n\nSee [LICENSE.md](LICENSE.md) for more details.\n\nHandcrafted with :heart: by [Rishabh](https://rishabh.ink).\n\n[![Twitter](https://img.shields.io/twitter/follow/rishabh_ink.svg?style=social)](https://twitter.com/rishabh_ink)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmagica11y%2Fenvironment-blending","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmagica11y%2Fenvironment-blending","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmagica11y%2Fenvironment-blending/lists"}