The key to creating a dark mode theme is to use CSS media queries and variables to manage color schemes. 1. Use prefers-color-scheme media to query the automatic adaptation system settings. The code is as follows: @media (prefers-color-scheme: dark) to apply dark styles; 2. Use CSS variables to uniformly manage colors, and realize theme switching by defining: root and .dark-mode variables; 3. Provide user manual switching options, combine JavaScript to dynamically switch class names and save preferences with localStorage; 4. Pay attention to the adaptation issues of images, icons, links and other elements in dark backgrounds, and consider browser compatibility and transition animation effects to ensure a good user experience.
Answer the title question directly: The key to creating a dark mode theme is to use CSS media queries and variables to manage color schemes, allowing web pages to apply dark styles based on user preferences or manually switches.
This is the most basic and common practice. Through prefers-color-scheme: dark media query, you can detect whether the user's system has dark mode enabled.
body {
background-color: #fff;
color: #000;
}
@media (prefers-color-scheme: dark) {
body {
background-color: #121212;
color: #e6e6e6;
}
} The advantage of writing this way is that it automatically adapts to the user's system settings, but the disadvantage is that it cannot allow users to manually switch topics within the web page. If you want to provide a "toggle button", you need to use JavaScript and CSS variables.
Using CSS custom properties (i.e. variables) can make topic switching more convenient and keep the code neat.
:root {
--bg-color: #fff;
--text-color: #000;
}
.dark-mode {
--bg-color: #121212;
--text-color: #e6e6e6;
}
body {
background-color: var(--bg-color);
color: var(--text-color);
} Then dynamically add/remove dark-mode classes to <html> or <body> through JavaScript to realize the switching function.
3. Provide user manual switching options
Although the system is in bright color mode, many people prefer dark color reading experience. It is necessary to add a toggle button at this time.
The basic ideas are as follows:
- Put a button on the page, such as "Switch Dark Mode"
- Bind click events, dynamically switch class names or directly modify changes
- It is best to store user preferences in localStorage and remember the last choice when you visit next time
<button id="toggle-dark-mode">Switch dark mode</button>
const button = document.getElementById('toggle-dark-mode');
button.addEventListener('click', () => {
document.documentElement.classList.toggle('dark-mode');
// Optional: Save the status to local storage if (document.documentElement.classList.contains('dark-mode')) {
localStorage.setItem('theme', 'dark');
} else {
localStorage.setItem('theme', 'light');
}
});
// Read the saved topic when the page loads window.addEventListener('DOMContentLoaded', () => {
const savedTheme = localStorage.getItem('theme');
if (savedTheme === 'dark') {
document.documentElement.classList.add('dark-mode');
}
}); This allows both automatic recognition and user customization.
4. Pay attention to details and compatibility
- The pictures and icons may not be visible in a dark background. It is recommended to prepare two sets of resources or use the fill attribute of SVG to control the color.
- The styles should also be adjusted separately in links, buttons, input boxes and other elements to avoid the default colors being inconsistent.
- Some browsers may not support
prefers-color-scheme well enough, and can be detected and fallbacked through JS
- Don't forget to transition animations to make the switch look more natural
Basically that's it. It is not complicated to implement, but details are easily overlooked, especially in terms of color contrast and interactive feedback.
The above is the detailed content of How to create a dark mode theme with CSS?. For more information, please follow other related articles on the PHP Chinese website!
![\"How](\"https:\/\/img.php.cn\/upload\/article\/000\/000\/000\/175294997770291.jpeg\")