On this page

1. Style Name Adaptation 2. CSS Environment Adaptation

Stylesheet Adaptation

By adapting style names or environment variables, you can achieve theme switching.

1. Style Name Adaptation

In less, you can switch themes using the theme='dark' | 'light' selector.

:root {
  --main-bg-color: rgb(255, 255, 255); /* Light background */
  --main-text-color: rgb(54, 54, 54); /* Dark text */
}

:root[theme='dark'] {
  --main-bg-color: rgb(47, 58, 68); /* Dark background */
  --main-text-color: rgb(197, 197, 197); /* Light text */
}

2. CSS Environment Adaptation

If you want to customize theme colors, you can declare them in app.less:

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