CSS prefers-color-scheme 与 matchMedia() 深浅色模式

电玩女神 2024-05-24 03:23 45阅读 0赞

### CSS prefers-color-scheme 与 matchMedia() ###

> `prefers-color-scheme` 这个媒体查询特性用来检测用户是否设置亮色(`light`)或暗色(`dark`) 的主题色

#### 使用 CSS 设置 ####

?在 `macOS` 的设置-通用中, 可以选择设置系统的主题为浅色, 深色或自动  
![在这里插入图片描述][7a2d66c5a94042d7ba5ecb5ac2440d6c.png_pic_center]

属性值

*  `light`: 用户设置亮色主题
 *  `dark`: 用户设置暗色主题

来看简单上手.

<body>
        <h1>CSS: Perfers-Color-Scheme</h1>
    </body>

@media (prefers-color-scheme: dark)  {
        
      body {
        
        background-color: #111;
      }
      h1 {
        
        color: #3498db;
      }
    }

我们只需要写好媒体查询, 然后修改系统的颜色主题, 浏览器的页面就会自动响应变化, 不需要人工干预哦~  
![在这里插入图片描述][11d84dae06b24cc1a51d3ffbdc96874e.png_pic_center]

![在这里插入图片描述][fced5deeb11b4e0298b1259c615a8e3d.png_pic_center]

通常设计时, 不会固定写好颜色而是使用 `CSS` 变量, 不然一个颜色如果在很多地方都用到就需要写很多次修改起来也很麻烦

/* 定义亮色主题颜色 */
    :root {
        
      --body-bg-color: #fff;
      --h1-text-color: #000;
    }
    body {
        
      background-color: var(--body-bg-color);
    }
    h1 {
        
      color: var(--h1-text-color)
    }
    
    /* 定义暗色主题颜色 */
    @media (prefers-color-scheme: dark)  {
        
      :root {
        
        --body-bg-color: #111;
        --h1-text-color: #3498db;
      }
    }

![在这里插入图片描述][cd23b7e39fbf456dae283d74d1f390a8.png_pic_center]

![在这里插入图片描述][d242f743e3f24899bcd7748faa98c145.png_pic_center]

#### 使用 JavaScript 检测 ####

最关键的是使用 `Window.matchMedia() API`. 这个函数检测 `document` 是否匹配对应的媒体查询并返回一个 `MediaQueryList` 对象. 通过返回对象, 可以检测 `document` 是否匹配媒体查询

首先来看一个例子. 首先我们获得匹配结果, 然后通过注册 `change` 事件监听 `document` 对这个媒体查询的匹配结果, 进而做出一些处理.

let matchResult = window.matchMedia('(prefers-color-scheme: dark)');
    console.log('result', matchResult)
    
    matchResult.addEventListener('change', (e) => {
        
        console.log('变色了!', e)
    })

![在这里插入图片描述][3c7dc671cce246dd9552196ff571a256.png_pic_center]

当然, 如果想要想要同时对多个媒体查询的结果匹配, 可以使用 `and` 或者 `or`

let matchResult = window.matchMedia('(prefers-color-scheme: dark) and (max-width: 2000px)');

![在这里插入图片描述][e6116c1acdcc4daa967b9ea3beb97146.png_pic_center]

谢谢你看到这里?, 希望下次可以在写在 `Vue` 中实现深色和浅色模式的切换~

欢迎进群讨论前端工作与生活  
![在这里插入图片描述][210a560673174500baaad9e03b79e87a.jpeg_pic_center]

[7a2d66c5a94042d7ba5ecb5ac2440d6c.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/24/07923a3b8539486dabc9db67fb8f9b45.png
[11d84dae06b24cc1a51d3ffbdc96874e.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/24/439ee22a72b547fd92f82d5d039ce44a.png
[fced5deeb11b4e0298b1259c615a8e3d.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/24/f78c0b011e0a4f1399e22d66a2610575.png
[cd23b7e39fbf456dae283d74d1f390a8.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/24/dfc0f79d87aa4a47920e43897aa6d406.png
[d242f743e3f24899bcd7748faa98c145.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/24/b4437d027386403ca74a52e2d0a4968a.png
[3c7dc671cce246dd9552196ff571a256.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/24/5f042b6a62404405ac578f2c0e65e9b8.png
[e6116c1acdcc4daa967b9ea3beb97146.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/24/c5d81a6806e948fcbc93960225f22465.png
[210a560673174500baaad9e03b79e87a.jpeg_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/24/59f32c0012aa4924b8397b716b1f191e.jpeg