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 adjusted to achieve high contrast with the Raycast user interface. To disable color adjustment, you need to switch to using a Dynamic Color. However, we recommend leaving color adjustment on, unless your extension depends on exact color reproduction.
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.
When using a Dynamic Color, it will be adjusted to achieve high contrast with the Raycast user interface. To disable color adjustment, you can set the
adjustContrast property to false. However, we recommend leaving color adjustment on, unless your extension depends on exact color reproduction.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: false,
},
}}
/>
<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 4mo ago