CSS媒体查询@media (prefers-color-scheme:dark)判断系统白天黑夜模式

Posted jason_renyu

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS媒体查询@media (prefers-color-scheme:dark)判断系统白天黑夜模式相关的知识，希望对你有一定的参考价值。

前言

在最近学习中突然看到了在媒体查询中prefers-color-scheme:dark监听的使用，然后就模仿里边写了个简单例子，代码如下：

	body 
      background-color: #f5f5f5;
    
    @media (prefers-color-scheme: dark) 
      body 
        background-color: #666;

然后通过修改系统的黑天白夜/浅色深色模式, body的背景色也跟着响应的变动了，这个跟现在各APP推出黑夜模式以及随系统改变白天白夜模式的功能息息相关啊，感觉到了这个属性的重要性就在caniuse中查了一下，不出所料咱们的老朋友IE仍不支持，不过对于移动端的小伙伴来说已经够用了。

然后根据查询到的资料整理了一个demo，有需要的朋友可以复制下来到运行一下看效果，要注意在页面中手动设置light和dark后需要清除或者刷新页面，不然body的变化会使得系统的变化体现不出来

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>系统的主题色设置为亮色或者暗色</title>
  <style lang="css">
    /* 整个页面配置为使用用户的配色方案首选项 */
    /* 根元素，优先级最高，与html选择器相同 */
    :root 
      --color-background: #1b1b1b;
      --color-border: #cacfd5;
      --color-text-default: #0b1016;
      --color-base: #f4f5f6;
      --white-color-background: #fff;
      color-scheme: light dark;
    

    * 
      margin: 0;
      padding: 0;
    

    body 
      text-align: center;
      height: 100vh;
    

    .light-scheme 
      background: var(--white-color-background);
      color: var(--color-text-default);
    

    .dark-scheme 
      background: var(--color-background);
      color: white;
    

    /* 监听操作系统主题模式 */
    @media (prefers-color-scheme: dark) 
      body 
        background-color: var(--color-background);
      
    

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

    .tab-type 
      display: flex;
      justify-content: center;
      padding-top: 30px;
    

    .tab-type>li 
      list-style: none;
      cursor: pointer;
      color: #fff;
      background-color: rgb(33, 139, 216);
      border-radius: 12px;
      padding: 10px;
      margin: 0px 20px;
      text-align: center;
    

    #schemeTip 
      line-height: 50px;
    
  </style>
</head>

<body>
  <div class="content" id="content">
    <ul class="tab-type">
      <li id="light">浅色主题</li>
      <li id="dark">暗色主题</li>
      <li id="resetEffect">清除手动设置的影响</li>
    </ul>
    <h3 id="schemeTip"></h3>
  </div>
  <script>
    // 手动修改主题颜色
    const light = document.getElementById('light')
    const dark = document.getElementById('dark')
    const resetEffect = document.getElementById('resetEffect')
    const content = document.body
    const tipText = document.getElementById('schemeTip')

    let lightTip = '当前自定义主题：light亮色', darkTip = '当前自定义主题：dark暗色'

    light.onclick = () => 
      content.setAttribute('class', 'light-scheme')
      tipText.innerHTML = lightTip
    
    dark.onclick = () => 
      content.setAttribute('class', 'dark-scheme')
      tipText.innerHTML = darkTip
    

    // 清除设置后不影响系统变化的效果
    resetEffect.onclick = () => 
      content.setAttribute('class', '')
      // 默认亮色
      tipText.innerHTML = lightTip
    
    // js 监听系统主题模式，这个属性为js加载时候获取，目前还没有js监听的原生方法，如果后期有改动请留言
    const scheme = window.matchMedia('(prefers-color-scheme: dark)')
    console.log('系统主题变化', scheme)
    if (scheme.matches) 
      // 深色模式业务处理代码
      console.log('深色模式');
      tipText.innerHTML = darkTip
     else 
      // 浅色模式业务处理代码
      console.log('浅色模式');
      tipText.innerHTML = lightTip
    
  </script>
