7McpELEMENTSmcp-elements

Themes

mcp-elements is CSS-token based. Override the OKLCH variables to create any theme.

Active theme: Dark (default)

--site-bg
--site-accent
--site-text

CSS custom properties

Paste these into your CSS to customize all mcp-elements components.

/* Add to your CSS */
:root {
  --color-background: oklch(0.06 0.005 286);
  --color-foreground: oklch(0.95 0.005 286);
  --color-primary: oklch(0.637 0.174 265);
  --color-primary-foreground: oklch(0.98 0 0);
  --color-card: oklch(0.10 0.007 286);
  --color-card-foreground: oklch(0.95 0.005 286);
  --color-muted: oklch(0.14 0.006 286);
  --color-muted-foreground: oklch(0.55 0.012 286);
  --color-border: oklch(0.20 0.007 286);
  --color-accent: oklch(0.637 0.174 265);
  --color-accent-foreground: oklch(0.98 0 0);
  --color-destructive: oklch(0.62 0.22 25);
  --color-ring: oklch(0.637 0.174 265);
}