v0.10.0

https://github.com/jakejarvis/rollup-module-template

.editorconfig

@@ -0,0 +1,17 @@
+# http://editorconfig.org
+
+# this file is the top-most editorconfig file
+root = true
+
+# all files
+[*]
+charset = utf-8
+end_of_line = lf
+indent_style = space
+indent_size = 2
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+# site content
+[*.md]
+trim_trailing_whitespace = false

.eslintrc.json

@@ -1,19 +1,16 @@
 {
   "extends": [
-    "eslint:recommended",
-    "plugin:compat/recommended",
-    "plugin:prettier/recommended"
+    "@jakejarvis/eslint-config",
+    "plugin:@typescript-eslint/recommended"
   ],
   "plugins": [
-    "prettier"
+    "@typescript-eslint"
   ],
+  "parser": "@typescript-eslint/parser",
   "env": {
-    "browser": true,
-    "node": true
+    "browser": true
   },
-  "parserOptions": {
-    "ecmaVersion": 2015,
-    "sourceType": "module"
-  },
-  "rules": {}
+  "ignorePatterns": [
+    "dist/**"
+  ]
 }

.gitattributes

@@ -0,0 +1,2 @@
+# Set default behavior to automatically normalize line endings.
+* text=auto eol=lf

.github/dependabot.yml

@@ -0,0 +1,10 @@
+version: 2
+
+updates:
+- package-ecosystem: "npm"
+  directory: "/"
+  versioning-strategy: increase
+  schedule:
+    interval: "daily"
+  commit-message:
+    prefix: "📦 npm:"

.github/workflows/ci.yml

@@ -3,16 +3,17 @@ name: CI
 on:
   push:
     branches:
-    - main
+      - main
   pull_request:
 
 jobs:
   lint:
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v2
-    - uses: actions/setup-node@v2
-      with:
-        node-version: '14.x'
-    - run: yarn install --frozen-lockfile
-    - run: yarn lint
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v2
+        with:
+          node-version: 16.x
+      - run: yarn install --frozen-lockfile
+      - run: yarn lint
+      - run: yarn build

.github/workflows/release.yml

@@ -0,0 +1,20 @@
+name: Release
+
+on:
+  push:
+    tags:
+      - 'v*'
+
+jobs:
+  npm:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v2
+        with:
+          node-version: 16.x
+          registry-url: https://registry.npmjs.org/
+      - run: yarn install --frozen-lockfile
+      - run: yarn publish
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

.prettierrc

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

README.md

