Skip to content

在JavaScript中检测用户的颜色方案偏好

最近引入的prefers-color-scheme媒体查询允许我们检查用户是否偏好浅色或深色颜色方案。这在为您的网站或Web应用程序实现深色模式时非常有用。

检查用户是否偏好深色方案

将媒体查询与Window.matchMedia()方法结合使用，可以检查用户是否在其操作系统设置中选择了深色方案（'dark'）。

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

检查用户是否偏好浅色方案

相同的技术可以用于检查用户是否偏好浅色方案。但请注意，prefers-color-scheme媒体查询的默认值是'light'。这意味着它也可能表示用户没有表达偏好。

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