https://github.com/qddegtya/mbm
🌞 🌛 Play with your own Dark-Mode
https://github.com/qddegtya/mbm
darkmode tool
Last synced: 25 days ago
JSON representation
🌞 🌛 Play with your own Dark-Mode
- Host: GitHub
- URL: https://github.com/qddegtya/mbm
- Owner: qddegtya
- License: mit
- Created: 2021-02-02T12:20:57.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-02-14T03:07:58.000Z (over 3 years ago)
- Last Synced: 2025-11-28T23:33:07.257Z (7 months ago)
- Topics: darkmode, tool
- Language: JavaScript
- Homepage:
- Size: 12.7 KB
- Stars: 3
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[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
```javascript
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**
```javascript
const yourController = MixBlendMode.UIController((MixBlendMode) => {
// controller logic
})
```
# Examples
```shell
$ npm run dev
```
# Reference
* [The past, present, and future of Dark Mode](https://uxdesign.cc/the-past-present-and-future-of-dark-mode-9254f2956ec7)