html函数如何实现暗黑模式切换 html函数偏好设置的媒体查询

答案：通过CSS媒体查询检测系统偏好，结合JavaScript实现手动切换与本地存储。使用prefers-color-scheme区分亮暗色主题，data-theme属性控制样式，localStorage保存用户选择，支持自动、亮色、暗色三种模式，并通过过渡动画和预设主题避免闪屏，确保体验流畅。

实现暗黑模式切换和根据用户偏好自动适配，主要依靠 HTML、CSS 和 JavaScript 的结合使用，配合 媒体查询（media query） 检测用户的系统偏好。下面介绍完整实现方法。

1. 使用 prefers-color-scheme 媒体查询

通过 CSS 的 prefers-color-scheme 可以检测用户操作系统的亮色或暗色主题偏好。

示例代码：

<pre class="brush:php;toolbar:false;">
@media (prefers-color-scheme: light) {
:root {
--bg-color: #ffffff;
--text-color: #000000;
}
}
@media (prefers-color-scheme: dark) {
:root {
--bg-color: #1a1a1a;
--text-color: #f0f0f0;
}
}

页面加载时会自动根据系统设置应用对应的主题颜色。

2. 添加手动切换按钮（JavaScript 控制）

仅靠媒体查询无法让用户手动切换主题，需要 JavaScript 动态添加类或修改属性。

HTML 结构：

腾讯智影-AI数字人

基于AI数字人能力，实现7*24小时AI数字人直播带货，低成本实现直播业务快速增增，全天智能在线直播

73

查看详情

<pre class="brush:php;toolbar:false;">
<button id="theme-toggle">切换暗黑模式</button>

CSS 设置数据属性控制主题：

立即学习“前端免费学习笔记（深入）”；

<pre class="brush:php;toolbar:false;">
[data-theme="light"] {
--bg-color: #ffffff;
--text-color: #000000;
}
[data-theme="dark"] {
--bg-color: #1a1a1a;
--text-color: #f0f0f0;
}
body {
background-color: var(--bg-color);
color: var(--text-color);
transition: background-color 0.3s ease;
}

JavaScript 实现切换逻辑：

<pre class="brush:php;toolbar:false;">
const toggleButton = document.getElementById('theme-toggle');
const currentTheme = localStorage.getItem('theme') || 'auto'; // 默认自动
// 应用主题
function applyTheme(theme) {
if (theme === 'auto') {
document.body.removeAttribute('data-theme');
// 使用媒体查询判断
const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
document.body.setAttribute('data-theme', systemPrefersDark ? 'dark' : 'light');
} else {
document.body.setAttribute('data-theme', theme);
}
}
// 切换按钮点击事件
toggleButton.addEventListener('click', () => {
const current = localStorage.getItem('theme') || 'auto';
let nextTheme;
if (current === 'light') {
nextTheme = 'dark';
} else if (current === 'dark') {
nextTheme = 'auto';
} else {
nextTheme = 'light';
}
localStorage.setItem('theme', nextTheme);
applyTheme(nextTheme);
});
// 页面加载时初始化
applyTheme(currentTheme);
// 监听系统主题变化（当设置为 auto 时生效）
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
const current = localStorage.getItem('theme');
if (current === 'auto') {
applyTheme('auto');
}
});

3. 完整流程说明

这套方案支持三种状态：

• 自动（auto）：跟随系统主题，利用 prefers-color-scheme
• 亮色（light）：强制浅色模式
• 暗色（dark）：强制深色模式

用户切换后，主题选择保存在 localStorage 中，刷新页面仍保留设置。

4. 提示与优化建议

为了让体验更自然，可以加入以下优化：

• 给 body 加上过渡动画，颜色切换更平滑
• 在页面加载前通过内联 script 预设 data-theme，避免闪屏
• 按钮文字可动态显示当前状态，如“切换到亮色”

基本上就这些。不复杂但容易忽略细节，比如初始闪屏和持久化存储。