---
summary: "介绍通过CSS选择器和媒体查询实现小程序主题样式跟随切换的方法。"
tags: [主题样式适配, CSS主题选择器切换, 环境变量主题判断]
questions:
  - 如何通过 CSS 选择器实现主题切换？
  - 如何使用 prefers-color-scheme 媒体查询适配深色模式？
  - 样式名适配中 theme 属性选择器的用法是什么？
  - 如何在 app.less 中自定义主题色变量？
  - 小程序中实现主题跟随切换有哪些方式？
---

# 样式表适配

通过对样式名或环境变量的适配，可以实现主题跟随切换。

## 一、样式名适配

`less` 中，支持通过选择器 `theme='dark' | 'light'` 去切换主题。

```css
:root {
  --main-bg-color: rgb(255, 255, 255); /* 浅色背景 */
  --main-text-color: rgb(54, 54, 54); /* 深色文字 */
}

:root[theme='dark'] {
  --main-bg-color: rgb(47, 58, 68); /* 深色背景 */
  --main-text-color: rgb(197, 197, 197); /* 浅色文字 */
}
```

## 二、CSS 环境适配

如果您想要自定义主题色，可以通过 `app.less` 内声明：

```css
page {
  color-scheme: light;
  --custom-color: #ff0000;
}
@media (prefers-color-scheme: dark) {
  page {
    color-scheme: dark;
    --custom-color: #0000ff;
  }
}
```