GitHub - kazzkiq/darkmode: A micro library (~360B) for handling dark mode on bro...
source link: https://github.com/kazzkiq/darkmode
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
DarkMode
A micro library (~360B) for handling dark mode on browsers.
Instalation
You can install DarkMode via npm:
npm install --save @kazzkiq/darkmode
Or use it directly in browser via CDN service:
https://unpkg.com/@kazzkiq/darkmode/dist/darkmode.umd.js
When using directly in browser, all functions will be available under DarkMode
object.
Usage
import { isDark, onUpdate } from '@kazzkiq/darkmode'; const isDarkMode = isDark(); onUpdate((isDark) => { // isDark will be true or false });
isDark()
To detect if the browser is in dark mode, simply run isDark()
.
import { isDark } from '@kazzkiq/darkmode'; const isDarkMode = isDark(); // true|false
onUpdate()
To detect if the browser toggled dark mode, you can rely on onUpdate()
.
import { onUpdate } from '@kazzkiq/darkmode'; onUpdate((isDark) => { // isDark returns true|false });
setDark()
Sometimes you will want to let your user decide to enforce dark mode, even when their OS doesn't supports it. In these cases you can programatically set dark mode locally, and by making use of localStorage
DarkMode can then behave accordingly.
import { setDark, isDark, isDarkLocal } from '@kazzkiq/darkmode'; setDark(true); // now this user is in DarkMode isDark(); // reads browser/OS dark mode, thus returns false isDarkLocal(); // reads localStorage value, thus returns true
setDark()
also triggers onUpdate()
automatically.
isDarkLocal()
isDark()
will always returns browser/OS dark mode status. When you enforce dark mode using setDark()
, you can then use isDarkLocal()
to check if the user preference is for dark mode even with browser/OS not being in this mode.
import { isDarkLocal } from '@kazzkiq/darkmode'; const isDarkMode = isDarkLocal(); // true|false based on localStorage, not on browser/OS configs.
Browsers which doesn't support it
For any browser that doesn't supports dark mode, the isDark()
function will always return false
.
Even in browsers that doesn't supports it, you can still "simulate" it by using setDark()
and isDarkLocal()
.
Function conflicts
In case of any of DarkMode functions conflict with current functions in your project, you can import them under DarkMode
namespace to prevent conflicts:
import * as DarkMode from '@kazzkiq/darkmode'; DarkMode.isDark(); DarkMode.onUpdate(); DarkMode.setDark(); // ...
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK