Omarchy Palette
libThe Omarchy theme list with accent colors, plus lookup and type-guard helpers.
bunx --bun shadcn@latest add yamz8/omarchy-shadcn-registry/omarchy-paletteSource
registry/lib/omarchy-palette.ts
export type OmarchyTheme = {
name: string
label: string
mode: "light" | "dark"
accent: string
selection: string
muted: string
background: string
darkBackground: string
darkerBackground: string
lighterBackground: string
foreground: string
darkForeground: string
lightForeground: string
brightForeground: string
red: string
yellow: string
orange?: string
green: string
cyan: string
blue: string
magenta: string
brown?: string
brightRed: string
brightYellow: string
brightGreen: string
brightCyan: string
brightBlue: string
brightMagenta: string
}
/** Stock Omarchy palettes, transcribed from each theme's colors.toml. */
export const OMARCHY_THEMES = [
{
name: "catppuccin",
label: "Catppuccin",
mode: "dark",
accent: "#89b4fa",
selection: "#45475a",
muted: "#585b70",
background: "#1e1e2e",
darkBackground: "#161622",
darkerBackground: "#101019",
lighterBackground: "#313244",
foreground: "#cdd6f4",
darkForeground: "#6c7086",
lightForeground: "#bac2de",
brightForeground: "#cdd6f4",
red: "#f38ba8",
yellow: "#f9e2af",
orange: "#f6b6ab",
green: "#a6e3a1",
cyan: "#94e2d5",
blue: "#89b4fa",
magenta: "#f5c2e7",
brown: "#7b5b55",
brightRed: "#f38ba8",
brightYellow: "#f9e2af",
brightGreen: "#a6e3a1",
brightCyan: "#94e2d5",
brightBlue: "#89b4fa",
brightMagenta: "#f5c2e7",
},
{
name: "catppuccin-latte",
label: "Catppuccin Latte",
mode: "light",
accent: "#1e66f5",
selection: "#ccd0da",
muted: "#acb0be",
background: "#eff1f5",
darkBackground: "#e3e4e8",
darkerBackground: "#d7d8dc",
lighterBackground: "#dce0e8",
foreground: "#4c4f69",
darkForeground: "#9ca0b0",
lightForeground: "#5c5f77",
brightForeground: "#4c4f69",
red: "#d20f39",
yellow: "#df8e1d",
orange: "#d84e2b",
green: "#40a02b",
cyan: "#179299",
blue: "#1e66f5",
magenta: "#ea76cb",
brown: "#6c2715",
brightRed: "#d20f39",
brightYellow: "#df8e1d",
brightGreen: "#40a02b",
brightCyan: "#179299",
brightBlue: "#1e66f5",
brightMagenta: "#ea76cb",
},
{
name: "ethereal",
label: "Ethereal",
mode: "dark",
accent: "#7d82d9",
selection: "#252e56",
muted: "#6d7db6",
background: "#060b1e",
darkBackground: "#040816",
darkerBackground: "#030610",
lighterBackground: "#131a3a",
foreground: "#ffcead",
darkForeground: "#6d7db6",
lightForeground: "#c9b8a6",
brightForeground: "#ffcead",
red: "#ed5b5a",
yellow: "#e9bb4f",
orange: "#eb8b54",
green: "#92a593",
cyan: "#a3bfd1",
blue: "#7d82d9",
magenta: "#c89dc1",
brown: "#75452a",
brightRed: "#faaaa9",
brightYellow: "#f7dc9c",
brightGreen: "#c4cfc4",
brightCyan: "#dfeaf0",
brightBlue: "#c2c4f0",
brightMagenta: "#ead7e7",
},
{
name: "everforest",
label: "Everforest",
mode: "dark",
accent: "#7fbbb3",
selection: "#3d484d",
muted: "#475258",
background: "#2d353b",
darkBackground: "#21272c",
darkerBackground: "#181d20",
lighterBackground: "#343f44",
foreground: "#d3c6aa",
darkForeground: "#4f585e",
lightForeground: "#9da9a0",
brightForeground: "#d3c6aa",
red: "#e67e80",
yellow: "#dbbc7f",
orange: "#e09d7f",
green: "#a7c080",
cyan: "#83c092",
blue: "#7fbbb3",
magenta: "#d699b6",
brown: "#704e3f",
brightRed: "#e67e80",
brightYellow: "#dbbc7f",
brightGreen: "#a7c080",
brightCyan: "#83c092",
brightBlue: "#7fbbb3",
brightMagenta: "#d699b6",
},
{
name: "flexoki-light",
label: "Flexoki Light",
mode: "light",
accent: "#205ea6",
selection: "#cecdc3",
muted: "#b7b5ac",
background: "#fffcf0",
darkBackground: "#f2efe4",
darkerBackground: "#e5e2d8",
lighterBackground: "#e6e4d9",
foreground: "#100f0f",
darkForeground: "#878580",
lightForeground: "#403e3c",
brightForeground: "#100f0f",
red: "#d14d41",
yellow: "#d0a215",
orange: "#d0772b",
green: "#879a39",
cyan: "#3aa99f",
blue: "#205ea6",
magenta: "#ce5d97",
brown: "#683b15",
brightRed: "#d14d41",
brightYellow: "#d0a215",
brightGreen: "#879a39",
brightCyan: "#3aa99f",
brightBlue: "#4385be",
brightMagenta: "#ce5d97",
},
{
name: "gruvbox",
label: "Gruvbox",
mode: "dark",
accent: "#7daea3",
selection: "#504945",
muted: "#665c54",
background: "#282828",
darkBackground: "#1e1e1e",
darkerBackground: "#161616",
lighterBackground: "#3c3836",
foreground: "#d4be98",
darkForeground: "#7c6f64",
lightForeground: "#bdae93",
brightForeground: "#d4be98",
red: "#ea6962",
yellow: "#d8a657",
orange: "#e1875c",
green: "#a9b665",
cyan: "#89b482",
blue: "#7daea3",
magenta: "#d3869b",
brown: "#70432e",
brightRed: "#ea6962",
brightYellow: "#d8a657",
brightGreen: "#a9b665",
brightCyan: "#89b482",
brightBlue: "#7daea3",
brightMagenta: "#d3869b",
},
{
name: "hackerman",
label: "Hackerman",
mode: "dark",
accent: "#82fb9c",
selection: "#1f253a",
muted: "#2d3450",
background: "#0b0c16",
darkBackground: "#080910",
darkerBackground: "#06060c",
lighterBackground: "#151828",
foreground: "#ddf7ff",
darkForeground: "#6a6e95",
lightForeground: "#b5c5db",
brightForeground: "#ddf7ff",
red: "#50f872",
yellow: "#50f7d4",
orange: "#50f7a3",
green: "#4fe88f",
cyan: "#7cf8f7",
blue: "#829dd4",
magenta: "#86a7df",
brown: "#287b51",
brightRed: "#85ff9d",
brightYellow: "#a4ffec",
brightGreen: "#9cf7c2",
brightCyan: "#d1fffe",
brightBlue: "#c4d2ed",
brightMagenta: "#cddbf4",
},
{
name: "kanagawa",
label: "Kanagawa",
mode: "dark",
accent: "#dcd7ba",
selection: "#363646",
muted: "#54546d",
background: "#1f1f28",
darkBackground: "#17171e",
darkerBackground: "#111116",
lighterBackground: "#223249",
foreground: "#dcd7ba",
darkForeground: "#727169",
lightForeground: "#c8c093",
brightForeground: "#dcd7ba",
red: "#c34043",
yellow: "#c0a36e",
orange: "#c17158",
green: "#76946a",
cyan: "#6a9589",
blue: "#7e9cd8",
magenta: "#957fb8",
brown: "#60382c",
brightRed: "#e82424",
brightYellow: "#e6c384",
brightGreen: "#98bb6c",
brightCyan: "#7aa89f",
brightBlue: "#7fb4ca",
brightMagenta: "#938aa9",
},
{
name: "last-horizon",
label: "Last Horizon",
mode: "dark",
accent: "#b59790",
selection: "#584e51",
muted: "#584e51",
background: "#0c0b0c",
darkBackground: "#090809",
darkerBackground: "#060606",
lighterBackground: "#0c0b0c",
foreground: "#fafcfb",
darkForeground: "#584e51",
lightForeground: "#cfd3cd",
brightForeground: "#e2dddc",
red: "#c38b7b",
yellow: "#6b5e73",
green: "#87a9b0",
cyan: "#a5a0b6",
blue: "#b59790",
magenta: "#c4d8e2",
brightRed: "#c38b7b",
brightYellow: "#6b5e73",
brightGreen: "#87a9b0",
brightCyan: "#a5a0b6",
brightBlue: "#b59790",
brightMagenta: "#c4d8e2",
},
{
name: "lumon",
label: "Lumon",
mode: "dark",
accent: "#8bc9eb",
selection: "#243d56",
muted: "#304860",
background: "#16242d",
darkBackground: "#101b21",
darkerBackground: "#0b1216",
lighterBackground: "#1b2d40",
foreground: "#d6e2ee",
darkForeground: "#4d86b0",
lightForeground: "#d6e2ee",
brightForeground: "#f2fcff",
red: "#4d86b0",
yellow: "#6fa4c9",
orange: "#8bc9eb",
green: "#5e95bc",
cyan: "#b4e4f6",
blue: "#6fb8e3",
magenta: "#8bc9eb",
brown: "#456475",
brightRed: "#73a6cb",
brightYellow: "#9dcae5",
brightGreen: "#86b7d8",
brightCyan: "#d1eef8",
brightBlue: "#f2fcff",
brightMagenta: "#b1d8ee",
},
{
name: "lupine",
label: "Lupine",
mode: "light",
accent: "#3264eb",
selection: "#d0d0d0",
muted: "#9e9e9e",
background: "#fafafa",
darkBackground: "#ececec",
darkerBackground: "#dedede",
lighterBackground: "#f5f5f5",
foreground: "#212121",
darkForeground: "#757575",
lightForeground: "#424242",
brightForeground: "#000000",
red: "#c900c4",
yellow: "#026fde",
orange: "#026fde",
green: "#4a2fd0",
cyan: "#0c67de",
blue: "#3264eb",
magenta: "#8a4ad7",
brown: "#013a6f",
brightRed: "#f930fb",
brightYellow: "#358fff",
brightGreen: "#9f85e0",
brightCyan: "#3986ff",
brightBlue: "#5482ff",
brightMagenta: "#b363ff",
},
{
name: "matte-black",
label: "Matte Black",
mode: "dark",
accent: "#e68e0d",
selection: "#2a2a2a",
muted: "#333333",
background: "#121212",
darkBackground: "#0d0d0d",
darkerBackground: "#090909",
lighterBackground: "#1e1e1e",
foreground: "#bebebe",
darkForeground: "#555555",
lightForeground: "#8a8a8d",
brightForeground: "#bebebe",
red: "#d35f5f",
yellow: "#b91c1c",
orange: "#c63d3d",
green: "#ffc107",
cyan: "#bebebe",
blue: "#e68e0d",
magenta: "#d35f5f",
brown: "#631e1e",
brightRed: "#b91c1c",
brightYellow: "#b90a0a",
brightGreen: "#ffc107",
brightCyan: "#eaeaea",
brightBlue: "#f59e0b",
brightMagenta: "#b91c1c",
},
{
name: "miasma",
label: "Miasma",
mode: "dark",
accent: "#78824b",
selection: "#383838",
muted: "#666666",
background: "#222222",
darkBackground: "#191919",
darkerBackground: "#121212",
lighterBackground: "#2c2c2c",
foreground: "#c2c2b0",
darkForeground: "#555555",
lightForeground: "#8a8a7e",
brightForeground: "#c2c2b0",
red: "#685742",
yellow: "#b36d43",
orange: "#8d6242",
green: "#5f875f",
cyan: "#c9a554",
blue: "#78824b",
magenta: "#bb7744",
brown: "#463121",
brightRed: "#685742",
brightYellow: "#b36d43",
brightGreen: "#5f875f",
brightCyan: "#c9a554",
brightBlue: "#78824b",
brightMagenta: "#bb7744",
},
{
name: "nord",
label: "Nord",
mode: "dark",
accent: "#81a1c1",
selection: "#434c5e",
muted: "#4c566a",
background: "#2e3440",
darkBackground: "#222730",
darkerBackground: "#191c23",
lighterBackground: "#3b4252",
foreground: "#d8dee9",
darkForeground: "#667080",
lightForeground: "#adb5c4",
brightForeground: "#d8dee9",
red: "#bf616a",
yellow: "#ebcb8b",
orange: "#d5967a",
green: "#a3be8c",
cyan: "#88c0d0",
blue: "#81a1c1",
magenta: "#b48ead",
brown: "#6a4b3d",
brightRed: "#bf616a",
brightYellow: "#ebcb8b",
brightGreen: "#a3be8c",
brightCyan: "#8fbcbb",
brightBlue: "#81a1c1",
brightMagenta: "#b48ead",
},
{
name: "osaka-jade",
label: "Osaka Jade",
mode: "dark",
accent: "#509475",
selection: "#32473b",
muted: "#53685b",
background: "#111c18",
darkBackground: "#0c1512",
darkerBackground: "#090f0d",
lighterBackground: "#23372b",
foreground: "#c1c497",
darkForeground: "#81b8a8",
lightForeground: "#d6d5bc",
brightForeground: "#f7e8b2",
red: "#ff5345",
yellow: "#459451",
orange: "#a2734b",
green: "#549e6a",
cyan: "#2dd5b7",
blue: "#509475",
magenta: "#d2689c",
brown: "#513925",
brightRed: "#db9f9c",
brightYellow: "#e5c736",
brightGreen: "#63b07a",
brightCyan: "#8cd3cb",
brightBlue: "#acd4cf",
brightMagenta: "#75bbb3",
},
{
name: "retro-82",
label: "Retro 82",
mode: "dark",
accent: "#faa968",
selection: "#134e5a",
muted: "#2a6b78",
background: "#05182e",
darkBackground: "#031222",
darkerBackground: "#020c17",
lighterBackground: "#0a2540",
foreground: "#f6dcac",
darkForeground: "#3f8f8a",
lightForeground: "#a7c9c6",
brightForeground: "#f6dcac",
red: "#f85525",
yellow: "#e97b3c",
orange: "#faa968",
green: "#028391",
cyan: "#8cbfb8",
blue: "#3f8f8a",
magenta: "#3f8f8a",
brown: "#743d1e",
brightRed: "#f85525",
brightYellow: "#e97b3c",
brightGreen: "#028391",
brightCyan: "#8cbfb8",
brightBlue: "#faa968",
brightMagenta: "#3f8f8a",
},
{
name: "ristretto",
label: "Ristretto",
mode: "dark",
accent: "#f38d70",
selection: "#403e41",
muted: "#72696a",
background: "#2c2525",
darkBackground: "#211b1b",
darkerBackground: "#181414",
lighterBackground: "#3d2f2a",
foreground: "#e6d9db",
darkForeground: "#72696a",
lightForeground: "#c3b7b8",
brightForeground: "#e6d9db",
red: "#fd6883",
yellow: "#f9cc6c",
orange: "#fb9a77",
green: "#adda78",
cyan: "#85dacc",
blue: "#f38d70",
magenta: "#a8a9eb",
brown: "#7d4d3b",
brightRed: "#ff8297",
brightYellow: "#fcd675",
brightGreen: "#c8e292",
brightCyan: "#9bf1e1",
brightBlue: "#f8a788",
brightMagenta: "#bebffd",
},
{
name: "rose-pine",
label: "Rose Pine",
mode: "light",
accent: "#56949f",
selection: "#dfdad9",
muted: "#cecacd",
background: "#faf4ed",
darkBackground: "#ede7e1",
darkerBackground: "#e1dbd5",
lighterBackground: "#f2e9e1",
foreground: "#575279",
darkForeground: "#9893a5",
lightForeground: "#6e6a86",
brightForeground: "#575279",
red: "#b4637a",
yellow: "#ea9d34",
orange: "#cf8057",
green: "#286983",
cyan: "#d7827e",
blue: "#56949f",
magenta: "#907aa9",
brown: "#67402b",
brightRed: "#b4637a",
brightYellow: "#ea9d34",
brightGreen: "#286983",
brightCyan: "#d7827e",
brightBlue: "#56949f",
brightMagenta: "#907aa9",
},
{
name: "solitude",
label: "Solitude",
mode: "dark",
accent: "#798186",
selection: "#343d41",
muted: "#4b4e55",
background: "#101315",
darkBackground: "#0c0e10",
darkerBackground: "#080a0b",
lighterBackground: "#101315",
foreground: "#cacccc",
darkForeground: "#4b4e55",
lightForeground: "#cbc2be",
brightForeground: "#a5aeb4",
red: "#565d60",
yellow: "#d9dbdc",
green: "#9fa5a9",
cyan: "#707070",
blue: "#798186",
magenta: "#aeaeae",
brightRed: "#de6145",
brightYellow: "#c9c2b4",
brightGreen: "#343d41",
brightCyan: "#707070",
brightBlue: "#5d6367",
brightMagenta: "#9a9a9a",
},
{
name: "tokyo-night",
label: "Tokyo Night",
mode: "dark",
accent: "#7aa2f7",
selection: "#292e42",
muted: "#414868",
background: "#1a1b26",
darkBackground: "#13141c",
darkerBackground: "#0e0e14",
lighterBackground: "#24283b",
foreground: "#a9b1d6",
darkForeground: "#565f89",
lightForeground: "#b4bee6",
brightForeground: "#c0caf5",
red: "#f7768e",
yellow: "#e0af68",
orange: "#eb927b",
green: "#9ece6a",
cyan: "#449dab",
blue: "#7aa2f7",
magenta: "#ad8ee6",
brown: "#75493d",
brightRed: "#ff7a93",
brightYellow: "#ff9e64",
brightGreen: "#b9f27c",
brightCyan: "#0db9d7",
brightBlue: "#7da6ff",
brightMagenta: "#bb9af7",
},
{
name: "vantablack",
label: "Vantablack",
mode: "dark",
accent: "#8d8d8d",
selection: "#1a1a1a",
muted: "#7a7a7a",
background: "#000000",
darkBackground: "#090909",
darkerBackground: "#070707",
lighterBackground: "#1a1a1a",
foreground: "#ffffff",
darkForeground: "#505050",
lightForeground: "#ececec",
brightForeground: "#ffffff",
red: "#a4a4a4",
yellow: "#cecece",
orange: "#b9b9b9",
green: "#b6b6b6",
cyan: "#b0b0b0",
blue: "#8d8d8d",
magenta: "#9b9b9b",
brown: "#5c5c5c",
brightRed: "#a4a4a4",
brightYellow: "#cecece",
brightGreen: "#b6b6b6",
brightCyan: "#b0b0b0",
brightBlue: "#8d8d8d",
brightMagenta: "#9b9b9b",
},
{
name: "white",
label: "White",
mode: "light",
accent: "#6e6e6e",
selection: "#c0c0c0",
muted: "#808080",
background: "#ffffff",
darkBackground: "#f5f5f5",
darkerBackground: "#e8e8e8",
lighterBackground: "#c0c0c0",
foreground: "#000000",
darkForeground: "#c0c0c0",
lightForeground: "#000000",
brightForeground: "#000000",
red: "#2a2a2a",
yellow: "#4a4a4a",
green: "#3a3a3a",
cyan: "#3e3e3e",
blue: "#1a1a1a",
magenta: "#2e2e2e",
brightRed: "#2a2a2a",
brightYellow: "#4a4a4a",
brightGreen: "#3a3a3a",
brightCyan: "#3e3e3e",
brightBlue: "#1a1a1a",
brightMagenta: "#2e2e2e",
},
] as const satisfies readonly OmarchyTheme[]
export type OmarchyThemeName = (typeof OMARCHY_THEMES)[number]["name"]
export const DEFAULT_OMARCHY_THEME: OmarchyThemeName = "tokyo-night"
export function getOmarchyTheme(name: string): OmarchyTheme | undefined {
return OMARCHY_THEMES.find((theme) => theme.name === name)
}
export function isOmarchyThemeName(name: string): name is OmarchyThemeName {
return OMARCHY_THEMES.some((theme) => theme.name === name)
}
function channelToLinear(channel: number) {
const value = channel / 255
return value <= 0.04045
? value / 12.92
: Math.pow((value + 0.055) / 1.055, 2.4)
}
function luminance(color: string) {
const value = color.replace("#", "")
const red = Number.parseInt(value.slice(0, 2), 16)
const green = Number.parseInt(value.slice(2, 4), 16)
const blue = Number.parseInt(value.slice(4, 6), 16)
return (
channelToLinear(red) * 0.2126 +
channelToLinear(green) * 0.7152 +
channelToLinear(blue) * 0.0722
)
}
export function getContrastRatio(first: string, second: string) {
const firstLuminance = luminance(first)
const secondLuminance = luminance(second)
const lighter = Math.max(firstLuminance, secondLuminance)
const darker = Math.min(firstLuminance, secondLuminance)
return (lighter + 0.05) / (darker + 0.05)
}
function getReadableForeground(theme: OmarchyTheme, background: string) {
const candidates = [
theme.foreground,
theme.background,
theme.brightForeground,
theme.darkerBackground,
"#000000",
"#ffffff",
]
return candidates.reduce((best, candidate) =>
getContrastRatio(background, candidate) > getContrastRatio(background, best)
? candidate
: best
)
}
function getAccessibleForeground(
theme: OmarchyTheme,
background: string,
candidates: readonly string[]
) {
return (
candidates.find(
(candidate) => getContrastRatio(background, candidate) >= 4.5
) ?? getReadableForeground(theme, background)
)
}
/** Maps an Omarchy palette onto shadcn's semantic CSS variable contract. */
export function getOmarchyCssVariables(theme: OmarchyTheme) {
return {
"--background": theme.background,
"--foreground": theme.foreground,
"--card": theme.lighterBackground,
"--card-foreground": theme.brightForeground,
"--popover": theme.lighterBackground,
"--popover-foreground": theme.brightForeground,
"--primary": theme.accent,
"--primary-foreground": getReadableForeground(theme, theme.accent),
"--secondary": theme.darkBackground,
"--secondary-foreground": getAccessibleForeground(
theme,
theme.darkBackground,
[theme.lightForeground, theme.foreground, theme.brightForeground]
),
"--muted": theme.darkBackground,
"--muted-foreground": getAccessibleForeground(theme, theme.darkBackground, [
theme.darkForeground,
theme.lightForeground,
theme.foreground,
theme.brightForeground,
]),
"--accent": theme.selection,
"--accent-foreground": getReadableForeground(theme, theme.selection),
"--destructive": theme.red,
"--border": theme.muted,
"--input": theme.muted,
"--ring": theme.accent,
"--chart-1": theme.blue,
"--chart-2": theme.green,
"--chart-3": theme.yellow,
"--chart-4": theme.magenta,
"--chart-5": theme.cyan,
"--sidebar": theme.darkBackground,
"--sidebar-foreground": theme.foreground,
"--sidebar-primary": theme.accent,
"--sidebar-primary-foreground": getReadableForeground(theme, theme.accent),
"--sidebar-accent": theme.selection,
"--sidebar-accent-foreground": getReadableForeground(
theme,
theme.selection
),
"--sidebar-border": theme.muted,
"--sidebar-ring": theme.accent,
"--omarchy-red": theme.red,
"--omarchy-yellow": theme.yellow,
"--omarchy-orange": theme.orange ?? theme.yellow,
"--omarchy-green": theme.green,
"--omarchy-cyan": theme.cyan,
"--omarchy-blue": theme.blue,
"--omarchy-magenta": theme.magenta,
"--omarchy-brown": theme.brown ?? theme.orange ?? theme.yellow,
"--omarchy-bright-red": theme.brightRed,
"--omarchy-bright-yellow": theme.brightYellow,
"--omarchy-bright-green": theme.brightGreen,
"--omarchy-bright-cyan": theme.brightCyan,
"--omarchy-bright-blue": theme.brightBlue,
"--omarchy-bright-magenta": theme.brightMagenta,
} as const
}