Vicinae

Colors

Semantic colors for tags, icons, tints, and backgrounds across the extension UI.

Color Enum

Use the built-in Color enum for consistent colors that adapt to the theme.

import { Color, List } from "@vicinae/api";

<List.Item
  title="Apple"
  accessories={[{ tag: { value: "fruit", color: Color.Red } }]}
/>
ValueUsage
Color.RedErrors, destructive
Color.OrangeWarnings
Color.YellowCaution
Color.GreenSuccess
Color.BlueInfo, links
Color.PurpleAccents
Color.MagentaAccents
Color.PrimaryTextPrimary text color
Color.SecondaryTextMuted text color

Raw Colors

Pass any CSS color string where a ColorLike is expected.

import { List } from "@vicinae/api";

<List.Item
  title="Custom"
  accessories={[{ tag: { value: "custom", color: "#ff6b6b" } }]}
/>

Dynamic Colors

Provide different colors for light and dark themes.

const dynamicColor = { light: "#000000", dark: "#ffffff" };