于是简单查了一下，发现目前的大部分主流浏览器（Chrome、Firefox、Edge..）已经开始支持通过使用 prefers-color-scheme CSS 媒体特性来检测用户是否将操作系统的主题色设置为亮色或者暗色。

使用这种方式，在更改操作系统主题（或更改Win10中的新Edge默认主题）时，页面样式实时生效，无需刷新。（Microsoft Docs 则需要刷新页面才可生效，使用的也许不是这种方式，此处不做深究）。

关键代码：

通过CSS@media设置相应主题的样式，在受支持的浏览器和操作系统中将会根据环境选择相应的样式。

表示系统未得知用户在这方面的选项。在布尔值上下文中，其执行结果为 false。

表示用户已告知系统他们选择使用浅色主题的界面。

表示用户已告知系统他们选择使用暗色主题的界面。

“已告知”为：浏览器的宿主系统支持设置主题色，且被设置为了亮色或者暗色。

目前，若结果为 no-preference，无法通过此媒体特性获知宿主系统是否支持设置主题色，或者用户是否主动将其设置为无偏好。出于隐私保护等方面的考虑，用户或用户代理也可能在一些情况下在浏览器内部将其设置为 no-preference。

在Chrome、Firefox中打开本页，切换Win10操作系统主题色；或在Edge中切换浏览器主题色查看效果。