Dark Mode with Web Standards
8 days ago
- #dark-mode
- #CSS
- #web-standards
- 在 CSS 中使用 'prefers-color-scheme' 媒体查询以遵循操作系统设置，但也允许用户通过网站内切换来覆盖设置。
- 通过 HTML 中的 <meta> 标签设置默认颜色方案，以加快加载速度，值可以是 'light'、'dark' 或 'light dark'（回退到操作系统设置）。
- 使用 JavaScript 动态更新颜色方案，并将用户偏好存储在 localStorage 中以实现持久化。
- 'color-scheme' 影响系统颜色、滚动条、默认元素颜色、iframe 和使用 'light-dark()' 或 'prefers-color-scheme' 的 SVG。
- 存在一个断开点：'prefers-color-scheme' 反映操作系统设置而不考虑 'color-scheme'，这限制了其在页面内切换中的应用。
- 'color-scheme' 影响 'prefers-color-scheme' 的例外情况包括 iframe 和 SVG，但浏览器支持情况各异（例如，Safari 存在 bug）。
- 'light-dark()' 函数现在支持现代浏览器中的渐变和图像，允许根据颜色方案使用不同的背景。
- 对于非颜色更改（如将 box-shadow 替换为 border），可以使用 CSS 自定义属性和样式查询来检测深色模式，尽管原生支持尚在等待中。
- 未来的提案可能允许通过 JavaScript 覆盖 'prefers-color-scheme'，但存在浏览器团队（例如 Safari）的反对意见。