jake/dark-mode
1
Fork 0
mirror of https://github.com/jakejarvis/dark-mode.git synced 2025-09-11 09:18:22 -04:00
Code Issues Releases Activity

bundle into a UMD script via webpack for both browser & node

Browse Source
This commit is contained in:
Jake Jarvis
2021-08-04 11:31:37 -04:00
parent 0d48f8e8af
commit df3b462de0
9 changed files with 1311 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
README.md
View File

@@ -1,6 +1,6 @@
# 🌓 Dark mode switcheroo
[![CI](https://github.com/jakejarvis/dark-mode.js/actions/workflows/ci.yml/badge.svg)](https://github.com/jakejarvis/dark-mode.js/actions/workflows/ci.yml) [![npm (scoped)](https://img.shields.io/npm/v/jakejarvis/dark-mode)](https://www.npmjs.com/package/@jakejarvis/dark-mode)
[![CI](https://github.com/jakejarvis/dark-mode.js/actions/workflows/ci.yml/badge.svg)](https://github.com/jakejarvis/dark-mode.js/actions/workflows/ci.yml) [![npm (scoped)](https://img.shields.io/npm/v/@jakejarvis/dark-mode)](https://www.npmjs.com/package/@jakejarvis/dark-mode)
Simple dark mode switching with saved preference via local storage & dynamic OS setting detection!
@@ -10,10 +10,46 @@ Simple dark mode switching with saved preference via local storage & dynamic OS
## Usage
### `darkMode([...options])`
### Options
`darkMode([...options])`
- **toggle:** The clickable HTML element used to toggle between the two themes. (optional, default: `null`)
- **classes:** An object containing the `<body>` class names for the light and dark themes. (optional, default: `{ light: "light", dark: "dark" }`)
- **default:** The initial `<body>` class hard-coded into the HTML template. (optional, default: `"light"`)
- **storageKey:** Name of the `localStorage` key holding the user's preference. (optional, default: `"dark_mode_pref"`)
### Browser
```html
<button class="dark-mode-toggle">💡 Click to see the light... or not.</button>
<script src="https://unpkg.com/@jakejarvis/dark-mode/dist/index.js"></script>
<script>
window.darkMode({
toggle: document.querySelector(".dark-mode-toggle"),
classes: {
light: "light",
dark: "dark",
},
default: "light",
storageKey: "dark_mode_pref",
});
</script>
```
### Node
```bash
npm install @jakejarvis/dark-mode
# or...
yarn add @jakejarvis/dark-mode
```
```js
import darkMode from "@jakejarvis/dark-mode";
// or:
// const darkMode = require("@jakejarvis/dark-mode");
darkMode({
toggle: document.querySelector(".dark-mode-toggle"),
@@ -26,15 +62,6 @@ darkMode({
});
```
#### Options
All optional.
- **toggle:** The clickable HTML element used to toggle between the two themes. (optional)
- **classes:** An object containing the `<body>` class names for the light and dark themes. (optional, default: `{ light: "light", dark: "dark" }`)
- **default:** The initial `<body>` class hard-coded into the HTML template. (optional, default: `light`)
- **storageKey:** Name of the `localStorage` key holding the user's preference. (optional, default: `dark_mode_pref`)
## License
MIT