Security News
MCP Steering Committee Launches Official MCP Registry in Preview
The MCP Steering Committee has launched the official MCP Registry in preview, a central hub for discovering and publishing MCP servers.
By Sarah Gooding - Sep 09, 2025
dark-mode-switcheroo
Advanced tools
dark-mode-switcheroo
🌓 Simple CSS theme switching with saved preferences and automatic OS setting detection
🌓 Dark Mode Switcheroo™
Very simple CSS dark/light mode toggler with saved preference via local storage & dynamic OS setting detection. Zero dependencies and only ~500 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)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
<button class="dark-mode-toggle" style="visibility: hidden;">💡 Click to see the light... or not.</button>
<script src="https://unpkg.com/dark-mode-switcheroo/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 dark-mode-switcheroo
# or...
yarn add dark-mode-switcheroo
Module via import
import { init } from "dark-mode-switcheroo";
init({
// ...same as browser.
});
CommonJS via require()
const darkMode = require("dark-mode-switcheroo");
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
FAQs
🌓 Simple CSS theme switching with saved preferences and automatic OS setting detection
The npm package dark-mode-switcheroo receives a total of 25 weekly downloads. As such, dark-mode-switcheroo popularity was classified as not popular.
We found that dark-mode-switcheroo demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Package last updated on 11 Nov 2021
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Related posts
Product
Introducing Pull Request Stories to Help Security Teams Track Supply Chain Risks
Socket’s new Pull Request Stories give security teams clear visibility into dependency risks and outcomes across scanned pull requests.
By André Staltz - Sep 08, 2025
Research
/Security News
npm Author Qix Compromised via Phishing Email in Major Supply Chain Attack
npm author Qix’s account was compromised, with malicious versions of popular packages like chalk-template, color-convert, and strip-ansi published.
By Sarah Gooding, Olivia Brown, Kush Pandya, Philipp Burckhardt, Peter van der Zee, Douglas Coburn - Sep 08, 2025