mirror of
https://github.com/jakejarvis/dark-mode.git
synced 2025-04-25 19:55:22 -04:00
582e64ae13
Bumps [eslint-plugin-compat](https://github.com/amilajack/eslint-plugin-compat) from 3.12.0 to 3.13.0. - [Release notes](https://github.com/amilajack/eslint-plugin-compat/releases) - [Changelog](https://github.com/amilajack/eslint-plugin-compat/blob/master/CHANGELOG.md) - [Commits](https://github.com/amilajack/eslint-plugin-compat/compare/v3.12.0...v3.13.0) --- updated-dependencies: - dependency-name: eslint-plugin-compat dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <support@github.com>
🌓 Dark Mode Switcheroo™
Very simple CSS dark/light mode toggler with saved preference via local storage & dynamic OS setting detection. Zero dependencies and only ~600 bytes gzipped!
Usage
Options
darkMode.init([...options])
toggle: The clickable 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 thelocalStoragekey 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)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
<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/dark-mode.min.js"></script>
<script>
window.darkMode.init({
toggle: document.querySelector(".dark-mode-toggle"),
classes: {
light: "light",
dark: "dark",
},
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>
Node
npm install @jakejarvis/dark-mode
# or...
yarn add @jakejarvis/dark-mode
Module via import
import { init } from "@jakejarvis/dark-mode";
init({
// ...same as browser.
});
CommonJS via require()
const darkMode = require("@jakejarvis/dark-mode");
darkMode.init({
// ...same as browser.
});
To-Do
- Support more than two themes
- Better readme docs
- Add callback function
onChange(oronToggleetc.) passed in as an option
License
MIT