如何仅使用 CSS 在 PWA 中支持浅色和深色主题

Source: Dev.to

概览

Web 应用现在需要同时支持浅色模式和暗色模式。用户应该能够选择自己偏好的外观，这可以在浏览器支持 light-dark() 函数或 prefers-color-scheme 媒体特性时，仅使用纯 CSS 实现。

使用 light-dark()（CSS 4）

如果浏览器实现了 light-dark() 函数，你可以定义 CSS 自定义属性，让其根据系统或浏览器主题自动切换值：

/* style.css */
:root {
  color-scheme: light dark;
  --background: light-dark(white, black);
  --color: light-dark(black, white);
}

• 第一个参数（white, black）适用于浅色主题。
• 第二个参数（black, white）适用于暗色主题。
• 可以使用任何自定义属性名称，只需遵循相同的 light-dark() 语法。

不需要额外的 JavaScript 或框架代码。

使用 prefers-color-scheme 的回退方案

对于不支持 light-dark() 但支持 prefers-color-scheme 媒体查询的浏览器，使用一个简单的媒体规则：

/* style.css */
:root {
  color-scheme: light dark;
  --background: white;
  --color: black;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: black;
    --color: white;
  }
}

如果浏览器既不支持 light-dark() 也不支持 prefers-color-scheme，则上述 CSS 不会产生效果，且没有实用的回退方案。

限制

• 该方法仅遵循 系统级 主题设置（操作系统或浏览器）。它不提供应用内的切换开关供用户使用。
• 包括所有版本的 Internet Explorer 在内的旧浏览器，都不支持 light-dark() 和 prefers-color-scheme，因此主题不会自动切换。
• 若要提供每个应用的主题切换或更新网站图标、manifest 颜色等 UI 元素，则需要额外的 JavaScript。

扩展方案

1. SCSS 变量 – 用 SCSS 变量替代原始颜色值，以便更易维护。
2. JavaScript 增强 – 检测用户偏好，存储手动覆盖，并动态更新：
   • meta theme-color
   • PWA manifest 图标
   • 任何其他需要反映所选主题的 DOM 元素
3. 框架集成 – 虽然纯 CSS 方法与任何框架都兼容，但如果需要，你可以将其集成到组件库（例如 styled‑components）中，虽非必须。

通过将上述 CSS 代码片段作为基线，仅在必要时添加 JavaScript，你即可以最小的复杂度实现完整的暗色主题支持。