</body>

</html>

注意：目前prefers-color-scheme的值只有light和dark两种模式，其他的仍为手动设置。

CSS3 @Media 媒体查询

CSS3 媒体类型

值描述
all用于所有媒体类型设备。
print用于打印机。
screen用于计算机屏幕、平板电脑、智能手机等等。
speech用于大声“读出”页面的屏幕阅读器。

CSS @media 规则

@media 规则在媒体查询中用于为不同的媒体类型/设备应用不同的样式。

媒体查询可用于检查许多事情，诸如：

  • 视口的宽度和高度
  • 设备的宽度和高度
  • 方向（手机或平板电脑处于横屏还是竖屏模式？）
  • 分辨率

使用媒体查询是一种流行的技术，用于向台式机、笔记本电脑、平板电脑和手机提供定制的样式表（响应式网页设计）。

您还可以使用媒体查询来规定某些样式仅适用于打印的文档或屏幕阅读器（mediatype：print、screen 或 speech）。

除了媒体类型之外，还有媒体特性。媒体特性通过允许测试用户代理或显示设备的具体特性，为媒体查询提供了更多特定细节。例如，您可以将样式仅应用于大于或小于特定宽度的屏幕。

浏览器支持

表格中的数字注明了完全支持 @media 规则的首个浏览器版本。

属性ChromeIEFirefoxSafariOpera
@media2193.54.09

CSS 语法

@media not|only mediatype and (mediafeature and|or|not mediafeature) 
  CSS-Code;

not、only 和 and 关键字的含义：

not：not 关键字反正整个媒体查询的含义。

only：only 关键字可防止旧版浏览器应用指定的样式，这些浏览器不支持带媒体特性的媒体查询。它对现代浏览器没有影响。

and：and 关键字将媒体特性与媒体类型或其他媒体特性组合在一起。

它们都是可选的。但是，如果使用 not 或 only，则还必须指定媒体类型。

您还可以针对不同的媒体使用不同的样式表，就像这样：

<link rel="stylesheet" media="screen and (min-width: 900px)" href="widescreen.css">
<link rel="stylesheet" media="screen and (max-width: 600px)" href="smallscreen.css">

媒体特性

值描述
any-hover

是否有任何可用的输入机制允许用户（将鼠标等）悬停在元素上？

在 Media Queries Level 4 中被添加。

any-pointer

可用的输入机制中是否有任何指针设备，如果有，它的精度如何？

在 Media Queries Level 4 中被添加。

aspect-ratio视口（viewport）的宽高比。
color

输出设备每个像素的比特值，常见的有 8、16、32 位。

如果设备不支持输出彩色，则该值为 0。

color-gamut

用户代理和输出设备大致程度上支持的色域。

在 Media Queries Level 4 中被添加。

color-index

输出设备的颜色查询表（color lookup table）中的条目数量。

如果设备不使用颜色查询表，则该值为 0。

device-aspect-ratio

输出设备的宽高比。

已在 Media Queries Level 4 中被弃用。

device-height

输出设备渲染表面（如屏幕）的高度。

已在 Media Queries Level 4 中被弃用。

device-width

输出设备渲染表面（如屏幕）的宽度。

已在 Media Queries Level 4 中被弃用。

display-mode

应用程序的显示模式，如 web app 的 manifest 中的 display 成员所指定

在 Web App Manifest spec 被定义。

forced-colors

检测是用户代理否限制调色板。

在 Media Queries Level 5 中被添加。

grid输出设备使用网格屏幕还是点阵屏幕？
height视口（viewport）的高度。
hover

主输入机制是否允许用户将鼠标悬停在元素上？

在 Media Queries Level 4 中被添加。

inverted-colors

浏览器或者底层操作系统是否反转了颜色。

在 Media Queries Level 5 中被添加。

light-level

当前环境光水平。

