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
Enumeration members
Name | Dark Theme | Light Theme |
---|---|---|
Blue | ||
Green | ||
Magenta | ||
Orange | ||
Purple | ||
Red | ||
Yellow | ||
PrimaryText | ||
SecondaryText |
Types
Color.ColorLike
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
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
Properties
Property | Description | Type |
---|---|---|
dark* | The color which is used in dark theme. |
|
light* | The color which is used in light theme. |
|
adjustContrast | Enables dynamic contrast adjustment for light and dark theme color. |
|
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 updated