如何通过prefers-color-scheme检测系统主题色？

本文共计911个文字，预计阅读时间需要4分钟。

目录+引言+设置主题色+测试主题色+监听主题色变化+引言+我们在访问某个站点时，有时可能会遇到这样的场景：该站点在白天访问时，主题色是亮色；而晚上访问时，主题色则变为暗色。

目录

• 引言
• 设置主题色
• 检测主题色
• 监听主题色变化

引言

我们在访问某个站点时，有时可能会发现这样一种场景：该站点在白天访问时，它是亮色主题；当晚上访问时，它就变成暗色主题了。而且这种主题的切换是自动的，他会随系统主题变化而改变。如果我们要将这种功能应用在自己站点上，该如何实现呢？

本文涉及三个相关知识点：

• 设置主题色
• 检查主题色
• 监听主题色变化

设置主题色

在 CSS 中，提供了一种设置系统主题色的媒体特性 prefers-color-scheme，该特性通常提供两个值 light 和 dark。顾名思义，这两个值一个代表 日间模式，一个表示 夜间模式。并且他们的兼容性也是最好的。