Theming

arclo uses CSS custom properties for all visual styling. Override a few variables to match your brand — no build step, no config files.

Quick Start

Import the styles and you're ready to go. The default theme is Noir (black accent).

tsx
import "@arc-lo/ui/styles.css";

Color Themes

arclo ships with 6 built-in color themes. Add a data-theme attribute to your HTML element to switch:

Y
You
What is a design token?
A
Assistant
A design token is a named value that captures a single design decision — like a color, spacing unit, or font size. Tokens make it easy to keep your UI consistent and rebrand in minutes.
Enter to send
High confidenceReady
css
/* Add to your CSS or HTML */
<html data-theme="violet">

/* Or override variables directly */
:root {
  --arclo-accent: #6C5CE7;
  --arclo-accent-hover: #5A4BD1;
  --arclo-accent-fg: #ffffff;
}

Custom Theme

You can create your own theme by overriding the CSS variables directly:

css
/* In your global CSS */
:root {
  --arclo-accent: #e63946;
  --arclo-accent-hover: #c1121f;
  --arclo-accent-fg: #ffffff;
  --arclo-surface: #fafafa;
  --arclo-border: #e0e0e0;
}

/* Or scope to a container */
.my-chat-widget {
  --arclo-accent: #264653;
  --arclo-accent-hover: #1d3a47;
  --arclo-accent-fg: #ffffff;
}

Dark Mode

arclo supports dark mode via both prefers-color-scheme media query and a .dark class on the root element. Color themes work independently of dark/light mode.

css
/* Automatic — follows system preference */
@media (prefers-color-scheme: dark) {
  :root {
    --arclo-surface: #0a0a0a;
    --arclo-border: #27272a;
  }
}

/* Manual — toggle via class */
.dark {
  --arclo-surface: #0a0a0a;
  --arclo-border: #27272a;
}

/* HTML usage */
<html class="dark" data-theme="violet">

Available Variables

CSS Custom Properties
VariableDefaultDescription
--arclo-accent#1a1a1aPrimary accent color used for buttons, active states, and highlights
--arclo-accent-hover#333333Hover state for the accent color
--arclo-accent-fg#ffffffForeground (text) color on accent backgrounds
--arclo-surface#ffffffBackground color for component surfaces (cards, chat, panels)
--arclo-border#e5e7ebBorder color for component outlines and dividers
--arclo-text#111827Primary text color inside components
--arclo-text-muted#6b7280Secondary/muted text color for labels and placeholders
--arclo-radius0.5remBorder radius for components