How to add a dark mode toggle button to your website? First, use HTML to build the structure, then use CSS to define two theme styles, and finally implement the switching function through JavaScript. 1. Create a basic layout: Create an HTML file containing toggle buttons and content, and link CSS and JS files. 2. Define the theme in CSS: Use variables to set the color scheme of default and dark modes and apply it to page elements. 3. Add JavaScript switching logic: Switch the dark mode class on the body by clicking events, and save user preferences with localStorage.
Adding a dark mode toggle to your website is a great way to improve user experience. The key is combining HTML for structure, CSS for styling in both themes, and JavaScript to switch between them.
1. Set up the basic layout
Start with a simple HTML file that includes a button for toggling themes and some content to style. You'll also need to link a CSS file for styling and a JS file to handle the toggle logic.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Dark Mode Toggle</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<button id="theme-toggle">Toggle Dark Mode</button>
<h1>Hello, Dark Mode!</h1>
<p>This is an example paragraph.</p>
<script src="script.js"></script>
</body>
</html>
This gives you a foundation to build on. Next, define styles for both light and dark modes.
2. Define light and dark themes in CSS
Use CSS variables to make switching easier. Create two sets of colors under :root and .dark-mode , then apply those variables throughout your styles.
/* Default (light mode) */
:root {
--bg-color: #ffffff;
--text-color: #000000;
}
/* Dark mode */
.dark-mode {
--bg-color: #1a1a1a;
--text-color: #ffffff;
}
/* Apply theme */
body {
background-color: var(--bg-color);
color: var(--text-color);
transition: background-color 0.3s, color 0.3s;
}
h1, p {
color: var(--text-color);
} By using variables, you only need to change one class to switch themes across the entire site.
3. Add JavaScript to toggle the theme
The script will listen for a click on the button, then toggle the .dark-mode class on the body element.
document.getElementById('theme-toggle').addEventListener('click', function () {
document.body.classList.toggle('dark-mode');
}); This method is lightweight and works well for most sites. If you want to remember the user's preference:
- Use
localStorage to save the current theme setting. - Check it when the page loads and apply the correct class if needed.
Here's how:
const toggleButton = document.getElementById('theme-toggle');
// Check saved user preference
if (localStorage.getItem('theme') === 'dark') {
document.body.classList.add('dark-mode');
}
toggleButton.addEventListener('click', function () {
document.body.classList.toggle('dark-mode');
// Save current preference
if (document.body.classList.contains('dark-mode')) {
localStorage.setItem('theme', 'dark');
} else {
localStorage.setItem('theme', 'light');
}
});
That's the core setup. It doesn't take many lines of code, but it makes a big difference for users who prefer dark themes. Just a few more tweaks — like updating icons or images for better contrast — and you're good to go.
The above is the detailed content of How to implement a 'dark mode' toggle using HTML, CSS, and JS?. For more information, please follow other related articles on the PHP Chinese website!