First, use JavaScript to obtain the user system preferences and locally stored theme settings, and initialize the page theme; 1. The HTML structure contains a button to trigger topic switching; 2. CSS uses: root to define bright theme variables, the .dark-mode class defines dark theme variables, and applies these variables through var(); 3. JavaScript detects prefers-color-scheme and reads localStorage to determine the initial theme; 4. Switch the dark-mode class on the html element when clicking the button, and saves the current state to localStorage; 5. All color changes are equipped with 0.3 seconds transition animation to improve user experience; finally, a dark mode switching function that supports memory selection, respects system preferences and is visually smooth.
Implements a CSS Dark Mode Toggle function, usually combining HTML, CSS and a small amount of JavaScript. Below is a clean, practical complete example for beginners or projects that require quick integration.
? Basic ideas
- Use a toggle button to control the page theme.
- Topics toggle by adding classes (such as
dark-mode ) on
- Use CSS variables to define bright and dark theme colors.
? HTML structure
<!DOCTYPE html>
<html lang="zh" class="light-mode">
<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="style.css" />
</head>
<body>
<header>
<h1>Welcome to my website</h1>
<p>Click the button to switch the topic?</p>
<button id="theme-toggle">Switch dark mode</button>
</header>
<main>
<section>
<h2>This is the main content area</h2>
<p>The background and text colors will automatically change according to the theme. </p>
</section>
</main>
<script src="script.js"></script>
</body>
</html>
? CSS style (support topic variables)
/* style.css */
:root {
/* Bright theme variable*/
--bg-color: #ffffff;
--text-color: #333333;
--primary-color: #007bff;
--header-bg: #f0f0f0;
}
.dark-mode {
/* Dark theme variable*/
--bg-color: #1a1a1a;
--text-color: #f0f0f0;
--primary-color: #00d8ff;
--header-bg: #333;
}
/* Apply variables*/
html {
background-color: var(--bg-color);
color: var(--text-color);
transition: background-color 0.3s ease, color 0.3s ease;
}
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
}
header {
background-color: var(--header-bg);
padding: 20px;
border-radius: 8px;
margin-bottom: 20px;
}
button {
background-color: var(--primary-color);
color: white;
border: none;
padding: 10px 16px;
border-radius: 6px;
cursor: pointer;
font-size: 16px;
}
button:hover {
opacity: 0.9;
}
/* Add a little animation effect*/
h1, h2, p {
transition: color 0.3s ease;
}
?? JavaScript switching logic
// script.js
const toggleButton = document.getElementById('theme-toggle');
const htmlElement = document.documentElement;
// Check user preferences (priority use of system settings)
const prefersDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
const currentMode = localStorage.getItem('theme') || (prefersDarkMode ? 'dark' : 'light');
// Initialize the topic if (currentMode === 'dark') {
htmlElement.classList.add('dark-mode');
}
// Switch the theme function toggleTheme() {
const isDark = htmlElement.classList.toggle('dark-mode');
// Save the user select localStorage.setItem('theme', isDark? 'dark' : 'light');
}
// Bind click event toggleButton.addEventListener('click', toggleTheme);
? Feature Highlights
- Memorize user selection : Use
localStorage to save topic preferences. - Respect system preferences : Automatically adapt according to
prefers-color-scheme when visiting for the first time. - Smooth transition : CSS
transition makes color changes more natural. - Strong scalability : More themes (such as crimson, purple, etc.) can be easily added through CSS variables.
? Tips
- You can make the buttons into Moon/Sun icons to enhance the visual experience.
- Use
color-scheme: light dark; to allow browser controls (such as input boxes) to adapt to the theme as well.
:root {
color-scheme: light dark;
}
Basically all this is not complicated but very practical. You can integrate this structure into any web page.
The above is the detailed content of css dark mode toggle example. For more information, please follow other related articles on the PHP Chinese website!