# Customization
foxui is designed to be opinionated by default but easy to customize. Colors, border radius, and fonts can all be changed with CSS variables — no build step required.
## Colors
foxui uses two color scales: **base** (neutrals) and **accent** (brand color). The default is pink accent on stone base.
### Switching colors
Add a color class to any element to retheme it and all its children:
```svelte
Also blue
```
**Available accent colors:** red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose
**Available base colors:** gray, zinc, neutral, stone, slate, taupe, mist, olive, mauve
### Theme Picker
Try it out — pick an accent and base color:
### Changing globally
To change the color for your entire app, add the class to your `` or `` element:
```html
```
### Custom colors
Override the CSS variables directly for full control:
```css
:root {
--accent-500: oklch(0.65 0.2 250);
/* set all shades 50-950 for best results */
}
```
## Border Radius
All components use three radius tokens that you can override:
- `--ui-radius` — `1rem` (16px) — Buttons, inputs, cards, boxes
- `--ui-radius-lg` — `1.25rem` (20px) — Modals, sidebars, large containers
- `--ui-radius-sm` — `0.75rem` (12px) — Inner elements, menu items, small controls
### Changing globally
```css
:root {
--ui-radius: 0.5rem;
--ui-radius-lg: 0.75rem;
--ui-radius-sm: 0.25rem;
}
```
### Using presets
Add a class to any ancestor element:
```svelte
```
### Scoped overrides
Like colors, radius can be scoped to any subtree:
```svelte
Also sharp
```
## Fonts
foxui ships with [Geist](https://vercel.com/font) as the default font. You can change fonts two ways: apply a preset class, or define your own.
### Using presets
Add a class to any ancestor element to scope the font — same pattern as colors and radius:
```svelte
```
**Built-in presets:** `geist` (default), `system-font`, `serif-font`, `mono-font`
### Defining your own font class
Create a class that sets the font variables — works anywhere in the DOM tree:
```css
@import '@fontsource-variable/inter';
.inter {
--ui-font-sans: 'Inter Variable', sans-serif;
}
```
Then use it like any other class:
```svelte
Also Inter
```
### Changing globally
To change the default font for your entire app, override the variables on `:root` or add the class to ``:
```css
/* via CSS variable */
:root {
--ui-font-sans: 'My Custom Font', sans-serif;
}
```
```html
```
### The variables
- `--ui-font-sans` — Body text, UI elements (default: Geist)
- `--ui-font-mono` — Code blocks, monospace text (default: Geist Mono)
## Combining customizations
All customization layers compose together:
```svelte