在 Media Queries Level 5 中被添加。

max-aspect-ratio显示区域的宽度和高度之间的最大比例。
max-color输出设备每个颜色分量的最大位数。
max-color-index设备可以显示的最大颜色数。
max-height显示区域的最大高度，例如浏览器窗口。
max-monochrome单色（灰度）设备上每种“颜色”的最大位数。
max-resolution设备的最大分辨率，使用 dpi 或 dpcm。
max-width显示区域的最大宽度，例如浏览器窗口。
min-aspect-ratio显示区域的宽度和高度之间的最小比例。
min-color输出设备每个颜色分量的最小位数。
min-color-index设备可以显示的最小颜色数。
min-height显示区域的最小高度，例如浏览器窗口。
min-monochrome单色（灰度）设备上每种“颜色”的最小位数。
min-resolution设备的最低分辨率，使用 dpi 或 dpcm。
min-width显示区域的最小宽度，例如浏览器窗口。
monochrome

输出设备单色帧缓冲区中每个像素的位深度。

如果设备并非黑白屏幕，则该值为 0。

orientation视窗（viewport）的旋转方向（横屏还是竖屏模式）。
overflow-block

输出设备如何处理沿块轴溢出视口(viewport)的内容。

在 Media Queries Level 4 中被添加。

overflow-inline

沿内联轴溢出视口(viewport)的内容是否可以滚动？

在 Media Queries Level 4 中被添加。

pointer

主要输入机制是一个指针设备吗？如果是，它的精度如何？

在 Media Queries Level 4 中被添加。

prefers-color-scheme

探测用户倾向于选择亮色还是暗色的配色方案。

在 Media Queries Level 5 中被添加。

prefers-contrast

探测用户是否有向系统要求提高或降低相近颜色之间的对比度。

在 Media Queries Level 5 中被添加。

prefers-reduced-motion

用户是否希望页面上出现更少的动态效果。

在 Media Queries Level 5 中被添加。

prefers-reduced-transparency

用户是否倾向于选择更低的透明度。

在 Media Queries Level 5 中被添加。

resolution输出设备的分辨率，使用 dpi 或 dpcm。
scan输出设备的扫描过程（适用于电视等）。
scripting

探测脚本（例如 JavaScript）是否可用。

在 Media Queries Level 5 中被添加。

update

输出设备更新内容的渲染结果的频率。

在 Media Queries Level 4 中被添加。

width视窗（viewport）的宽度。

/*大型屏幕pc 超大屏*/
        @media screen and (min-width:1200px)
            #content
                color: #f00;
                background: #000;
           
       
        /*1200>=pc>=992 大屏，字体红色，背景黑色*/
        @media screen and (min-width:992px) and (max-width: 1199px)
            #content
                color: #f00;
                background: #000;
           
       
        /*768<=pad<992 中屏，字体黄色，背景红色*/
        @media screen and (min-width: 768px) and (max-width: 991px)
            #content
                color: #ff0;
                background: #f00;
           
       
        /*phone<768  小屏，字体黑色，背景蓝色*/
        @media screen and (max-width: 767px) and (min-width: 480px)
            #content
                color: #000;
                background: #0ff;
           
       
        /* 超小屏，字体黑色，背景蓝色*/
        @media screen and (max-width: 480px)
            #content
                color: #000;
                background: #0ff;
           
       
参考资料：

1、CSS 媒体查询

2、媒体查询入门指南 - 学习 Web 开发 | MDN

3、CSS媒体查询（@media）全面解析

以上是关于CSS媒体查询@media (prefers-color-scheme:dark)判断系统白天黑夜模式的主要内容，如果未能解决你的问题，请参考以下文章

CSS3 @Media 媒体查询

网站开发进阶（六十八）CSS3媒体查询@media

CSS3响应式布局（媒体查询@media）

CSS3响应式布局（媒体查询@media）

CSS-@media媒体查询

css3 media媒体查询器用法总结