如何使用Javascript将黑暗模式添加到本地存储

要在JavaScript中将黑暗模式添加到本地存储，您可以按照以下步骤操作：

基础概念

本地存储（Local Storage）：Web Storage API 提供的一种在浏览器中存储数据的方式，数据没有过期时间，数据会一直保存在浏览器中，直到被清除。
黑暗模式（Dark Mode）：一种用户界面设计，通过使用深色背景和浅色文本来减少屏幕亮度，从而在夜间或低光环境下提供更好的阅读体验。

类型

系统级黑暗模式：跟随操作系统的设置。
应用内黑暗模式：独立于操作系统，由应用自身控制。

应用场景

网站和网页应用：为用户提供舒适的阅读环境。
移动应用：改善夜间使用体验。

实现步骤

检测用户偏好：检查系统是否开启了黑暗模式。
应用黑暗模式样式：通过CSS切换到黑暗模式的样式表。
保存用户选择：使用本地存储记录用户的偏好设置。

示例代码

以下是一个简单的示例，展示如何使用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>Dark Mode Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <button id="darkModeToggle">Toggle Dark Mode</button>
    <script src="script.js"></script>
</body>
</html>

CSS (styles.css)

body {
    background-color: white;
    color: black;
}

body.dark-mode {
    background-color: black;
    color: white;
}

JavaScript (script.js)

document.addEventListener('DOMContentLoaded', function() {
    const toggleButton = document.getElementById('darkModeToggle');
    const currentTheme = localStorage.getItem('theme') || 'light';

    if (currentTheme === 'dark') {
        document.body.classList.add('dark-mode');
    }

    toggleButton.addEventListener('click', function() {
        document.body.classList.toggle('dark-mode');
        const isDarkMode = document.body.classList.contains('dark-mode');
        localStorage.setItem('theme', isDarkMode ? 'dark' : 'light');
    });
});