如何在網(wǎng)站中添加暗黑模式切換按鈕？首先使用HTML構(gòu)建結(jié)構(gòu)，接著用CSS定義兩種主題樣式，最後通過JavaScript實(shí)現(xiàn)切換功能。 1. 創(chuàng)建基礎(chǔ)佈局：建立包含切換按鈕和內(nèi)容的HTML文件，並鏈接CSS與JS文件。 2. 在CSS中定義主題：利用變量設(shè)置默認(rèn)和暗黑模式的顏色方案，並應(yīng)用到頁面元素上。 3. 添加JavaScript切換邏輯：通過點(diǎn)擊事件切換body上的暗黑模式類，並可藉助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.
以上是如何使用HTML，CSS和JS實(shí)現(xiàn)'暗模式”切換？的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！