Theming
Fluent Design Vue uses CSS custom properties for theming. All tokens are defined as --fui-* variables.
Light / Dark mode
Wrap your app with FuiProvider and set the theme prop:
vue
<FuiProvider theme="dark">
<App />
</FuiProvider>Design tokens
| Category | Prefix | Example |
|---|---|---|
| Color | --fui-color-* | --fui-color-brand-background |
| Spacing | --fui-spacing-* | --fui-spacing-m |
| Border radius | --fui-border-radius-* | --fui-border-radius-medium |
| Typography | --fui-font-* | --fui-font-size-base-300 |
| Shadow | --fui-shadow-* | --fui-shadow-4 |