惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

B
Blog RSS Feed
博客园 - 叶小钗
F
Fortinet All Blogs
GbyAI
GbyAI
Martin Fowler
Martin Fowler
博客园 - 聂微东
I
InfoQ
B
Blog
IT之家
IT之家
美团技术团队
L
LangChain Blog
小众软件
小众软件
C
Check Point Blog
MongoDB | Blog
MongoDB | Blog
Cyber Security Advisories - MS-ISAC
Cyber Security Advisories - MS-ISAC
V
V2EX
Last Week in AI
Last Week in AI
A
About on SuperTechFans
博客园 - Franky
P
Proofpoint News Feed
罗磊的独立博客
月光博客
月光博客
V
Visual Studio Blog
MyScale Blog
MyScale Blog

Colorful

《精读源码》- GoT Javascript Sandbox 从编程范式及实时 Web 应用的另类角度看向 ChatGPT 的 AI 大脑 面向未来的认知优化之《爆裂》启示录 How to clean email for gmail via app script ? v-circle - 漂亮的 Vue.js 圆形进度组件集合 KOA 源码阅读系列(一) - 理解 KOA 中间件的执行 前端工程师的工具包 Github 上那些炙手可热的技术手册
Make your own Dark Mode with mbm.js
Archer · 2022-05-31 · via Colorful

Play with your Dark Mode.

少于 1 分钟阅读

[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

Reference