0
# Theme System
1

2
Comprehensive theming system extending UnoCSS preset-mini with extensive animation definitions, media queries, ARIA selectors, and design tokens.
3

4
## Capabilities
5

6
### Theme Object
7

8
Complete theme configuration combining preset-mini theme with Wind-specific extensions.
9

10
```typescript { .api }
11
const theme: Theme;
12

13
interface Theme extends PresetMiniTheme {
14
  aria: AriaTheme;
15
  animation: AnimationTheme;
16
  media: MediaTheme;
17
  supports: SupportsTheme;
18
  preflightBase: PreflightBaseTheme;
19
}
20
```
21

22
### ARIA Theme
23

24
ARIA attribute selectors for accessible styling.
25

26
```typescript { .api }
27
interface AriaTheme {
28
  busy: string;
29
  checked: string;
30
  disabled: string;
31
  expanded: string;
32
  hidden: string;
33
  pressed: string;
34
  readonly: string;
35
  required: string;
36
  selected: string;
37
}
38
```
39

40
The ARIA theme provides the following selectors:
41

42
- `aria-busy`: `'busy="true"'`
43
- `aria-checked`: `'checked="true"'`
44
- `aria-disabled`: `'disabled="true"'`
45
- `aria-expanded`: `'expanded="true"'`
46
- `aria-hidden`: `'hidden="true"'`
47
- `aria-pressed`: `'pressed="true"'`
48
- `aria-readonly`: `'readonly="true"'`
49
- `aria-required`: `'required="true"'`
50
- `aria-selected`: `'selected="true"'`
51

52
### Animation Theme
53

54
Extensive animation system with 80+ predefined keyframes, durations, timing functions, and properties.
55

56
```typescript { .api }
57
interface AnimationTheme {
58
  keyframes: AnimationKeyframes;
59
  durations: AnimationDurations;
60
  timingFns: AnimationTimingFunctions;
61
  properties: AnimationProperties;
62
  counts: AnimationCounts;
63
  category: AnimationCategories;
64
}
65

66
interface AnimationKeyframes {
67
  // Attention Seekers
68
  pulse: string;
69
  bounce: string;
70
  spin: string;
71
  ping: string;
72
  'bounce-alt': string;
73
  flash: string;
74
  'pulse-alt': string;
75
  'rubber-band': string;
76
  'shake-x': string;
77
  'shake-y': string;
78
  'head-shake': string;
79
  swing: string;
80
  tada: string;
81
  wobble: string;
82
  jello: string;
83
  'heart-beat': string;
84
  
85
  // Specials
86
  hinge: string;
87
  'jack-in-the-box': string;
88
  'roll-in': string;
89
  'roll-out': string;
90
  
91
  // Lightspeed
92
  'light-speed-in-left': string;
93
  'light-speed-in-right': string;
94
  'light-speed-out-left': string;
95
  'light-speed-out-right': string;
96
  
97
  // Flippers  
98
  flip: string;
99
  'flip-in-x': string;
100
  'flip-in-y': string;
101
  'flip-out-x': string;
102
  'flip-out-y': string;
103
  
104
  // Rotating Entrances
105
  'rotate-in': string;
106
  'rotate-in-down-left': string;
107
  'rotate-in-down-right': string;
108
  'rotate-in-up-left': string;
109
  'rotate-in-up-right': string;
110
  
111
  // Rotating Exits
112
  'rotate-out': string;
113
  'rotate-out-down-left': string;
114
  'rotate-out-down-right': string;
115
  'rotate-out-up-left': string;
116
  'rotate-out-up-right': string;
117
  
118
  // Zooming Entrances
119
  'zoom-in': string;
120
  'zoom-in-down': string;
121
  'zoom-in-left': string;
122
  'zoom-in-right': string;
123
  'zoom-in-up': string;
124
  
125
  // Zooming Exits
126
  'zoom-out': string;
127
  'zoom-out-down': string;
128
  'zoom-out-left': string;
129
  'zoom-out-right': string;
130
  'zoom-out-up': string;
131
  
132
  // Bouncing Entrances
133
  'bounce-in': string;
134
  'bounce-in-down': string;
135
  'bounce-in-left': string;
136
  'bounce-in-right': string;
137
  'bounce-in-up': string;
138
  
139
  // Bouncing Exits
140
  'bounce-out': string;
141
  'bounce-out-down': string;
142
  'bounce-out-left': string;
143
  'bounce-out-right': string;
144
  'bounce-out-up': string;
145
  
146
  // Sliding Entrances
147
  'slide-in-down': string;
148
  'slide-in-left': string;
149
  'slide-in-right': string;
150
  'slide-in-up': string;
151
  
152
  // Sliding Exits
153
  'slide-out-down': string;
154
  'slide-out-left': string;
155
  'slide-out-right': string;
156
  'slide-out-up': string;
157
  
158
  // Fading Entrances
159
  'fade-in': string;
160
  'fade-in-down': string;
161
  'fade-in-down-big': string;
162
  'fade-in-left': string;
163
  'fade-in-left-big': string;
164
  'fade-in-right': string;
165
  'fade-in-right-big': string;
166
  'fade-in-up': string;
167
  'fade-in-up-big': string;
168
  'fade-in-top-left': string;
169
  'fade-in-top-right': string;
170
  'fade-in-bottom-left': string;
171
  'fade-in-bottom-right': string;
172
  
173
  // Fading Exits
174
  'fade-out': string;
175
  'fade-out-down': string;
176
  'fade-out-down-big': string;
177
  'fade-out-left': string;
178
  'fade-out-left-big': string;
179
  'fade-out-right': string;
180
  'fade-out-right-big': string;
181
  'fade-out-up': string;
182
  'fade-out-up-big': string;
183
  'fade-out-top-left': string;
184
  'fade-out-top-right': string;
185
  'fade-out-bottom-left': string;
186
  'fade-out-bottom-right': string;
187
  
188
  // Back Entrances
189
  'back-in-up': string;
190
  'back-in-down': string;
191
  'back-in-right': string;
192
  'back-in-left': string;
193
  
194
  // Back Exits
195
  'back-out-up': string;
196
  'back-out-down': string;
197
  'back-out-right': string;
198
  'back-out-left': string;
199
}
200

201
interface AnimationDurations {
202
  pulse: string;
203
  'heart-beat': string;
204
  'bounce-in': string;
205
  'bounce-out': string;
206
  'flip-out-x': string;
207
  'flip-out-y': string;
208
  hinge: string;
209
}
210

211
interface AnimationTimingFunctions {
212
  pulse: string;
213
  ping: string;
214
  'head-shake': string;
215
  'heart-beat': string;
216
  'pulse-alt': string;
217
  'light-speed-in-left': string;
218
  'light-speed-in-right': string;
219
  'light-speed-out-left': string;
220
  'light-speed-out-right': string;
221
}
222

223
interface AnimationCounts {
224
  spin: string;
225
  ping: string;
226
  pulse: string;
227
  'pulse-alt': string;
228
  bounce: string;
229
  'bounce-alt': string;
230
}
231
```
232

