data-theme

data-theme 是一个 HTML5 属性，通常用于设置网页或应用程序的主题。以下是对 data-theme 的详细解释：

基础概念

data-theme 是一个自定义数据属性（Custom Data Attribute），它允许开发者向 HTML 元素添加额外的信息，这些信息可以被 JavaScript 或 CSS 使用。data-theme 常用于设置或切换网页的主题，如深色模式（dark mode）和浅色模式（light mode）。

类型

data-theme 属性通常有以下几种值：

light：浅色主题
dark：深色主题
auto：自动检测系统主题并应用

应用场景

网页设计：允许用户在浅色和深色主题之间切换。
移动应用：根据用户的系统设置自动切换主题。
响应式设计：根据不同的设备和环境调整主题。

示例代码

HTML

<!DOCTYPE html>
<html lang="en" data-theme="light">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Theme Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <button id="theme-toggle">Toggle Theme</button>
    <script src="script.js"></script>
</body>
</html>

CSS (styles.css)

body {
    background-color: var(--background-color);
    color: var(--text-color);
}

[data-theme="light"] {
    --background-color: white;
    --text-color: black;
}

[data-theme="dark"] {
    --background-color: black;
    --text-color: white;
}

JavaScript (script.js)

document.addEventListener('DOMContentLoaded', () => {
    const toggleButton = document.getElementById('theme-toggle');
    const currentTheme = document.documentElement.getAttribute('data-theme') || 'light';

    toggleButton.addEventListener('click', () => {
        const newTheme = currentTheme === 'light' ? 'dark' : 'light';
        document.documentElement.setAttribute('data-theme', newTheme);
    });
});

常见问题及解决方法

主题切换不生效：
- 确保 CSS 中定义了相应的主题样式。
- 检查 JavaScript 代码是否正确设置了 data-theme 属性。

自动检测系统主题失败：
- 使用 window.matchMedia('(prefers-color-scheme: dark)') 来检测系统主题，并相应地设置 data-theme 属性。

示例代码（自动检测系统主题）

document.addEventListener('DOMContentLoaded', () => {
    const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)');
    const currentTheme = prefersDarkScheme.matches ? 'dark' : 'light';
    document.documentElement.setAttribute('data-theme', currentTheme);

    prefersDarkScheme.addEventListener('change', (e) => {
        document.documentElement.setAttribute('data-theme', e.matches ? 'dark' : 'light');
    });
});

通过以上方法，你可以实现一个简单而有效的主题切换功能，提升用户体验。