mirror of
https://github.com/jakejarvis/dark-mode.git
synced 2025-04-25 14:05:22 -04:00
🌓 Dark mode switcheroo
Simple dark mode switching with saved preference via local storage & dynamic OS setting detection!
Usage
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
<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
npm install @jakejarvis/dark-mode
# or...
yarn add @jakejarvis/dark-mode
import darkMode from "@jakejarvis/dark-mode";
// or:
// const darkMode = require("@jakejarvis/dark-mode");
darkMode({
toggle: document.querySelector(".dark-mode-toggle"),
classes: {
light: "light",
dark: "dark",
},
default: "light",
storageKey: "dark_mode_pref",
});
License
MIT
Description
🌓 Super simple CSS theme switching with saved preferences and automatic OS setting detection
https://www.npmjs.com/package/dark-mode-switcheroo
Readme
MIT
4 MiB
Languages
HTML
50.5%
TypeScript
49.5%