# 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.

```css
: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`:

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