theme/color

18 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

accentColor prop on Theme component

Set the accent color using the accentColor prop on the Theme component. Example: <Theme accentColor="indigo"><MyApp /></Theme>. This specifies the most dominant color in the theme, used for primary buttons, links, and other interactive elements.

Accent color scale anatomy

Each accent color is a 12-step scale that includes a solid and a transparent variant of each color.

Accent color CSS variable tokens

Accent color tokens are accessed via CSS variables. Backgrounds: var(--accent-1), var(--accent-2). Interactive components: var(--accent-3), var(--accent-4), var(--accent-5). Borders and separators: var(--accent-6), var(--accent-7), var(--accent-8). Solid colors: var(--accent-9), var(--accent-10). Accessible text: var(--accent-11), var(--accent-12). Functional colors: var(--accent-surface), var(--accent-indicator), var(--accent-track), var(--accent-contrast).

grayColor prop on Theme component

Set the gray color using the grayColor prop on the Theme component. Example: <Theme grayColor="mauve"><MyApp /></Theme>. Your accent color will be automatically paired with a gray shade that complements it.

Gray color scale anatomy

Grays are based on a 12-step color scale that includes a solid and a transparent variant of each color.

Gray color CSS variable tokens

Gray color tokens are accessed via CSS variables. Backgrounds: var(--gray-1), var(--gray-2). Interactive components: var(--gray-3), var(--gray-4), var(--gray-5). Borders and separators: var(--gray-6), var(--gray-7), var(--gray-8). Solid colors: var(--gray-9), var(--gray-10). Accessible text: var(--gray-11), var(--gray-12). Functional colors: var(--gray-surface), var(--gray-indicator), var(--gray-track), var(--gray-contrast).

color prop overrides theme accent

When available, the color prop on components can be used to override the theme accent. Nested components will automatically inherit the new accent color.

Individual color CSS variable tokens

Individual colors can be accessed directly using CSS variables by their corresponding names, for example red colors are accessed via --red-1, --red-2, and so on up to --red-12.

highContrast prop usage

Most components with a color prop also provide a highContrast option that achieves an appearance that stands out against the page background.

Focus color automatic adjustment

Radix Themes automatically adjusts focus and selection colors depending on the accent color of the current component. Setting the color prop will intelligently change the focus and selection colors to avoid a mismatch of conflicting hues.

Focus color CSS variable tokens

Focus color tokens are accessed using CSS variables following the naming structure --focus-1, --focus-2, and so on up to --focus-12. Most components use --focus-8 for the focus outline color.

Alpha color variants

Every color has an alpha variant designed to appear visually the same when placed over the page background. All numerical color steps have a corresponding alpha variant, for example --red-1 has --red-a1, --red-2 has --red-a2, and so on up to --red-a12. Alpha colors are used automatically within Radix Themes components with no additional configuration required.

Background color CSS variable tokens

Background colors include: var(--color-background) for page background, var(--color-panel-solid) and var(--color-panel-translucent) for panel backgrounds such as cards, tables, popovers, and dropdown menus, var(--color-surface) for form component backgrounds such as text fields and checkboxes, and var(--color-overlay) for dialog overlays.

panelBackground prop on Theme component

The panelBackground prop controls whether panelled elements use a solid or translucent background color. Default is "translucent" which creates a subtle overlay effect. Example: <Theme panelBackground="translucent"><MyApp /></Theme> or <Theme panelBackground="solid"><MyApp /></Theme>.

Color customization via CSS variable override

Radix Themes colors can be customized by overriding the corresponding CSS variables of the token system. CSS overrides must be applied after the Radix Themes styles so that they take precedence.

Brand color customization

Replace a specific color with a brand color by remapping the corresponding token. Usually override step 9 of the scale being used as the theme accent. Example: override both --indigo-9 and --indigo-a9 to use a custom brand color.

Color aliasing for generic color names

Use color aliasing to remap Radix Themes tokens to reclaim color names. For example, remap --red-1 through --red-12 and --red-a1 through --red-a12 plus --red-surface, --red-indicator, --red-track, and --red-contrast to point to ruby color scales instead.

Individual CSS files for color bundle size reduction

Colors comprise around 20% of the total CSS size that Radix Themes ships with. Import individual CSS files for each color module to reduce bundle size. Import base tokens with @radix-ui/themes/tokens/base.css, individual colors like @radix-ui/themes/tokens/colors/ruby.css, and then the rest with @radix-ui/themes/components.css and @radix-ui/themes/utilities.css. Colors not imported will still be accepted by the color prop in React.

Give your agent this brain