Never Publish Malarkey

    @magica11y/inverted-colors

    1.0.7 • Public • Published

    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 ❤️ by Rishabh.

    Twitter

    Install

    npm i @magica11y/inverted-colors

    DownloadsWeekly Downloads

    4

    Version

    1.0.7

    License

    MIT

    Unpacked Size

    24.9 kB

    Total Files

    14

    Last publish

    Collaborators

    • rishabhsrao