# Stylesheet Adaptation

Adapt the style names or environment variables to allow for switching between themes.

## Style name

During the programming with `TYSS or LESS`, you can use the selector `theme='dark' | 'light'` to switch between theme modes.

```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 */
}
```

## CSS environment

To customize the theme color, declare it in `app.tyss`.

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