233
### Media Theme
234

235
Media query definitions for responsive design and user preferences.
236

237
```typescript { .api }
238
interface MediaTheme {
239
  portrait: string;
240
  landscape: string;
241
  os_dark: string;
242
  os_light: string;
243
  motion_ok: string;
244
  motion_not_ok: string;
245
  high_contrast: string;
246
  low_contrast: string;
247
  opacity_ok: string;
248
  opacity_not_ok: string;
249
  use_data_ok: string;
250
  use_data_not_ok: string;
251
  touch: string;
252
  stylus: string;
253
  pointer: string;
254
  mouse: string;
255
  hd_color: string;
256
}
257
```
258

259
The media theme provides the following queries:
260

261
- `portrait`: `'(orientation: portrait)'`
262
- `landscape`: `'(orientation: landscape)'`
263
- `os_dark`: `'(prefers-color-scheme: dark)'`
264
- `os_light`: `'(prefers-color-scheme: light)'`
265
- `motion_ok`: `'(prefers-reduced-motion: no-preference)'`
266
- `motion_not_ok`: `'(prefers-reduced-motion: reduce)'`
267
- `high_contrast`: `'(prefers-contrast: high)'`
268
- `low_contrast`: `'(prefers-contrast: low)'`
269
- `opacity_ok`: `'(prefers-reduced-transparency: no-preference)'`
270
- `opacity_not_ok`: `'(prefers-reduced-transparency: reduce)'`
271
- `use_data_ok`: `'(prefers-reduced-data: no-preference)'`
272
- `use_data_not_ok`: `'(prefers-reduced-data: reduce)'`
273
- `touch`: `'(hover: none) and (pointer: coarse)'`
274
- `stylus`: `'(hover: none) and (pointer: fine)'`
275
- `pointer`: `'(hover) and (pointer: coarse)'`
276
- `mouse`: `'(hover) and (pointer: fine)'`
277
- `hd_color`: `'(dynamic-range: high)'`
278

279
### Supports Theme
280

281
CSS @supports feature queries for progressive enhancement.
282

283
```typescript { .api }
284
interface SupportsTheme {
285
  grid: string;
286
}
287
```
288

289
The supports theme provides:
290

291
- `grid`: `'(display: grid)'`
292

293
### Preflight Base Theme
294

295
Base CSS styles for consistent cross-browser rendering.
296

297
```typescript { .api }
298
interface PreflightBaseTheme {
299
  [selector: string]: CSSObject;
300
}
301
```
302

303
The preflight base combines multiple base style systems:
304
- Transform base styles
305
- Touch action base styles  
306
- Scroll snap type base styles
307
- Font variant numeric base styles
308
- Border spacing base styles
309
- Box shadows base styles
310
- Ring base styles
311
- Filter base styles
312
- Backdrop filter base styles
313

314
**Usage Example:**
315

316
```typescript
317
import { theme } from "@unocss/preset-wind";
318

319
// Access animation keyframes
320
const pulseKeyframe = theme.animation.keyframes.pulse;
321

322
// Access media queries
323
const darkModeQuery = theme.media.os_dark;
324

325
// Access ARIA selectors
326
const checkedSelector = theme.aria.checked;
327
```