jake/dark-mode
1
Fork 0
mirror of https://github.com/jakejarvis/dark-mode.git synced 2025-04-25 12:55:23 -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
Signed by: jake
GPG Key ID: 2B0C9CF251E69A39
9 changed files with 1311 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
.gitignore vendored
View File

@ -1,10 +1,5 @@
# Dependency directories .DS_Store
node_modules/ node_modules/
.npm/ dist/
.npmrc
# Logs
*.log
npm-debug.log*
# VSCode config
.vscode/ .vscode/

49
README.md
View File

@ -1,6 +1,6 @@
# 🌓 Dark mode switcheroo # 🌓 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! 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 ## 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 ```js
import darkMode from "@jakejarvis/dark-mode"; import darkMode from "@jakejarvis/dark-mode";
// or:
// const darkMode = require("@jakejarvis/dark-mode");
darkMode({ darkMode({
toggle: document.querySelector(".dark-mode-toggle"), 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 ## License
MIT MIT

7
example/index.html
View File

@ -13,6 +13,11 @@
<p><a href="https://github.com/jakejarvis/dark-mode-example" target="_blank" rel="noopener">View the source code</a> or <a href="https://jarv.is/notes/dark-mode/" target="_blank" rel="noopener">read the post</a>.</p> <p><a href="https://github.com/jakejarvis/dark-mode-example" target="_blank" rel="noopener">View the source code</a> or <a href="https://jarv.is/notes/dark-mode/" target="_blank" rel="noopener">read the post</a>.</p>
<script src="main.js"></script>> <script src="../dist/index.js"></script>
<script>
window.darkMode({
toggle: document.querySelector(".dark-mode-toggle"),
});
</script>
</body> </body>
</html> </html>

5
example/main.js
View File

@ -1,5 +0,0 @@
import darkMode from "../index.js";
darkMode({
toggle: document.querySelector(".dark-mode-toggle"),
});

22
package.json
View File

@ -8,31 +8,35 @@
"email": "jake@jarv.is", "email": "jake@jarv.is",
"url": "https://jarv.is/" "url": "https://jarv.is/"
}, },
"type": "module",
"repository": { "repository": {
"type": "git", "type": "git",
"url": "https://github.com/jakejarvis/dark-mode.git" "url": "https://github.com/jakejarvis/dark-mode.git"
}, },
"exports": "./index.js", "main": "dist/index.js",
"types": "./index.d.ts", "types": "dist/index.d.ts",
"node": "^12.20.0 || ^14.13.1 || >=16.0.0",
"scripts": { "scripts": {
"lint": "eslint **/*.js" "build": "webpack --mode production",
"lint": "eslint src/**/*.js",
"prepublishOnly": "run-s lint build"
}, },
"dependencies": { "dependencies": {
"storage-available": "^1.1.0" "storage-available": "^1.1.0"
}, },
"devDependencies": { "devDependencies": {
"copy-webpack-plugin": "^9.0.1",
"eslint": "^7.32.0", "eslint": "^7.32.0",
"eslint-config-prettier": "^8.3.0", "eslint-config-prettier": "^8.3.0",
"eslint-plugin-compat": "^3.11.1", "eslint-plugin-compat": "^3.11.1",
"eslint-plugin-prettier": "^3.4.0", "eslint-plugin-prettier": "^3.4.0",
"prettier": "^2.3.2" "npm-run-all": "^4.1.5",
"prettier": "^2.3.2",
"terser-webpack-plugin": "^5.1.4",
"webpack": "^5.48.0",
"webpack-cli": "^4.7.2"
}, },
"files": [ "files": [
"index.js", "dist/index.js",
"index.d.ts", "dist/index.d.ts"
"LICENSE"
], ],
"keywords": [ "keywords": [
"frontend", "frontend",

0
index.d.ts → src/index.d.ts vendored
View File

15
index.js → src/index.js
View File

@ -1,8 +1,6 @@
/*! Dark mode switcheroo | MIT License | jrvs.io/darkmode */ const storageAvailable = require("storage-available");
import storageAvailable from "storage-available"; module.exports = function (options) {
export default function (options) {
// { toggle, classes: { light, dark }, default, storageKey } // { toggle, classes: { light, dark }, default, storageKey }
options = options || {}; options = options || {};
@ -12,9 +10,8 @@ export default function (options) {
// check for preset `dark_mode_pref` preference in local storage // check for preset `dark_mode_pref` preference in local storage
const storageKey = options.storageKey || "dark_mode_pref"; const storageKey = options.storageKey || "dark_mode_pref";
const storageEnabled = storageAvailable("localStorage"); const storageEnabled = storageAvailable("localStorage");
const pref = storageEnabled // eslint-disable-next-line prettier/prettier
? localStorage.getItem(storageKey) const pref = storageEnabled ? localStorage.getItem(storageKey) : null;
: null;
// change CSS via these <body> classes: // change CSS via these <body> classes:
const dark = options.classes ? options.classes.dark : "dark"; const dark = options.classes ? options.classes.dark : "dark";
@ -81,7 +78,7 @@ export default function (options) {
// don't freak out if page happens not to have a toggle // don't freak out if page happens not to have a toggle
if (toggle !== null) { if (toggle !== null) {
// toggle re-appears now that we know user has JS enabled // toggle re-appears now that we know user has JS enabled
toggle.style.display = "block"; toggle.style.visibility = "visible";
// handle toggle click // handle toggle click
toggle.addEventListener("click", function () { toggle.addEventListener("click", function () {
@ -93,4 +90,4 @@ export default function (options) {
} }
}); });
} }
} };

38
webpack.config.js Normal file
View File

@ -0,0 +1,38 @@
const webpack = require("webpack");
const path = require("path");
const CopyPlugin = require("copy-webpack-plugin");
const TerserPlugin = require("terser-webpack-plugin");
module.exports = {
mode: "production",
entry: "./src/index.js",
output: {
path: path.resolve(__dirname, "dist"),
filename: "index.js",
library: {
name: "darkMode",
type: "umd",
},
globalObject: "this",
},
plugins: [
new webpack.BannerPlugin({
banner: "Dark mode switcheroo | MIT License | jrvs.io/darkmode",
}),
new CopyPlugin({
patterns: [
{
from: path.join(__dirname, "src/index.d.ts"),
to: path.join(__dirname, "dist", "index.d.ts"),
},
],
}),
],
optimization: {
minimizer: [
new TerserPlugin({
extractComments: false,
}),
],
},
};

1219
yarn.lock
View File

File diff suppressed because it is too large Load Diff