@@ -1,12 +1,11 @@
-# 🌓 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)
-[![GitHub](https://img.shields.io/github/license/jakejarvis/dark-mode?color=violet)](LICENSE)
+[![CI](https://github.com/jakejarvis/dark-mode/actions/workflows/ci.yml/badge.svg)](https://github.com/jakejarvis/dark-mode/actions/workflows/ci.yml)
+[![npm](https://img.shields.io/npm/v/dark-mode-switcheroo)](https://www.npmjs.com/package/dark-mode-switcheroo)
 
-Very simple CSS dark/light mode toggler with saved preference via local storage & dynamic OS setting detection. 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 ~500 bytes gzipped!](https://bundlephobia.com/package/dark-mode-switcheroo)
 
-- [View the example.](https://jakejarvis.github.io/dark-mode-example/)
+- [View the example.](https://jakejarvis.github.io/dark-mode/)
 - [Read the blog post.](https://jarv.is/notes/dark-mode/)
 - [See it in action.](https://jarv.is/)
 
@@ -14,21 +13,24 @@ Very simple CSS dark/light mode toggler with saved preference via local storage
 
 ### Options
 
-`darkMode([...options])`
+`darkMode.init([...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"`)
+- **`toggle`**: The clickable [HTMLElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement) 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"`)
+- **`onInit([toggle])`**: Callback function executed at the end of initialization. The toggle above is passed in if set. (optional, default: `null`)
+- **`onUserToggle([toggle])`**: Callback function executed when a user manually interacts with the toggle button. The toggle above (if set) is passed in. (optional, default: `null`)
+- **`onChange([theme, toggle])`**: Callback function executed when theme is switched. The new theme and the toggle above (if set) are passed in. (optional, default: `null`)
 
 ### Browser
 
 ```html
-<button class="dark-mode-toggle">💡 Click to see the light... or not.</button>
+<button class="dark-mode-toggle" style="visibility: hidden;">💡 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/dark-mode-switcheroo/dist/dark-mode.min.js"></script>
 <script>
-  window.darkMode({
+  window.darkMode.init({
     toggle: document.querySelector(".dark-mode-toggle"),
     classes: {
       light: "light",
@@ -36,6 +38,12 @@ Very simple CSS dark/light mode toggler with saved preference via local storage
     },
     default: "light",
     storageKey: "dark_mode_pref",
+    onInit: function (toggle) {
+      toggle.style.visibility = "visible"; // toggle appears now that we know JS is enabled
+    },
+    onChange: function (theme, toggle) {
+      console.log("Theme is now " + theme);
+    },
   });
 </script>
 ```
@@ -43,27 +51,37 @@ Very simple CSS dark/light mode toggler with saved preference via local storage
 ### Node
 
 ```bash
-npm install @jakejarvis/dark-mode
+npm install dark-mode-switcheroo
 # or...
-yarn add @jakejarvis/dark-mode
+yarn add dark-mode-switcheroo
 ```
 
+#### Module via `import`
+
 ```js
-import darkMode from "@jakejarvis/dark-mode";
-// or:
-// const darkMode = require("@jakejarvis/dark-mode");
+import { init } from "dark-mode-switcheroo";
 
-darkMode({
-  toggle: document.querySelector(".dark-mode-toggle"),
-  classes: {
-    light: "light",
-    dark: "dark",
-  },
-  default: "light",
-  storageKey: "dark_mode_pref",
+init({
+  // ...same as browser.
 });
 ```
 
+#### CommonJS via `require()`
+
+```js
+const darkMode = require("dark-mode-switcheroo");
+
+darkMode.init({
+  // ...same as browser.
+});
+```
+
+## To-Do
+
+- [ ] Support more than two themes
+- [ ] Better readme docs
+- [x] Add callback function `onChange` (or `onToggle` etc.) passed in as an option
+
 ## License
 
 MIT

example/index.html

@@ -4,19 +4,60 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Welcome to the dark side 🌓</title>
-  <style>/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}body{font-family:system-ui,-apple-system,sans-serif;text-align:center}a{text-decoration:none}h1{font-size:1.8em}.dark-mode-toggle{cursor:pointer;padding:1em;visibility:hidden}body.light{background-color:#fff;color:#222}body.light a{color:#06f}body.dark{background-color:#222;color:#fff}body.dark a{color:#fe0}</style>
+  <style>/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}</style>
+  <style>
+    /* Global styles */
+    body {
+      font-family: system-ui, -apple-system, sans-serif;
+      text-align: center;
+    }
+
+    /* Light theme */
+    body.light {
+      background-color: #fff;
+      color: #222;
+    }
+    body.light a {
+      color: #06f;
+    }
+
+    /* Dark theme */
+    body.dark {
+      background-color: #222;
+      color: #fff;
+    }
+    body.dark a {
+      color: #fe0;
+    }
+
+    /* The Toggle (TM) */
+    .dark-mode-toggle {
+      padding: 1em;
+      cursor: pointer;
+
+      /* Hide the toggle initially if the user's JS is disabled: */
+      visibility: hidden;
+    }
+  </style>
 </head>
-<body class="light">
+<body class="light"> <!-- default to light theme -->
   <h1>Welcome to the dark side 🌓</h1>
 
   <button class="dark-mode-toggle">💡 Click to see the light... or not.</button>
 
-  <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" 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.min.js"></script> <!-- or use CDN: https://unpkg.com/dark-mode-switcheroo/dist/dark-mode.min.js -->
   <script>
-    window.darkMode({
+    window.darkMode.init({
       toggle: document.querySelector(".dark-mode-toggle"),
+      onInit: function (e) {
+        e.style.visibility = "visible";
+        console.log("Toggle is visible now that we know user has JS enabled.");
+      },
+      onChange: function (t) {
+        console.log("Set theme to " + t);
+      }
     });
   </script>
 </body>

package.json

@@ -1,8 +1,9 @@
 {
-  "name": "@jakejarvis/dark-mode",
-  "version": "0.3.0",
-  "description": "Super simple CSS theme switching with saved preferences and automatic OS setting detection",
+  "name": "dark-mode-switcheroo",
+  "version": "0.10.0",
+  "description": "🌓 Simple CSS theme switching with saved preferences and automatic OS setting detection",
   "license": "MIT",
+  "homepage": "https://jrvs.io/darkmode",
   "author": {
     "name": "Jake Jarvis",
     "email": "jake@jarv.is",
@@ -12,35 +13,40 @@
     "type": "git",
     "url": "https://github.com/jakejarvis/dark-mode.git"
   },
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
-  "scripts": {
-    "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",
-    "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"
-  },
+  "type": "module",
   "files": [
-    "dist/index.js",
-    "dist/index.d.ts"
+    "dist"
   ],
+  "source": "./src/dark-mode.ts",
+  "main": "./dist/dark-mode.cjs",
+  "module": "./dist/dark-mode.esm.js",
+  "unpkg": "./dist/dark-mode.min.js",
+  "exports": {
+    "require": "./dist/dark-mode.cjs",
+    "import": "./dist/dark-mode.esm.js",
+    "browser": "./dist/dark-mode.min.js"
+  },
+  "types": "./dist/dark-mode.d.ts",
+  "scripts": {
+    "build": "microbundle --format cjs,esm,umd --name 'darkMode'",
+    "lint": "eslint .",
+    "prepublishOnly": "yarn build"
+  },
+  "dependencies": {},
+  "devDependencies": {
+    "@jakejarvis/eslint-config": "*",
+    "@typescript-eslint/eslint-plugin": "^5.3.1",
+    "@typescript-eslint/parser": "^5.3.1",
+    "eslint": "^8.2.0",
+    "microbundle": "^0.14.1",
+    "typescript": "^4.4.4"
+  },
   "keywords": [
-    "frontend",
+    "front-end",
     "dark mode",
+    "theme",
+    "appearance",
+    "design",
     "css"
   ]
 }

src/dark-mode.ts

@@ -1,7 +1,12 @@
-const storageAvailable = require("storage-available");
-
-module.exports = function (options) {
-  // { toggle, classes: { light, dark }, default, storageKey }
+export function init(options: {
+  toggle?: Element | null;
+  classes?: { dark: string, light: string };
+  default?: string;
+  storageKey?: string;
+  onInit?: (toggle?: Element | null) => unknown;
+  onUserToggle?: (toggle?: Element | null) => unknown;
+  onChange?: (theme: string, toggle?: Element | null) => unknown;
+}): void {
   options = options || {};
 
   // use a specified element(s) to trigger swap when clicked
@@ -9,9 +14,7 @@ module.exports = function (options) {
 
   // check for preset `dark_mode_pref` preference in local storage
   const storageKey = options.storageKey || "dark_mode_pref";
-  const storageEnabled = storageAvailable("localStorage");
-  // eslint-disable-next-line prettier/prettier
-  const pref = storageEnabled ? localStorage.getItem(storageKey) : null;
+  const pref = localStorage.getItem(storageKey);
 
   // change CSS via these <body> classes:
   const dark = options.classes ? options.classes.dark : "dark";
@@ -24,20 +27,30 @@ module.exports = function (options) {
   let active = defaultTheme === dark;
 
   // receives a class name and switches <body> to it
-  const activateTheme = function (theme, save = false) {
+  const activateTheme = function (theme: string, remember?: boolean) {
+    // optional onChange callback function passed as option
+    if (typeof options.onChange === "function") {
+      options.onChange(theme, toggle);
+    }
+
     document.body.classList.remove(dark, light);
     document.body.classList.add(theme);
     active = theme === dark;
 
-    if (storageEnabled && save) {
+    if (remember) {
       localStorage.setItem(storageKey, theme);
     }
   };
 
+  // optional onInit callback function passed as option
+  if (typeof options.onInit === "function") {
+    options.onInit(toggle);
+  }
+
   // user has never clicked the button, so go by their OS preference until/if they do so
   if (!pref) {
     // returns media query selector syntax
-    const prefers = function (colorScheme) {
+    const prefers = function (colorScheme: "dark" | "light") {
       // https://drafts.csswg.org/mediaqueries-5/#prefers-color-scheme
       return `(prefers-color-scheme: ${colorScheme})`;
     };
@@ -53,20 +66,16 @@ module.exports = function (options) {
     }
 
     // real-time switching if supported by OS/browser
-    window
-      .matchMedia(prefers("dark"))
-      .addEventListener("change", function (e) {
-        if (e.matches) {
-          activateTheme(dark);
-        }
-      });
-    window
-      .matchMedia(prefers("light"))
-      .addEventListener("change", function (e) {
-        if (e.matches) {
-          activateTheme(light);
-        }
-      });
+    window.matchMedia(prefers("dark")).addEventListener("change", function (e) {
+      if (e.matches) {
+        activateTheme(dark);
+      }
+    });
+    window.matchMedia(prefers("light")).addEventListener("change", function (e) {
+      if (e.matches) {
+        activateTheme(light);
+      }
+    });
   } else if (pref === dark || pref === light) {
     // if user already explicitly toggled in the past, restore their preference
     activateTheme(pref);
@@ -77,11 +86,13 @@ module.exports = 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.visibility = "visible";
-
     // handle toggle click
     toggle.addEventListener("click", function () {
+      // optional onUserToggle callback function passed as option
+      if (typeof options.onUserToggle === "function") {
+        options.onUserToggle(toggle);
+      }
+
       // switch to the opposite theme & save preference in local storage
       if (active) {
         activateTheme(light, true);
@@ -90,4 +101,4 @@ module.exports = function (options) {
       }
     });
   }
-};
+}

src/index.d.ts

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

webpack.config.js

@@ -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,
-      }),
-    ],
-  },
-};