---
title: 样式表适配
summary: "介绍小程序样式表适配主题的两种方式：样式名选择器适配和 CSS 媒体查询环境变量适配。"
questions:
  - 小程序样式表适配支持哪些方式实现主题切换？
  - 如何通过样式名选择器适配深色和浅色主题？
  - 在 tyss/less 中使用什么选择器切换主题？
  - 如何通过 CSS 环境变量适配主题色？
  - 自定义主题色应在哪个文件中声明？
  - '@media prefers-color-scheme 查询支持哪些值？'
  - ':root[theme=''dark''] 选择器的作用是什么？'
  - color-scheme 属性在主题适配中起什么作用？
  - 如何在样式文件中定义浅色和深色模式下的不同变量值？
  - CSS 环境适配方式和样式名适配方式有什么区别？
---

# 样式表适配

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

## 1. 样式名适配

`tyss/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); /* 浅色文字 */
}
```

## 2. css 环境适配

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

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