Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@assortment/darkmodejs

Package Overview
Dependencies
Maintainers
1
Versions
7
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@assortment/darkmodejs

Utility package for managing Dark Mode on the web

  • 0.0.1
  • Source
  • npm
  • Socket score

Version published
Maintainers
1
Created
Source

darkmodejs

Status GitHub Issues GitHub Pull Requests License


Utility package for managing Dark Mode on the web.

Dark Mode is a feature in modern Operating Systems which allows you to change your default UI from a light to dark theme. On the web we can take advantage of this to control the theme of our website.

Utilises the matchMedia API and its listeners, in combination with the prefers-color-scheme media query, in order to fire functions whenever you're in Dark Mode.

📝 Prerequisites

Requires an Operating System which supports Dark Mode:

  • macOS 10.14
  • iOS 13.0
  • iPadOS 13.0
  • Windows 10
  • ... or greater

Also requires support for the prefers-color-scheme media query. A complete list of supported browsers can be found on caniuse.

🏁 Install

$ npm install @assortment/darkmodejs

🎈 Usage

import darkmode from '@assortment/darkmodejs';

const config = { onChange: (activeTheme, themes) => {} };

darkmode(config);

If you need ES5 support, you can require the package instead.

const darkmode = require('@assortment/darkmodejs');

An example could be logging to console when a theme is active:

import darkmode from '@assortment/darkmodejs';

const onChange = (activeTheme, themes) => {
  switch (activeTheme) {
    case themes.DARK:
      console.log('darkmode enabled');
      break;
    case themes.LIGHT:
      console.log('lightmode enabled');
      break;
    case themes.NO_PREF:
      console.log('no preference enabled');
      break;
    case themes.NO_SUPP:
      console.log('no support sorry');
      break;
  }
};

darkmode({ onChange });

⚙ API

darkmodejs accepts a config object, which in turn accepts a single function of onChange.

onChange(activeTheme, themes)

Type: Function. Required: No.

This function is called when darkmodejs is executed to check:

  • if there is support for prefers-color-scheme;
  • if the dark, light or no-preference theme is active.

The function is also bound to MediaQueryList.addListener to listen for changes.

activeTheme

Type: String. Required: No.

Returns the current active theme.

themes

Type: Object{String}. Required: No.

Returns all available theme states:

{
  DARK: 'dark',
  LIGHT: 'light',
  NO_PREF: 'no-preference',
  NO_SUPP: 'no-support'
}

✍️ License

MIT © Luke Whitehouse

Keywords

FAQs

Package last updated on 19 Jun 2019

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc