https://github.com/kazzkiq/darkmode
A micro library (~360B) for handling dark mode on browsers.
https://github.com/kazzkiq/darkmode
dark dark-theme darkmode
Last synced: 7 months ago
JSON representation
A micro library (~360B) for handling dark mode on browsers.
- Host: GitHub
- URL: https://github.com/kazzkiq/darkmode
- Owner: kazzkiq
- License: mit
- Created: 2020-05-03T01:57:21.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T13:50:52.000Z (almost 3 years ago)
- Last Synced: 2024-10-23T00:14:56.725Z (12 months ago)
- Topics: dark, dark-theme, darkmode
- Language: JavaScript
- Homepage:
- Size: 827 KB
- Stars: 83
- Watchers: 5
- Forks: 3
- Open Issues: 12
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
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
```js
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()`.
```js
import { isDark } from '@kazzkiq/darkmode';
const isDarkMode = isDark(); // true|false
```
### onUpdate()
To detect if the browser toggled dark mode, you can rely on `onUpdate()`.
```js
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.
```js
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.
```js
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:
```js
import * as DarkMode from '@kazzkiq/darkmode';
DarkMode.isDark();
DarkMode.onUpdate();
DarkMode.setDark();
// ...
```