Colors
Anywhere you can pass a color in a component prop, you can pass either:

API Reference

Color

The standard colors. Use those colors for consistency.
The colors automatically adapt to the Raycast theme (light or dark).

Example

import { Color, Icon, List } from "@raycast/api";
export default function Command() {
return (
<List>
<List.Item
title="Blue"
icon={{ source: Icon.Circle, tintColor: Color.Blue }}
/>
<List.Item
title="Green"
icon={{ source: Icon.Circle, tintColor: Color.Green }}
/>
<List.Item
title="Brown"
icon={{ source: Icon.Circle, tintColor: Color.Brown }}
/>
<List.Item
title="Magenta"
icon={{ source: Icon.Circle, tintColor: Color.Magenta }}
/>
<List.Item
title="Orange"
icon={{ source: Icon.Circle, tintColor: Color.Orange }}
/>
<List.Item
title="Purple"
icon={{ source: Icon.Circle, tintColor: Color.Purple }}
/>
<List.Item
title="Red"
icon={{ source: Icon.Circle, tintColor: Color.Red }}
/>
<List.Item
title="Yellow"
icon={{ source: Icon.Circle, tintColor: Color.Yellow }}
/>
<List.Item
title="PrimaryText"
icon={{ source: Icon.Circle, tintColor: Color.PrimaryText }}
/>
<List.Item
title="SecondaryText"
icon={{ source: Icon.Circle, tintColor: Color.SecondaryText }}
/>
</List>
);
}

Enumeration members

Name
Dark Theme
Light Theme
Blue
Brown
Green
Magenta
Orange
Purple
Red
Yellow
PrimaryText
SecondaryText

Types

Color.ColorLike

ColorLike: Color | Color.Dynamic | Color.Raw;
Union type for the supported color types.
When using a Raw Color, it will be dynamically adjusted to achieve high contrast with the Raycast user interface.

Example

import { Color, Icon, List } from "@raycast/api";
export default function Command() {
return (
<List>
<List.Item
title="Built-in color"
icon={{ source: Icon.Circle, tintColor: Color.Red }}
/>
<List.Item
title="Raw color"
icon={{ source: Icon.Circle, tintColor: "#FF0000" }}
/>
<List.Item
title="Dynamic color"
icon={{
source: Icon.Circle,
tintColor: {
light: "#FF01FF",
dark: "#FFFF50",
adjustContrast: true,
},
}}
/>
</List>
);
}

Color.Dynamic

A dynamic color applies different colors depending on the active Raycast theme.

Example

import { Color, Icon, List } from "@raycast/api";
export default function Command() {
return (
<List>
<List.Item
title="Dynamic Tint Color"
icon={{
source: Icon.Circle,
tintColor: {
light: "#FF01FF",
dark: "#FFFF50",
adjustContrast: true,
},
}}
/>
<List.Item
title="Dynamic Tint Color"
icon={{
source: Icon.Circle,
tintColor: { light: "#FF01FF", dark: "#FFFF50" },
}}
/>
</List>
);
}

Properties

Property
Description
Type
dark*
The color which is used in dark theme.
string
light*
The color which is used in light theme.
string
adjustContrast
Enables dynamic contrast adjustment for light and dark theme color.
boolean

Color.Raw

A color can also be a simple string. You can use any of the following color formats:
  • HEX, e.g #FF0000
  • Short HEX, e.g. #F00
  • RGBA, e.g. rgb(255, 0, 0)
  • RGBA Percentage, e.g. rgb(255, 0, 0, 1.0)
  • HSL, e.g. hsla(200, 20%, 33%, 0.2)
  • Keywords, e.g. red
Last modified 4mo ago
Copy link
Edit on GitHub
On this page
API Reference
Color
Types
Color.ColorLike
Color.Dynamic
Color.Raw