Simple Background Toggle
Give users control. This script switches a CSS class on the <body> tag, allowing you to instantly invert colors for a "Night Mode" effect.
Reading Mode
Click the toggle to switch between Light and Dark themes.
Copy the Script
<style>
body.dark-mode {
background-color: #222;
color: #fff;
}
</style>
<script>
function toggleDark() {
document.body.classList.toggle("dark-mode");
}
</script>
<button onclick="toggleDark()">Toggle Dark Mode</button>Frequently Asked Questions
This basic version does not save the preference. For a persistent version that remembers the choice on reload, check our 'Cookies & Storage' section.
Yes. The best way is to toggle a CSS class (like `.dark-mode`) on the body, which can contain rules for background, text color, and link colors all at once.
Yes. You can toggle Bootstrap's built-in data attributes (e.g., `data-bs-theme='dark'`) easily with JavaScript.