jake/dark-mode
1
Fork 0
mirror of https://github.com/jakejarvis/dark-mode.git synced 2025-04-26 06:25:23 -04:00
Code Issues Releases Activity

much simpler bundling with rollup, also generate separate ESM and CJS files

Browse Source
This commit is contained in:
Jake Jarvis 2021-08-04 19:16:33 -04:00
parent 1c2b15d70f
commit eedd0a96e0
Signed by: jake
GPG Key ID: 2B0C9CF251E69A39
10 changed files with 2411 additions and 984 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
.eslintrc.json
View File

@ -1,11 +1,7 @@
{ {
"extends": [ "extends": [
"eslint:recommended", "eslint:recommended",
"plugin:compat/recommended", "plugin:compat/recommended"
"plugin:prettier/recommended"
],
"plugins": [
"prettier"
], ],
"env": { "env": {
"browser": true, "browser": true,
@ -15,5 +11,8 @@
"ecmaVersion": 2015, "ecmaVersion": 2015,
"sourceType": "module" "sourceType": "module"
}, },
"rules": {} "rules": {
"quotes": ["error", "double"],
"semi": ["error", "always"]
}
} }

6
.prettierrc
View File

@ -1,6 +0,0 @@
{
"printWidth": 120,
"tabWidth": 2,
"semi": true,
"singleQuote": false
}

33
README.md
View File

