Color

Understanding the color system.

Overview

The library’s components use the radix colors hunder the hood. A default color palettes is used without configuration but you can use any standard pre-built radix colors or create your own custom color via the radix color generator. You can also create color aliases to meet different needs (ex: semantic color system).

Color system

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.

Default color 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)

Usage

Nothing to do. The default color palettes are imported internally by the <ThemeRootProvider />.

Custom color palettes

Pre-built radix color palettes

To facilitate integration, all standard radix color are pre-built and exported as CSS file by the library. Each pre-built CSS files contains definition for the light and dark themes.

Custom radix color palettes

You can create custom color palette from the Radix color generator. And add the generated CSS into your application following the pre-built color CSS file structure.

Usage

1. Import CSS files

Import pre-built or custom color palettes you want to use.

src/routes/+layout.svelte

<script lang="ts">
    import 'svxui/styles/colors/crimson.css';
    import 'svxui/styles/colors/cyan.css';
    import '$lib/custom-color.css';
</script>

2. Configure color aliases

Declare color aliases on the ThemeRootProvider (for auto generate --accent-* CSS variables).

src/routes/+layout.svelte

<ThemeRootProvider customColorsAlias={{ 
    primary: 'crimson', 
    info: 'cyan', 
    danger: 'custom-color' 
}}>
    {@render children?.()}
<ThemeRootProvider>

3. Configure typescript

Override ColorMap type for typescript code completion.

src/app.d.ts

declare global {
    namespace Svxui {
        export interface ColorMap {
            primary: 'crimson';
            info: 'cyan';
            danger: 'custom-color';
        }
    }
}

4. Then use it like this

<script lang="ts">
    import { Input, Text, Button } from 'svxui'
</script>

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

Global Style

Accordion