Color

Accents ​

The accent color defines the dominant color in your theme and is applied to primary buttons, links, and other interactive components. To set it globally, pass the accent-color prop to the ThemeProvider:

<template>
  <ThemeProvider accent-color="indigo">
    <!-- your application -->
  </ThemeProvider>
</template>

Available colors ​

The color system is based on Radix Colors, and you can choose from a wide range of accent color palettes, including:

Color shades ​

Each accent color includes 12 shades, with both solid and transparent variants. For example, the indigo scale:

Grays ​

<template>
  <ThemeProvider gray-color="slate">
    <!-- your application -->
  </ThemeProvider>
</template>

Gray colors ​

Gray shades ​