Make your own Dark Mode with mbm.js

[mbm] = (🌞 -> 🌛 || 🌛 -> 🌞)

Lyrical as usual, Apple said about Dark Mode that it’s a “dramatic new look that helps you focus on your work,’’ as well as a “distraction-free environment that’s easy on the eyes — in every way”.

Google was much more pragmatic, saying Dark Theme can “reduce power usage by a significant amount”, “improve visibility for users with low vision and those who are sensitive to bright light” and “make it easier for anyone to use a device in a low-light environment”.

👦 Archer: Dark Mode IS NOT Dark Design or Dark UI in Javascript.

What is mbm ?

It’s short name for CSS Mix Blend Mode.

About

🌞 🌛 Play with your Dark Mode.

Quick Start

const mbm = MixBlendMode({
  backgroundColor: "#FFFFFF",
  enable: true,
});

// toggle
mbm.toggle();

// show
mbm.show();

// hide
mbm.hide();

// get auto-increment zIndex
mbm.izIndex();

UI Controller

Default UI Controller

MixBlendMode.UIController().render()

You can write your own ui controller

const yourController = MixBlendMode.UIController((MixBlendMode) => {
  // controller logic
});

Examples

npm run dev

Reference

• The past, present, and future of Dark Mode