如何切换整个页面的深色主题？

要实现整个页面的深色主题切换，可以通过CSS变量和JavaScript来实现。以下是一个基本的实现步骤和示例代码：

基础概念

CSS变量：CSS变量（也称为自定义属性）允许你在样式表中定义可重用的值，并且可以在运行时通过JavaScript进行修改。
JavaScript：用于动态修改DOM元素的样式或属性。

优势

灵活性：可以轻松地在不同主题之间切换，而不需要重新加载页面。
可维护性：使用CSS变量使得样式管理更加集中和简洁。
用户体验：用户可以根据自己的偏好选择主题，提升使用体验。

类型

系统级主题：根据操作系统的主题自动切换。
用户自定义主题：用户可以选择自己喜欢的主题。

应用场景

网站和应用：为用户提供个性化的外观选项。
响应式设计：根据不同的环境（如白天和夜晚）自动切换主题。

实现步骤

定义CSS变量：在全局样式中定义深色和浅色主题的变量。
创建切换按钮：使用HTML和JavaScript创建一个按钮来切换主题。
应用主题：通过JavaScript修改根元素的CSS变量来切换主题。

示例代码

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Theme Switcher</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <button id="theme-switcher">Switch to Dark Theme</button>
    <div class="content">
        <h1>Welcome to My Website</h1>
        <p>This is a sample text.</p>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS (styles.css)

:root {
    --background-color: #ffffff;
    --text-color: #000000;
}

body.dark-theme {
    --background-color: #121212;
    --text-color: #ffffff;
}

body {
    background-color: var(--background-color);
    color: var(--text-color);
    transition: background-color 0.3s, color 0.3s;
}

.content {
    padding: 20px;
}

JavaScript (script.js)

document.getElementById('theme-switcher').addEventListener('click', function() {
    document.body.classList.toggle('dark-theme');
    this.textContent = document.body.classList.contains('dark-theme') ? 'Switch to Light Theme' : 'Switch to Dark Theme';
});