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

1
import { Color, Icon, List } from "@raycast/api";
2
3
export default function Command() {
4
return (
5
<List>
6
<List.Item
7
title="Blue"
8
icon={{ source: Icon.Circle, tintColor: Color.Blue }}
9
/>
10
<List.Item
11
title="Green"
12
icon={{ source: Icon.Circle, tintColor: Color.Green }}
13
/>
14
<List.Item
15
title="Brown"
16
icon={{ source: Icon.Circle, tintColor: Color.Brown }}
17
/>
18
<List.Item
19
title="Magenta"
20
icon={{ source: Icon.Circle, tintColor: Color.Magenta }}
21
/>
22
<List.Item
23
title="Orange"
24
icon={{ source: Icon.Circle, tintColor: Color.Orange }}
25
/>
26
<List.Item
27
title="Purple"
28
icon={{ source: Icon.Circle, tintColor: Color.Purple }}
29
/>
30
<List.Item
31
title="Red"
32
icon={{ source: Icon.Circle, tintColor: Color.Red }}
33
/>
34
<List.Item
35
title="Yellow"
36
icon={{ source: Icon.Circle, tintColor: Color.Yellow }}
37
/>
38
<List.Item
39
title="PrimaryText"
40
icon={{ source: Icon.Circle, tintColor: Color.PrimaryText }}
41
/>
42
<List.Item
43
title="SecondaryText"
44
icon={{ source: Icon.Circle, tintColor: Color.SecondaryText }}
45
/>
46
</List>
47
);
48
}
Copied!

Enumeration members

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

Types

Color.ColorLike

1
ColorLike: Color | Color.Dynamic | Color.Raw;
Copied!
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

1
import { Color, Icon, List } from "@raycast/api";
2
3
export default function Command() {
4
return (
5
<List>
6
<List.Item
7
title="Built-in color"
8
icon={{ source: Icon.Circle, tintColor: Color.Red }}
9
/>
10
<List.Item
11
title="Raw color"
12
icon={{ source: Icon.Circle, tintColor: "#FF0000" }}
13
/>
14
<List.Item
15
title="Dynamic color"
16
icon={{
17
source: Icon.Circle,
18
tintColor: {
19
light: "#FF01FF",
20
dark: "#FFFF50",
21
adjustContrast: true,
22
},
23
}}
24
/>
25
</List>
26
);
27
}
Copied!

Color.Dynamic

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

Example

1
import { Color, Icon, List } from "@raycast/api";
2
3
export default function Command() {
4
return (
5
<List>
6
<List.Item
7
title="Dynamic Tint Color"
8
icon={{
9
source: Icon.Circle,
10
tintColor: {
11
light: "#FF01FF",
12
dark: "#FFFF50",
13
adjustContrast: true,
14
},
15
}}
16
/>
17
<List.Item
18
title="Dynamic Tint Color"
19
icon={{
20
source: Icon.Circle,
21
tintColor: { light: "#FF01FF", dark: "#FFFF50" },
22
}}
23
/>
24
</List>
25
);
26
}
Copied!

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 3d ago