Colors

Overview

The library’s components use Radix Colors under the hood. A default palette is included out of the box — no configuration needed. You can extend it with any pre-built Radix palette or generate a custom one, and create color aliases to build a semantic color system (e.g. primary, danger, info).

How it works

Like the @radix-ui/themes library, the components internally use a set of CSS variables prefixed with --accent-*. These CSS variables are overridden in components by using the data-color="..." attribute. If no color is defined on a component, the color defined on the parent wrapper component will be applied.

Built-in palettes

By default, the library includes the following color palettes:

• Neutral (custom radix color, default)
• Blue (radix blue)
• Green (radix grass)
• Yellow (radix amber)
• Orange (radix orange)
• Red (radix tomato)

Import theme.default.css to load the default palettes:

import 'svxui/styles/theme.default.css';

Additional Radix palettes

All standard Radix colors are pre-built and exported as CSS files by the library. Each file contains definitions for both light and dark themes.

import 'svxui/styles/colors/amber.css';
import 'svxui/styles/colors/crimson.css';
import 'svxui/styles/colors/cyan.css';

Custom palettes

You can define a fully custom color theme with semantic aliases (e.g. primary, danger, info) using the generator below.

1. Generate your theme

Configure your color aliases, then copy the two generated files into your project.

Step 2 Add the theme CSS

Copy the generated theme.css into your project and import it in your layout instead of svxui/styles/theme.default.css:

/* Import your theme */
@import './theme.css';
/* Import svxui files */
@import 'svxui/styles/tokens.css';
@import 'svxui/styles/normalize.css';
@import 'svxui/styles/utilities.css';

3. Add TypeScript types

Copy svxui-colors.d.ts into your src/ directory. Make sure it’s included in your tsconfig.json:

{
    "include": ["src/**/*"]
}

This augments the Svxui.ColorMap interface so the color prop on every component is typed to exactly the aliases you defined.

4. Use in components

<script>
    import { Input, Text, Button } from 'svxui'
</script>

<Input color="info" />
<Text color="danger">Error message</Text>
<Button color="primary">submit</Button>