{"id":21361886,"url":"https://github.com/magica11y/light-level","last_synced_at":"2025-03-16T06:45:21.430Z","repository":{"id":35032077,"uuid":"198621300","full_name":"magica11y/light-level","owner":"magica11y","description":"🕯 Detects the ambient light-level of the user’s device using the 'light-level' CSS3 level 5 media query.","archived":false,"fork":false,"pushed_at":"2023-10-17T10:50:40.000Z","size":721,"stargazers_count":1,"open_issues_count":2,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-07T09:35:44.849Z","etag":null,"topics":["a11y","accessibility","css-mediaquery","light-level","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-24T11:23:21.000Z","updated_at":"2022-09-21T14:32:17.000Z","dependencies_parsed_at":"2024-11-22T06:12:39.558Z","dependency_job_id":"cb303b1c-a77c-40c4-947f-ff654cbcbfe4","html_url":"https://github.com/magica11y/light-level","commit_stats":null,"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/magica11y%2Flight-level","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/magica11y%2Flight-level/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/magica11y%2Flight-level/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/magica11y%2Flight-level/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/magica11y","download_url":"https://codeload.github.com/magica11y/light-level/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243835930,"owners_count":20355611,"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","light-level","matchmedia"],"created_at":"2024-11-22T06:12:37.325Z","updated_at":"2025-03-16T06:45:21.412Z","avatar_url":"https://github.com/magica11y.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# :skull: Deprecation notice\n\nThe `light-level` media query was deprecated in the [2020-07-15 draft](https://www.w3.org/TR/mediaqueries-5/#changes-since-2020-07-15) because it is redundant with the `prefers-contrast` and `prefers-color-scheme`.\n\nPlease use the other Magica11y functions, :last_quarter_moon: [`prefersColorScheme()`](https://github.com/magica11y/prefers-color-scheme) and :high_brightness: [`prefersContrast()`](https://github.com/magica11y/prefers-contrast), instead.\n\n----\n\n`lightLevel()`\n==============\n\u003e Detects the ambient light-level of the user’s device using the `light-level` CSS3 level 5 media query.\n\n[![Travis](https://img.shields.io/travis/com/magica11y/light-level.svg?style=for-the-badge)](https://app.travis-ci.com/github/magica11y/light-level)\n[![NPM](https://img.shields.io/npm/v/@magica11y/light-level.svg?style=for-the-badge \"NPM\")](https://www.npmjs.com/package/@magica11y/light-level)\n[![Bundlephobia](https://img.shields.io/bundlephobia/min/@magica11y/light-level.svg?style=for-the-badge \"Bundle size (minified)\")](https://bundlephobia.com/result?p=@magica11y/light-level)\n[![Bundlephobia](https://img.shields.io/bundlephobia/minzip/@magica11y/light-level.svg?style=for-the-badge \"Bundle size (minified+gzipped)\")](https://bundlephobia.com/result?p=@magica11y/light-level)\n[![Coveralls](https://img.shields.io/coveralls/github/magica11y/light-level.svg?style=for-the-badge \"Test coverage status\")](https://coveralls.io/github/magica11y/light-level)\n[![David DM](https://img.shields.io/david/magica11y/light-level.svg?style=for-the-badge \"Dependencies\")](https://david-dm.org/magica11y/light-level)\n[![David DM](https://img.shields.io/david/dev/magica11y/light-level.svg?style=for-the-badge \"Dev Dependencies\")](https://david-dm.org/magica11y/light-level?type=dev)\n[![NodeJS](https://img.shields.io/node/v/@magica11y/light-level.svg?style=for-the-badge \"Node engine\")](https://www.npmjs.com/package/@magica11y/light-level)\n[![License](https://img.shields.io/github/license/magica11y/light-level.svg?style=for-the-badge \"MIT license\")](LICENSE.md)\n[![Snyk](https://img.shields.io/snyk/vulnerabilities/github/magica11y/light-level?style=for-the-badge \"Snyk vulnerabilities status\")](https://snyk.io/test/github/magica11y/light-level?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://drafts.csswg.org/mediaqueries-5)\n[media queries](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries) specfication…\n\n\u003e The [`light-level`](https://drafts.csswg.org/mediaqueries-5/#light-level) media feature\n\u003e is used to detect if the user has requested the system to minimize the amount of animation or motion it uses.\n\n:candle: **`lightLevel()`** is part of :crystal_ball: [**Magica11y**](https://magica11y.github.io),\nwhich 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. `lightLevel()` is just [![Bundlephobia](https://img.shields.io/bundlephobia/min/@magica11y/light-level.svg?style=flat-square\u0026label \"Bundle size (minified)\")](https://bundlephobia.com/result?p=@magica11y/light-level) minified, or [![Bundlephobia](https://img.shields.io/bundlephobia/minzip/@magica11y/light-level.svg?style=flat-square\u0026label \"Bundle size (minified+gzipped)\")](https://bundlephobia.com/result?p=@magica11y/light-level) 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 `lightLevel()`, [Magica11y](https://magica11y.github.io) also provides…\n\n  * :tv: [`environmentBlending()`](https://github.com/magica11y/environment-blending)\n  * :new_moon: [`invertedColors()`](https://github.com/magica11y/inverted-colors)\n  * :art: [`forcedColors()`](https://github.com/magica11y/forced-colors)\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 `lightLevel()` using a package manager such as [`yarn`](https://yarnpkg.com/en/package/@magica11y/light-level) or [`npm`](https://www.npmjs.com/package/@magica11y/light-level)…\n\n```sh\n$ yarn add \"@magica11y/light-level\"\n# OR\n$ npm install --save \"@magica11y/light-level\"\n```\n\nYou can also include `lightLevel()` from a CDN on your page, such as [jsDelivr](https://www.jsdelivr.com/package/npm/@magica11y/light-level) or [unpkg](https://unpkg.com/@magica11y/light-level)…\n\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/@magica11y/light-level@latest/dist/magica11y.lightLevel.min.js\"\u003e\u003c/script\u003e\n\u003c!-- OR --\u003e\n\u003cscript src=\"https://unpkg.com/@magica11y/light-level@latest/dist/magica11y.lightLevel.js\"\u003e\u003c/script\u003e\n```\n\n## :game_die: Usage\n\n`lightLevel()` is distributed as a [UMD](https://github.com/umdjs/umd) module, so you can use it as a browser global…\n\n```js\nvar currentLightLevel = window.magica11y.lightLevel.default();\nvar disableAnimations = (currentLightLevel === window.magica11y.lightLevel.availableLightLevels.DIM);\n```\n\n… or as a CommonJS module…\n\n```js\nconst lightLevel = require('@magica11y/light-level');\nconst currentLightLevel = lightLevel.default();\nconst disableAnimations = (currentLightLevel === lightLevel.availableLightLevels.DIM);\n```\n\n… or as an ES module…\n\n```js\nimport lightLevel, { availableLightLevels } from '@magica11y/lightLevel';\n\nconst currentLightLevel = lightLevel();\nconst enableDarkMode = (currentLightLevel === availableLightLevels.DIM);\n```\n\nThe `availableLightLevels` object contains all the possible values supported by the `'light-level'` media query…\n\n* `availableLightLevels.NORMAL` (spec: [`'normal'`](https://drafts.csswg.org/mediaqueries-5/#valdef-media-light-level-normal))\n  \u003e The device is used in a environment with a light level in the ideal range for the screen, and which does not necessitate any particular adjustment.\n* `availableLightLevels.DIM` (spec: [`'dim'`](https://drafts.csswg.org/mediaqueries-5/#valdef-media-light-level-dim))\n  \u003e The device is used in a dim environment, where excessive contrast and brightness would be distracting or uncomfortable to the reader. For example: night time, or a dimly illuminated indoor environment.\n* `availableLightLevels.WASHED` (spec: [`'washed'`](https://drafts.csswg.org/mediaqueries-5/#valdef-media-light-level-washed))\n  \u003e The device is used in an exceptionally bright environment, causing the screen to be washed out and difficult to read. For example: bright daylight.\n* `null`\n  \u003e The device’s ambient light-level 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/light-level/lib` by configuring them in your `.flowconfig`…\n\n```\n[libs]\nnode_modules/@magica11y/light-level/lib\n```\n\nNow, you can use the Flow types as follows…\n\n```js\n// @flow\nimport lightLevel, { type LightLevel } from '@magica11y/light-level';\n\nconst currentLightLevel: ?LightLevel = lightLevel();\n```\n\n:tophat: **Note**: `lightLevel()` returns a [`nullable`](https://flow.org/en/docs/types/primitives/#toc-null-and-void)\ntype (i.e. `LightLevel`). So using the `?` prefix to indicate nullable types is recommended (i.e. `?LightLevel`).\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%2Flight-level","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmagica11y%2Flight-level","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmagica11y%2Flight-level/lists"}