JavaScript 中 PWA 怎么实现深色模式适配-js教程-PHP中文网

pwa深色模式适配需监听系统偏好、动态切换css变量或类名并持久化用户选择：页面加载时优先读取prefers-color-scheme，结合localstorage判断主题，设置data-theme属性触发样式更新；css用自定义属性统一管理两套主题色，js仅控制data-theme实现逻辑与样式的解耦；手动切换按钮需同步dom和localstorage，并在系统偏好变更时仅当用户未手动设置时响应；pwa启动页和离线页须内联初始化脚本确保主题一致，且主题切换须在dom渲染前完成以避免闪屏。

javascript 中 pwa 怎么实现深色模式适配

JavaScript 中 PWA 实现深色模式适配，核心在于监听系统偏好、动态切换 CSS 变量或类名，并持久化用户选择。关键不是只靠 JS 控制样式，而是结合媒体查询、CSS 自定义属性和 localStorage 协同工作。

监听系统深色偏好并初始化主题

页面加载时应优先读取 prefers-color-scheme 媒体查询，决定初始主题，避免闪屏。JS 中可用 window.matchMedia 获取当前系统设置：

调用 matchMedia('(prefers-color-scheme: dark)') 判断是否为深色系统
检查 localStorage 是否有用户手动设置（优先级高于系统）
根据结果给或添加 data-theme="dark" 或 data-theme="light"
触发一次 CSS 变量更新或 class 切换，确保样式立即生效

用 CSS 自定义属性统一管理主题色

推荐在 :root 中定义两套 CSS 变量，通过 [data-theme="dark"] 覆盖：

Java JDK 25

Java JDK 25 来自 OpenJDK 官方归档，版本为 JDK 25，本条下载地址已指向官方 Windows x64 zip 安装包直链，适合调试旧项目或兼容旧版 Java 运行环境。

下载

例如：--bg-primary: #ffffff; --text-primary: #000000;（浅色）
在 [data-theme="dark"] 下重写：--bg-primary: #121212; --text-primary: #e0e0e0;
所有组件样式使用 var(--bg-primary) 等引用，无需重复写两套 CSS
这样 JS 只需切 data-theme，样式自动响应，解耦逻辑与表现

提供手动切换按钮并同步状态

用户点击切换按钮时，JS 需更新 DOM、存储选择，并保持与系统偏好隔离：

绑定按钮 click 事件，翻转当前主题（如从 light → dark）
将新主题写入 localStorage.setItem('theme', 'dark')
同时调用 document.documentElement.setAttribute('data-theme', 'dark')
可选：调用 matchMedia 的 addEventListener('change') 监听系统变化，但仅在用户未手动设置时才响应，避免覆盖用户选择

确保 PWA 启动页和离线页也适配

PWA 的 manifest.json 和 service worker 缓存内容需兼容主题：

manifest.json 中的 background_color 和 theme_color 建议设为中性色（如 #212121 或 #ffffff），或生成两个版本 manifest 动态注入（较复杂，一般不必要）
离线页面（如 offline.html）需包含相同主题逻辑：内联初始化脚本，读取 localStorage 并设置 data-theme
service worker 缓存 HTML 文件时，确保缓存的是带主题初始化逻辑的版本，而非纯静态模板

不复杂但容易忽略的是：主题切换必须在 DOM 渲染前完成，否则会短暂出现错误配色；另外，iOS Safari 对 prefers-color-scheme 支持较晚（iOS 13.4+），旧版本需降级为默认浅色+手动切换。