Color Palette

All colors in snaps are specified as named palette colors, not hex values. The client maps each name to a hex value appropriate for its current light/dark mode. This ensures visual consistency across the feed and guarantees readability in both modes.

The Palette

Snaps have 8 colors to choose from:

The snap specifies a name (e.g. "blue"). The client resolves it to the correct hex for the current mode.

Where Palette Colors Are Used

page.theme.accent -- one of the 8 palette names. Default: "purple".

{
  "theme": { "accent": "blue" }
}

progress.color -- "accent" (uses theme accent) or any palette name.

{ "type": "progress", "value": 72, "max": 100, "color": "green" }

bar_chart.color -- default bar fill. "accent" or any palette name.

bar_chart.bars[].color -- per-bar color override. Any palette name.

{
  "type": "bar_chart",
  "bars": [
    { "label": "Yes", "value": 62, "color": "green" },
    { "label": "No", "value": 38, "color": "red" }
  ]
}

Accent Surfaces

The accent color is applied to:

• Primary button fill -- the main call-to-action button
• Progress bar fill -- unless overridden by the color property
• Slider active track and thumb -- the filled portion of the slider
• Button group selected option -- highlights the selected choice
• Toggle active state -- the toggle switch when enabled
• Interactive grid tap highlight -- feedback when tapping grid cells

Grid Cell Colors (Exception)

Grid cells are the only exception. Each cell can specify an arbitrary hex color via cells[].color. This is necessary for game boards, pixel art, and other visual applications where the color IS the content.

{
  "type": "grid",
  "cols": 5,
  "rows": 6,
  "cells": [
    { "row": 0, "col": 0, "color": "#22C55E", "content": "C" },
    { "row": 0, "col": 1, "color": "#6B7280", "content": "R" },
    { "row": 0, "col": 2, "color": "#CA8A04", "content": "A" }
  ]
}

What Snaps Cannot Specify

• Background colors on individual elements (except grid cells)
• Font colors or text colors
• Light/dark mode (determined by app settings)
• Any CSS custom properties or variables