https://github.com/alotropico/dark-mode-attribute
Very simple and lightweight utility to manage dark and light schemes from vanilla JavaScript. Call it with your button as a parameter and you're all set.
https://github.com/alotropico/dark-mode-attribute
color-scheme dark-mode dark-theme scheme-tools toggle-scheme
Last synced: about 1 year ago
JSON representation
Very simple and lightweight utility to manage dark and light schemes from vanilla JavaScript. Call it with your button as a parameter and you're all set.
- Host: GitHub
- URL: https://github.com/alotropico/dark-mode-attribute
- Owner: alotropico
- Created: 2021-06-11T03:11:02.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2021-06-11T09:50:43.000Z (about 5 years ago)
- Last Synced: 2025-03-17T19:57:34.056Z (about 1 year ago)
- Topics: color-scheme, dark-mode, dark-theme, scheme-tools, toggle-scheme
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/@alotropico/dark-mode-attribute
- Size: 3.91 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## Dark Mode Attribute
Very simple and lightweight utility to manage **dark and light schemes from vanilla JavaScript**.
Call it with your button as a parameter and you're all set: `dark-mode-attribute(toggleButton)`
When no default value is provided, the module checks if the user saved a preference from a previous session.
If they haven't, it looks for the user's system preference.
### Installation
```shell
npm i --save-dev @alotropico/dark-mode-attribute
```
### Usage
In your **JavaScript**, call dark-mode-attribute with your toggle-dark-mode element as a parameter:
```javascript
import * as dma from '@alotropico/dark-mode-attribute'
const toggleButton = document.querySelector('.my-button')
dma(toggleButton)
```
Your **CSS**:
```css
body {
background-color: white;
color: black;
}
body.dark {
background-color: black;
color: white;
}
.my-button:after {
content: '🌞'
}
body.dark .my-button:after {
content: '🌚'
}
```
### Options
By default, it adds the *dark* class to the body element, but you can customize it.
Use a **custom class**:
```javascript
dma(toggleButton, 'dark-mode')
```
Instead of a class, let it be a **custom attribute**:
```javascript
dma(toggleButton, 'dark-mode', 'data-scheme')
```
```css
body[data-scheme="dark-mode"] {
background-color: black;
}
```
Instead of the body, apply the class/attribute to a **custom element**:
```javascript
const container = document.body.querySelector('.container')
dma(toggleButton, 'dark-mode', 'data-scheme', container)
```
Pass a **default value**, which overrides the built-in detection and storage methods:
```javascript
dma(toggleButton, 'dark', 'class', container, true)
```