用JavaScript检测黑暗模式的偏好

155 阅读1分钟

似乎每个网站、应用程序都提供了一个黑暗模式的偏好,感谢上帝。 当我在做深夜编码时,或者更糟糕的是,在交易altcoins时,黑暗模式特别有用。 我目前正在MetaMask上实现一个黑暗主题,这让我开始思考:如果用户的操作系统也默认为黑暗模式,我们是否有办法默认为黑暗模式?

你可以通过一行快速的代码来确定用户的操作系统是否喜欢黑暗模式。

const prefersDarkMode = window.matchMedia("(prefers-color-scheme:dark)").matches; // true

这个代码段利用了CSS[prefers-color-scheme](https://davidwalsh.name/prefers-color-scheme) 媒体查询和JavaScript的matchMedia API。

从用户体验的角度来看,你在使用这段代码时需要谨慎。 这种方法很适合为新用户设置默认值,而不改变现有用户的值。

The postDetect Dark Mode Preference with JavaScriptappeared first onDavid Walsh Blog.