Ask or search…
K
Links

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="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
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 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.

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.
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.

Example

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>
);
}

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 9mo ago