如何使用JavaScript和CSS在浏览器中检测用户是喜欢浅色还是深色模式

本文概述

• A.使用CSS
• B.使用JavaScript

最近几天, 我购买了装有MacOS Mojave的Mac。奇怪的是, 当我在Windows上访问某些曾经有白色背景的网站时, 但是在我的Mac中, 网站背景却很暗。发生这种情况是因为Mac上使用了首选的配色方案, 在我看来, 这是深色的。我不知道有什么方法可以在你的网站上检测到此问题, 但是我想与你分享如何使用纯CSS或JavaScript轻松地做到这一点。

A.使用CSS

CSS Media Feature Preferreds-color-scheme允许你在浏览器中检测用户是否根据操作系统配置选择浅色还是深色主题。 CSS语法如下, 例如, 如果用户更喜欢深色模式, 则应该能够使用以下CSS设置深色背景：

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

还是轻便的一个：

@media (prefers-color-scheme: light) {
    body { 
        background: white; 
    }
}

B.使用JavaScript

如果你希望根据用户的偏好运行一些JavaScript代码, 则可以验证此条件, 以验证浏览器是否支持matchMedia并验证配色方案的条件是否暗匹配：

const userPrefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;

const userPrefersLight = window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches;

if(userPrefersDark){
    console.log("User prefers a dark interface");
}

编码愉快！