perfers-color-scheme 使用简单介绍

perfers-color-scheme

简介

prefers-color-scheme 媒体查询属性用于检测用户操作系统是否使用深色模式。

属性值

  • dark 表示用户操作系统使用深色模式
  • light 表示用户操作系统使用浅色模式
  • no-preference 表示用户操作系统没有偏好，或者操作系统不支持该属性

示例

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

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

<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>系统主题模式</title>
  </head>
  <body>
  </body>
</html>

JS 获取

const scheme = window.matchMedia('(prefers-color-scheme: dark)').matches
scheme ? console.log("用户系统使用深色模式") : console.log("用户系统使用浅色模式")
  • Mac 电脑可以在通用里设置模式切换查看效果 windows 自行百度如何切换主题模式进行尝试

color-scheme

  • light 表示可以使用操作系统亮色配色方案渲染元素。
  • dark 表示可以使用操作系统深色配色方案渲染元素。
  • no-preference 表示元素未指定任何配色方案，因此应使用浏览器的默认配色方案呈现。
  • only 禁止用户代理覆盖元素的颜色方案。

语法

color-scheme: normal;
color-scheme: light;
color-scheme: dark;
color-scheme: light dark;
color-scheme: only light;

/* 全局值 */
color-scheme: inherit;
color-scheme: initial;
color-scheme: revert;
color-scheme: revert-layer;
color-scheme: unset;
  • 备注：测试直接制定 表单元素有效

要将整个页面配置为使用用户的配色方案首选项，请在 :root 元素上指定 color-scheme。

:root {
  color-scheme: light dark;
}

浏览器兼容性

Alternative Text

参考文档

posted @ 2024-06-05 13:08  影的记忆  阅读(146)  评论(0)  编辑  收藏  举报