Theme & Styling

Snaps specify only an accent color. The client handles all other styling, including light/dark mode from app settings.

How Theming Works

The snap provides a single theme.accent color. The Farcaster client uses this accent to style interactive elements, then derives everything else -- backgrounds, text colors, borders, spacing -- from its own design system and the user's current light/dark mode preference.

{
  "version": "2.0",
  "theme": { "accent": "purple" },
  "ui": {
    "root": "page",
    "elements": {
      "page": { "type": "stack", "props": {}, "children": ["title"] },
      "title": { "type": "text", "props": { "content": "My Snap", "weight": "bold" } }
    }
  }
}

Theme Properties

Property	Required	Values
`theme`	No	Theme object. If omitted, defaults apply
`theme.accent`	No	Palette color name: `gray`, `blue`, `red`, `amber`, `green`, `teal`, `purple`, `pink`. Default: `"purple"`

Accent Color Palette

Color	Light	Dark
`gray`	`#6E6A86`	`#908CAA`
`blue`	`#286983`	`#9CCFD8`
`red`	`#B4637A`	`#EB6F92`
`amber`	`#EA9D34`	`#F6C177`
`green`	`#3E8F8F`	`#56D4A4`
`teal`	`#56949F`	`#3E8FB0`
`purple`	`#907AA9`	`#C4A7E7`
`pink`	`#D7827E`	`#EBBCBA`

Accent Surfaces

The accent color is used for:

Primary button fill
Progress bar fill (unless overridden by color)
Slider active track and thumb
Button group selected option highlight
Toggle active state fill
Interactive grid tap highlight

What Snaps Cannot Control

Snaps intentionally have no control over visual details. This keeps snaps consistent within the Farcaster feed and prevents visual clutter.

Snaps cannot specify:

Font family, font size, or font weight
Padding, margins, or spacing
Border radius, shadows, or decorative styling
Custom CSS or inline styles
Background colors on individual elements (except grid cells)
Element pixel dimensions
Light/dark mode

The client is responsible for all layout decisions — spacing between elements, card padding, font rendering, and responsive behavior — so snaps look native in every Farcaster client.