本页目录

一、样式名适配二、CSS 环境适配

样式表适配

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

一、样式名适配

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

: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 内声明：

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