更改主题色 - 技术栈

最近就碰到面试官问我，如何有一个更改主题色的场景，我会如何实现？

脑子里最先出现的就是修改css变量，根据用户选择或者系统主题进行更改。接下来根据这个业务场景，设计一个技术方案吧~

修改CSS变量

定义CSS变量：在CSS中，你可以使用--前缀来定义一个变量。通常，这些变量被定义在:root伪类中，这样它们就可以作为全局变量在整个文档中使用。
应用CSS变量：定义了变量之后，你可以在其他样式规则中通过var()函数引用这些变量。当你想要应用主题色时，只需调用对应的变量即可。
动态更改主题色：CSS变量的一个优点是它们可以在JavaScript中动态更改，从而实现主题切换或响应用户操作的效果。
使用CSS变量的注意事项：

- CSS变量名必须以--开头。
- 变量名是区分大小写的。
- 变量可以在任何CSS选择器中使用，但通常定义在:root中作为全局变量。
- 变量的值可以是任何有效的CSS值，包括颜色、长度、百分比等。
- 变量可以被继承，但需要注意的是，如果父元素覆盖了变量的值，子元素将使用父元素的值。

css 复制代码

:root {
  /* 定义主题色变量 */
  --primary-color: #007bff;
  --secondary-color: #6c757d;
}

提示：:root表示根元素，拥有更高的优先级，这里可以设置全局样式变量，通过css的var方法来获取对应变量且获得相应的样式。

css 复制代码

body {
  color: var(--primary-color);
  background-color: white;
}

button {
  background-color: var(--secondary-color);
  color: white;
}

在这个例子中，我们使用了--primary-color作为body元素的文字颜色，以及--secondary-color作为按钮的背景颜色。

js 复制代码

function changeTheme() {
  document.documentElement.style.setProperty('--primary-color', '#17a2b8');
  document.documentElement.style.setProperty('--secondary-color', '#28a745');
}

通过调用changeTheme函数，你可以将主题色更改为不同的颜色，而不需要修改每个使用这些颜色的元素的样式规则。

通过使用CSS变量设置主题色，你可以创建一个更加灵活和可维护的样式系统，使得主题切换变得更加简单和高效。

媒体查询

css 复制代码

/* 根据系统的深色模式响应深色变量 */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: rgb(30,30,34);
    --textColor: rgb(150,150,154);
    --borderColor: #2C2C3A;
  }
}

可以通过媒体查询去监听，如果系统主题发生变化，那就使用不同的css变量

不过需要查看兼容性，Chrome不是全部版本支持的，76+后面就支持了

developer.mozilla.org/zh-CN/docs/...

JavaScript监听

当然，也可以通过JavaScript去监听系统主题变化

js 复制代码

if(window.matchMedia('(prefers-color-scheme: dark)').matches){
  //深色主题
}

let listeners={
  dark:(mediaQueryList )=>{
    if(mediaQueryList.matches){
      alert('您切换到深色模式了！')
    }
  },
  light:(mediaQueryList)=>{
    if(mediaQueryList.matches){
      alert('您切换到浅色模式了！')
    }
  }
}

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

效果

特别说明：不是更改浏览器的主题

不是这里选中黑色主题了，返回就是黑色主题

到底是哪里更改主题色呢？其实是系统设置里面，更改颜色配置，就能监听到了

当然面试的时候，我肯定记不住特别的变量，除非我开发过，不过只要条理清晰，错了也没关系，最后你说由于你没有开发过，那可能存在问题，面试官也能理解。

然后最近也发现一个关于更改主题色的npm包

github.com/ColinEspina...

源码我也看了一下，就是根据JavaScript监听window.matchMedia('(prefers-color-scheme: dark)')来实现的

链接：

如何根据系统主题自动响应CSS深色模式

xugaoyi.com/pages/5dde3...

如何将css深色模式添加到网站

kevquirk.com/how-to-add-...

一个 JS 脚本，一行代码让网页从亮模式变为暗模式

github.com/ColinEspina...