@ -1,10 +1,10 @@
# 🌓 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) [![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) [![npm (scoped)](https://img.shields.io/npm/v/@jakejarvis/dark-mode)](https://www.npmjs.com/package/@jakejarvis/dark-mode)
[![GitHub](https://img.shields.io/github/license/jakejarvis/dark-mode?color=violet)](LICENSE) [![MIT License](https://img.shields.io/github/license/jakejarvis/dark-mode?color=violet)](LICENSE)
Very simple CSS dark/light mode toggler with saved preference via local storage & dynamic OS setting detection. Zero dependencies and only ~700 bytes gzipped! Very simple CSS dark/light mode toggler with saved preference via local storage & dynamic OS setting detection. Zero dependencies and only ~600 bytes gzipped!
- [View the example.](https://jakejarvis.github.io/dark-mode-example/) - [View the example.](https://jakejarvis.github.io/dark-mode-example/)
- [Read the blog post.](https://jarv.is/notes/dark-mode/) - [Read the blog post.](https://jarv.is/notes/dark-mode/)
@ -14,7 +14,7 @@ Very simple CSS dark/light mode toggler with saved preference via local storage
### Options ### Options
`darkMode([...options])` `darkMode.init([...options])`
- **toggle:** The clickable HTML element used to toggle between the two themes. (optional, default: `null`) - **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" }`) - **classes:** An object containing the `<body>` class names for the light and dark themes. (optional, default: `{ light: "light", dark: "dark" }`)
@ -26,7 +26,7 @@ Very simple CSS dark/light mode toggler with saved preference via local storage
```html ```html
<button class="dark-mode-toggle">💡 Click to see the light... or not.</button> <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 src="https://unpkg.com/@jakejarvis/dark-mode/dist/dark-mode.min.js"></script>
<script> <script>
window.darkMode.init({ window.darkMode.init({
toggle: document.querySelector(".dark-mode-toggle"), toggle: document.querySelector(".dark-mode-toggle"),
@ -48,10 +48,26 @@ npm install @jakejarvis/dark-mode
yarn add @jakejarvis/dark-mode yarn add @jakejarvis/dark-mode
``` ```
#### Module via `import`
```js ```js
import darkMode from "@jakejarvis/dark-mode"; import { init } from "@jakejarvis/dark-mode";
// or:
// const darkMode = require("@jakejarvis/dark-mode"); init({
toggle: document.querySelector(".dark-mode-toggle"),
classes: {
light: "light",
dark: "dark",
},
default: "light",
storageKey: "dark_mode_pref",
});
```
#### CommonJS via `require()`
```js
const darkMode = require("@jakejarvis/dark-mode");
darkMode.init({ darkMode.init({
toggle: document.querySelector(".dark-mode-toggle"), toggle: document.querySelector(".dark-mode-toggle"),
@ -68,6 +84,7 @@ darkMode.init({
- [ ] Support more than two themes - [ ] Support more than two themes
- [ ] Add callback function `onChange` (or `onToggle` etc.) passed in as an option - [ ] Add callback function `onChange` (or `onToggle` etc.) passed in as an option
- [ ] Better readme docs
## License ## License

2
example/index.html
View File

@ -13,7 +13,7 @@
<p><a href="https://github.com/jakejarvis/dark-mode" 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" 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="../dist/index.js"></script> <script src="../dist/dark-mode.js"></script>
<script> <script>
window.darkMode.init({ window.darkMode.init({
toggle: document.querySelector(".dark-mode-toggle"), toggle: document.querySelector(".dark-mode-toggle"),

35
package.json
View File

@ -1,7 +1,7 @@
{ {
"name": "@jakejarvis/dark-mode", "name": "@jakejarvis/dark-mode",
"version": "0.4.0", "version": "0.4.0",
"description": "Super simple CSS theme switching with saved preferences and automatic OS setting detection", "description": "🌓 Simple CSS theme switching with saved preferences and automatic OS setting detection",
"license": "MIT", "license": "MIT",
"author": { "author": {
"name": "Jake Jarvis", "name": "Jake Jarvis",
@ -12,33 +12,38 @@
"type": "git", "type": "git",
"url": "https://github.com/jakejarvis/dark-mode.git" "url": "https://github.com/jakejarvis/dark-mode.git"
}, },
"main": "dist/index.js", "main": "dist/dark-mode.cjs.js",
"types": "dist/index.d.ts", "module": "dist/dark-mode.esm.js",
"unpkg": "dist/dark-mode.min.js",
"types": "dist/dark-mode.d.ts",
"scripts": { "scripts": {
"build": "webpack --mode production", "build": "rollup -c",
"lint": "eslint src/**/*.js", "lint": "eslint src/**/*.js",
"prepublishOnly": "run-s lint build" "prepublishOnly": "yarn build"
}, },
"dependencies": {}, "dependencies": {},
"devDependencies": { "devDependencies": {
"copy-webpack-plugin": "^9.0.1", "@babel/core": "^7.15.0",
"@babel/preset-env": "^7.15.0",
"@rollup/plugin-babel": "^5.3.0",
"@rollup/plugin-eslint": "^8.0.1",
"@rollup/plugin-node-resolve": "^13.0.4",
"eslint": "^7.32.0", "eslint": "^7.32.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", "rollup": "^2.55.1",
"npm-run-all": "^4.1.5", "rollup-plugin-copy": "^3.4.0",
"prettier": "^2.3.2", "rollup-plugin-filesize": "^9.1.1",
"terser-webpack-plugin": "^5.1.4", "rollup-plugin-terser": "^7.0.2"
"webpack": "^5.48.0",
"webpack-cli": "^4.7.2"
}, },
"files": [ "files": [
"dist/index.js", "dist"
"dist/index.d.ts"
], ],
"keywords": [ "keywords": [
"frontend", "frontend",
"dark mode", "dark mode",
"theme",
"appearance",
"design",
"css" "css"
] ]
} }

87
rollup.config.js Normal file
View File

@ -0,0 +1,87 @@
import resolve from "@rollup/plugin-node-resolve";
import { babel } from "@rollup/plugin-babel";
import { terser } from "rollup-plugin-terser";
import eslint from "@rollup/plugin-eslint";
import filesize from "rollup-plugin-filesize";
import copy from "rollup-plugin-copy";
const banner = "/*! Dark Mode Switcheroo | MIT License | jrvs.io/darkmode */";
export default [
{
// universal (browser and node)
input: "src/index.js",
output: [
{
name: "darkMode",
file: "dist/dark-mode.js",
format: "umd",
exports: "named",
esModule: false,
banner: banner,
},
{
name: "darkMode",
file: "dist/dark-mode.min.js",
format: "umd",
exports: "named",
esModule: false,
plugins: [
terser({
output: {
preamble: banner,
},
}),
],
},
],
plugins: [
copy({
// clearly this isn't really typescript, so we need to manually copy the type definition file
targets: [
{
src: "src/index.d.ts",
dest: "dist",
rename: "dark-mode.d.ts",
},
],
}),
resolve(),
eslint(),
babel({
babelHelpers: "bundled",
presets: [["@babel/preset-env"]],
exclude: ["node_modules/**"],
}),
filesize(),
],
},
{
// modules
input: "src/index.js",
output: [
{
// ES6 module (import)
file: "dist/dark-mode.esm.js",
format: "esm",
exports: "named",
banner: banner,
},
{
// commonjs (require)
file: "dist/dark-mode.cjs.js",
format: "cjs",
exports: "named",
banner: banner,
},
],
plugins: [
resolve(),
babel({
babelHelpers: "bundled",
exclude: ["node_modules/**"],
}),
filesize(),
],
},
];

6
src/index.d.ts vendored
View File

@ -1,10 +1,8 @@
export as namespace darkMode; interface DarkModeOptions {
export interface DarkModeOptions {
toggle?: HTMLElement; toggle?: HTMLElement;
classes?: { dark: string, light: string }; classes?: { dark: string, light: string };
default?: string; default?: string;
storageKey?: string; storageKey?: string;
} }
export function init(options?: Partial<DarkModeOptions>): void; export function init(options?: DarkModeOptions): void;

4
src/index.js
View File

@ -1,6 +1,6 @@
"use strict"; "use strict";
const initializeDarkMode = function (options) { const init = function (options) {
// { toggle, classes: { light, dark }, default, storageKey } // { toggle, classes: { light, dark }, default, storageKey }
options = options || {}; options = options || {};
@ -101,4 +101,4 @@ const isStorageAvailable = function () {
} }
}; };
module.exports.init = initializeDarkMode; export { init };

38
webpack.config.js
View File

@ -1,38 +0,0 @@
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,
}),
],
},
};

3173
yarn.lock
View File

File diff suppressed because it is too large Load Diff