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