magica11y / inverted-colors

🌑 Detects the user’s preferences for inverted colors using the 'inverted-colors' CSS3 level 5 media query.

Home Page:https://magica11y.github.io

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

invertedColors()

Detects the user’s preferences for inverted colors using the inverted-colors CSS3 level 5 media query.

Travis NPM Bundlephobia Bundlephobia Coveralls David DM David DM NodeJS License Snyk

Magica11y cover

✨ Introduction

Quoting from the CSS3 level 5 media queries specfication…

The 'inverted-colors' media feature indicates whether the content is displayed normally, or whether colors have been inverted.

🌑 invertedColors() is part of 🔮 Magica11y, which provides a suite of functions to detect “user-preference” and “environment” media features.

Magica11y functions are awesome because…

  • They have zero dependencies
  • They’re lightweight; e.g. invertedColors() is just Bundlephobia minified, or Bundlephobia minified & gzipp’d
  • They use the window.matchMedia API underneath
  • They’re optimized for performance; all the module functions are designed in such a way that they exit early
  • They provide a clean, well-documented and semantic API to work with

In addition to invertedColors(), Magica11y also provides…

🚀 Getting started

🏗️ Installation

You can install invertedColors() using a package manager such as yarn or npm

$ yarn add "@magica11y/inverted-colors"
# OR
$ npm install --save "@magica11y/inverted-colors"

You can also include invertedColors() from a CDN on your page, such as jsDelivr or unpkg

<script src="https://cdn.jsdelivr.net/npm/@magica11y/inverted-colors@latest/dist/magica11y.invertedColors.min.js"></script>
<!-- OR -->
<script src="https://unpkg.com/@magica11y/inverted-colors@latest/dist/magica11y.invertedColors.js"></script>

🎲 Usage

invertedColors() is distributed as a UMD module, so you can use it as a browser global…

var invertedColorsPreference = window.magica11y.invertedColors.default();
var areColorsInverted = (invertedColorsPreference === window.magica11y.invertedColors.colorPreferences.INVERTED);

… or as a CommonJS module…

const invertedColors = require('@magica11y/inverted-colors');
const invertedColorsPreference = invertedColors.default();
const areColorsInverted = (invertedColorsPreference === invertedColors.colorPreferences.INVERTED);

… or as an ES module…

import invertedColors, { colorPreferences } from '@magica11y/invertedColors';

const invertedColorsPreference = invertedColors();
const areColorsInverted = (invertedColorsPreference === colorPreferences.INVERTED);

The colorPreferences object contains all the possible values supported by the 'inverted-colors' media query…

  • colorPreferences.NONE (spec: 'none')

    Colors are displayed normally.

  • colorPreferences.INVERTED (spec: 'inverted')

    All pixels within the displayed area have been inverted.

  • null

    The user’s preference could not be determined.

🏁 Typechecking

You can import the Flow types from the provided libdefs in node_modules/@magica11y/inverted-colors/lib by configuring them in your .flowconfig

[libs]
node_modules/@magica11y/inverted-colors/lib

Now, you can use the Flow types as follows…

// @flow
import invertedColors, { type ColorPreference } from '@magica11y/inverted-colors';

const invertedColorsPreference: ?ColorPreference = invertedColors();

🎩 Note: invertedColors() returns a nullable type (i.e. ColorPreference). So using the ? prefix to indicate nullable types is recommended (i.e. ?ColorPreference).

📜 License

License

See LICENSE.md for more details.

Handcrafted with :heart: by Rishabh.

Twitter

About

🌑 Detects the user’s preferences for inverted colors using the 'inverted-colors' CSS3 level 5 media query.

https://magica11y.github.io

License:MIT License


Languages

Language:JavaScript 100.0%