mirror of
https://github.com/jakejarvis/dark-mode.git
synced 2025-04-25 14:05:22 -04:00
🌓 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 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
localStoragekey holding the user's preference. (optional, default:"dark_mode_pref")
Browser
<button class="dark-mode-toggle">💡 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",
});
</script>
Node
npm install @jakejarvis/dark-mode
# or...
yarn add @jakejarvis/dark-mode
Module via import
import { init } from "@jakejarvis/dark-mode";
init({
toggle: document.querySelector(".dark-mode-toggle"),
classes: {
light: "light",
dark: "dark",
},
default: "light",
storageKey: "dark_mode_pref",
});
CommonJS via require()
const darkMode = require("@jakejarvis/dark-mode");
darkMode.init({
toggle: document.querySelector(".dark-mode-toggle"),
classes: {
light: "light",
dark: "dark",
},
default: "light",
storageKey: "dark_mode_pref",
});
To-Do
- Support more than two themes
- Add callback function
onChange(oronToggleetc.) passed in as an option - Better readme docs
License
MIT