mirror of
https://github.com/jakejarvis/dark-mode.git
synced 2025-04-25 10:45:20 -04:00
bundle into a UMD script via webpack for both browser & node
This commit is contained in:
parent
0d48f8e8af
commit
df3b462de0
GPG Key ID:
2B0C9CF251E69A39
11
.gitignore
vendored
11
.gitignore
vendored
@ -1,10 +1,5 @@
|
||||
# Dependency directories
|
||||
.DS_Store
|
||||
node_modules/
|
||||
.npm/
|
||||
|
||||
# Logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
|
||||
# VSCode config
|
||||
dist/
|
||||
.npmrc
|
||||
.vscode/
|
||||
|
||||
49
README.md
49
README.md
@ -1,6 +1,6 @@
|
||||
# 🌓 Dark mode switcheroo
|
||||
|
||||
[](https://github.com/jakejarvis/dark-mode.js/actions/workflows/ci.yml) [](https://www.npmjs.com/package/@jakejarvis/dark-mode)
|
||||
[](https://github.com/jakejarvis/dark-mode.js/actions/workflows/ci.yml) [](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
|
||||
|
||||
@ -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>
|
||||
|
||||
<script src="main.js"></script>>
|
||||
<script src="../dist/index.js"></script>
|
||||
<script>
|
||||
window.darkMode({
|
||||
toggle: document.querySelector(".dark-mode-toggle"),
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,5 +0,0 @@
|
||||
import darkMode from "../index.js";
|
||||
|
||||
darkMode({
|
||||
toggle: document.querySelector(".dark-mode-toggle"),
|
||||
});
|
||||
22
package.json
22
package.json
@ -8,31 +8,35 @@
|
||||
"email": "jake@jarv.is",
|
||||
"url": "https://jarv.is/"
|
||||
},
|
||||
"type": "module",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/jakejarvis/dark-mode.git"
|
||||
},
|
||||
"exports": "./index.js",
|
||||
"types": "./index.d.ts",
|
||||
"node": "^12.20.0 || ^14.13.1 || >=16.0.0",
|
||||
"main": "dist/index.js",
|
||||
"types": "dist/index.d.ts",
|
||||
"scripts": {
|
||||
"lint": "eslint **/*.js"
|
||||
"build": "webpack --mode production",
|
||||
"lint": "eslint src/**/*.js",
|
||||
"prepublishOnly": "run-s lint build"
|
||||
},
|
||||
"dependencies": {
|
||||
"storage-available": "^1.1.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"copy-webpack-plugin": "^9.0.1",
|
||||
"eslint": "^7.32.0",
|
||||
"eslint-config-prettier": "^8.3.0",
|
||||
"eslint-plugin-compat": "^3.11.1",
|
||||
"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": [
|
||||
"index.js",
|
||||
"index.d.ts",
|
||||
"LICENSE"
|
||||
"dist/index.js",
|
||||
"dist/index.d.ts"
|
||||
],
|
||||
"keywords": [
|
||||
"frontend",
|
||||
|
||||
0
index.d.ts → src/index.d.ts
vendored
0
index.d.ts → src/index.d.ts
vendored
@ -1,8 +1,6 @@
|
||||
/*! Dark mode switcheroo | MIT License | jrvs.io/darkmode */
|
||||
const storageAvailable = require("storage-available");
|
||||
|
||||
import storageAvailable from "storage-available";
|
||||
|
||||
export default function (options) {
|
||||
module.exports = function (options) {
|
||||
// { toggle, classes: { light, dark }, default, storageKey }
|
||||
options = options || {};
|
||||
|
||||
@ -12,9 +10,8 @@ export default function (options) {
|
||||
// check for preset `dark_mode_pref` preference in local storage
|
||||
const storageKey = options.storageKey || "dark_mode_pref";
|
||||
const storageEnabled = storageAvailable("localStorage");
|
||||
const pref = storageEnabled
|
||||
? localStorage.getItem(storageKey)
|
||||
: null;
|
||||
// eslint-disable-next-line prettier/prettier
|
||||
const pref = storageEnabled ? localStorage.getItem(storageKey) : null;
|
||||
|
||||
// change CSS via these <body> classes:
|
||||
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
|
||||
if (toggle !== null) {
|
||||
// toggle re-appears now that we know user has JS enabled
|
||||
toggle.style.display = "block";
|
||||
toggle.style.visibility = "visible";
|
||||
|
||||
// handle toggle click
|
||||
toggle.addEventListener("click", function () {
|
||||
@ -93,4 +90,4 @@ export default function (options) {
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
38
webpack.config.js
Normal file
38
webpack.config.js
Normal 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,
|
||||
}),
|
||||
],
|
||||
},
|
||||
};
|
||||
Loading…
x
Reference in New Issue
Block a user