实现网页跟随系统主题切换

最新推荐文章于 2024-10-22 17:35:08 发布

原创

最新推荐文章于 2024-10-22 17:35:08 发布 · 1.5k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端

本文介绍如何使用JavaScript的matchMediaAPI来检测用户设备的系统主题，如暗色模式，然后动态地调整网页样式，使其跟随系统主题。通过一个简单的HTML和CSS示例，展示了如何监听系统主题变化并相应地切换页面样式。

如何实现网页跟随系统主题切换？想必大家都是用过媒体查询@media (prefers-color-scheme: dark) 实现亮/暗主题的切换，那如何让其跟随系统自动切换呢？在window对象上，有matchMedia这个API可以帮助我们解决这个问题。它和css中的媒体查询一样的用法，只是这个是在JS中使用。

先看示例：
请添加图片描述

基本用法：

window.matchMedia('(prefers-color-scheme: dark)')

可以帮我们获取到系统当前的主题色是否为暗色，其返回一个查询结果对象：
在这里插入图片描述
写一个简单的示例：

<!DOCTYPE html>
<html lang="en" class="light">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href