Colors

Anywhere you can pass a color in a component prop, you can pass either:

• A standard Color

• A Dynamic Color

• A Raw Color

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