github是如何根据系统主题自动切换css

发表于 2021-11-08 更新于 2023-02-13 分类于编程

前言

最近发现 github 能够根据系统的主题来自动调整整个站点的样式，很神奇

决定查查看到底是如何实现的

正文

使用的电脑环境为 windows11 以及最新的 chrome ，版本如下

首先我们先要看看 github 实现的效果是怎么样的

在windows11 中的个性化 - 颜色中，我们先切换到浅色模式，如下图

然后我们打开 github，发现和平常基本没区别

然后我们切换到深色模式

此时可以发现，背景已经变成深灰色了，任务栏，右键菜单也统统成为了深灰色

右键菜单如下

任务栏如下

这时我们返回到刚才浏览器打开的那个 github 页面，发现已经变成深色模式了

一个字形容，神奇！

那究竟是怎么实现的呢

没错，使用到的就是 css 的媒体查询

在媒体查询中，有一个查询属性为 prefers-color-scheme ，它的值为 light 或者 dark ，表明用户倾向于选择亮色还是暗色的配色方案

通过编写相关的代码，我们可以在相关场景下使用不同的样式

这里我们写个小 demo （使用 Vue3）

<template>
  <div class="text">我是一段文字</div>
</template>

<style scoped>
@media (prefers-color-scheme: light) {
  .text {
    color: black;
    background-color: white;
  }
}

@media (prefers-color-scheme: dark) {
  .text {
    color: white;
    background-color: black;
  }
}
</style>