Colors
Anywhere you can pass a color in a component prop, you can pass either:
The standard colors. Use those colors for consistency.
The colors automatically adapt to the Raycast theme (light or dark).
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="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>
);
}
Name | Dark Theme | Light Theme |
|---|---|---|
Blue |  |  |
Green |  |  |
Magenta |  |  |
Orange |  |  |
Purple |  |  |
Red |  |  |
Yellow |  |  |
PrimaryText |  |  |
SecondaryText |  |  |
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.
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>
);
}
A dynamic color applies different colors depending on the active Raycast theme.
import { 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>
);
}
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 |
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 3mo ago