# Theme types

> Unions exported from `ngwr/theme` — the palette names every colored component accepts, and the mode values `WrTheme` works with.

Source: https://ngwr.dev/reference/interfaces/theme  
Kind: Type

## Import

```angular-ts
import type { WrColor, WrThemeMode, WrResolvedTheme } from 'ngwr/theme';
```

## WrColor

The palette union behind every `[color]` input. Values map 1:1 to the `--wr-color-*` custom properties, so a custom palette automatically flows into components.

```angular-ts
const accent: WrColor = 'primary';
```

## API

| Name | Description | Type | Default |
| --- | --- | --- | --- |
| `WrColor` | Palette names accepted by every `[color]` input. | `'primary' \| 'secondary' \| 'success' \| 'warning' \| 'danger' \| 'info' \| 'light' \| 'medium' \| 'dark'` | `—` |
| `WrThemeMode` | What the consumer asks `WrTheme` for — `auto` follows the OS. | `'light' \| 'dark' \| 'auto'` | `—` |
| `WrResolvedTheme` | What is actually applied to the DOM after resolving `auto`. | `'light' \| 'dark'` | `—` |

## See also

- [WrTheme](https://ngwr.dev/reference/services/theme) — Switches the mode and persists the choice.
- [Configuration](https://ngwr.dev/start/configuration) — Overriding the palette and theme tokens.