Configuration
Preset
Theme
Messages
Input Bar
Preview
Sonnet4.6
Theme
theme.json
{
  "theme": {
    "--an-font-family": "system-ui, sans-serif",
    "--an-font-weight": "400",
    "--an-font-weight-medium": "500",
    "--an-font-weight-semibold": "600",
    "--an-text-size": "14px",
    "--an-text-size-sm": "13px",
    "--an-text-size-xs": "11px",
    "--an-line-height": "1.6",
    "--an-border-radius": "16px",
    "--an-message-border-radius": "16px",
    "--an-input-border-radius": "16px",
    "--an-input-inner-border-radius": "8px",
    "--an-send-button-border-radius": "9999px",
    "--an-stop-button-border-radius": "9999px",
    "--an-mode-selector-border-radius": "8px",
    "--an-tool-border-radius": "8px",
    "--an-code-border-radius": "8px",
    "--an-attachment-border-radius": "8px",
    "--an-message-gap": "8px",
    "--an-user-message-padding": "10px 14px",
    "--an-input-padding": "12px 16px",
    "--an-tool-padding": "8px 12px",
    "--an-code-padding": "16px",
    "--an-send-button-size": "32px",
    "--an-stop-button-size": "32px",
    "--an-scrollbar-width": "6px",
    "--an-input-font-size": "14px",
    "--an-date-divider-font-size": "11px",
    "--an-model-selector-font-size": "12px",
    "--an-tool-font-size": "13px",
    "--an-code-font-size": "13px",
    "--an-code-font-family": "ui-monospace, monospace",
    "--an-attachment-font-size": "12px",
    "--an-message-style": "bubble-right",
    "--an-message-density": "compact",
    "--an-input-style": "rounded",
    "--an-send-button-style": "circle-icon",
    "--an-stop-button-style": "circle-square",
    "--an-sticky-user-messages": "false",
    "--an-show-date-divider": "true",
    "--an-show-copy-button": "true",
    "--an-text-contrast": "normal",
    "--an-attach-button-right": "false",
    "--an-model-selector-left": "false",
    "--an-input-placeholder": "Do anything with AI...",
    "--an-attachment-button-style": "plus-circle",
    "--an-attachment-preview-style": "thumbnail",
    "--an-tool-call-style": "normal",
    "--an-thinking-display": "collapsed",
    "--an-code-action-display": "minimal",
    "--an-bash-display": "minimal",
    "--an-search-display": "rich-group",
    "--an-show-tool-icons": "true",
    "--an-user-message-font-weight": "400",
    "--an-assistant-message-opacity": "0.6",
    "--an-max-width": "420px",
    "--an-attachment-button-position": "left",
    "--an-model-selector-position": "input-bar",
    "--an-model-selector-side": "right",
    "--an-mode-selector-position": "popover"
  },
  "light": {
    "--an-background": "#ffffff",
    "--an-background-secondary": "#f5f5f5",
    "--an-background-tertiary": "#fafafa",
    "--an-foreground": "#1a1a1a",
    "--an-foreground-muted": "#737373",
    "--an-foreground-subtle": "#a3a3a3",
    "--an-border-color": "#e5e5e5",
    "--an-border-color-light": "#f0f0f0",
    "--an-divider-color": "#f0f0f0",
    "--an-message-shadow": "none",
    "--an-user-message-bg": "#f5f5f5",
    "--an-user-message-text": "#1a1a1a",
    "--an-date-divider-color": "#a3a3a3",
    "--an-date-divider-border-color": "#f0f0f0",
    "--an-input-background": "transparent",
    "--an-input-border-color": "#e5e5e5",
    "--an-input-color": "#1a1a1a",
    "--an-input-placeholder-color": "#a3a3a3",
    "--an-input-shadow": "0 1px 3px 0 rgba(0,0,0,0.04)",
    "--an-stop-button-color": "#ffffff",
    "--an-stop-button-bg": "#1a1a1a",
    "--an-mode-selector-background": "#f5f5f5",
    "--an-mode-selector-color": "#737373",
    "--an-mode-selector-active-color": "#1a1a1a",
    "--an-mode-selector-active-background": "#ffffff",
    "--an-model-selector-color": "#737373",
    "--an-model-selector-hover-color": "#1a1a1a",
    "--an-tool-background": "#fafafa",
    "--an-tool-border-color": "#e5e5e5",
    "--an-tool-color": "#1a1a1a",
    "--an-tool-color-muted": "#737373",
    "--an-tool-icon-color": "#737373",
    "--an-code-background": "#1e1e1e",
    "--an-attachment-background": "#f5f5f5",
    "--an-attachment-border-color": "#e5e5e5",
    "--an-attachment-hover-background": "#ebebeb",
    "--an-attachment-color": "#1a1a1a",
    "--an-attachment-color-muted": "#737373",
    "--an-scrollbar-color": "rgba(0,0,0,0.12)",
    "--an-scrollbar-hover-color": "rgba(0,0,0,0.2)",
    "--an-primary-color": "#3b82f6",
    "--an-primary-color-hover": "#3472d8",
    "--an-primary-color-active": "#2f68c5",
    "--an-focus-color": "#3b82f6",
    "--an-send-button-color": "#1a1a1a",
    "--an-send-button-bg": "#3b82f6",
    "--an-send-button-hover-color": "#1a1a1a",
    "--an-send-button-hover-bg": "#3472d8",
    "--an-send-button-active-bg": "#2f68c5",
    "--an-send-button-shadow": "none",
    "--an-input-focus-border-color": "#3b82f6",
    "--an-input-focus-shadow": "0 0 0 2px #3b82f61a",
    "--an-code-color": "#1e1e1e",
    "--an-diff-added-bg": "rgba(34, 197, 94, 0.1)",
    "--an-diff-added-border": "rgba(34, 197, 94, 0.5)",
    "--an-diff-added-text": "#15803d",
    "--an-diff-removed-bg": "rgba(239, 68, 68, 0.1)",
    "--an-diff-removed-border": "rgba(239, 68, 68, 0.5)",
    "--an-diff-removed-text": "#dc2626"
  },
  "dark": {
    "--an-background": "#09090b",
    "--an-background-secondary": "#18181b",
    "--an-background-tertiary": "#111113",
    "--an-foreground": "#fafafa",
    "--an-foreground-muted": "#a1a1aa",
    "--an-foreground-subtle": "#71717a",
    "--an-border-color": "#27272a",
    "--an-border-color-light": "#1c1c1e",
    "--an-divider-color": "#1c1c1e",
    "--an-message-shadow": "none",
    "--an-user-message-bg": "#18181b",
    "--an-user-message-text": "#ffffff",
    "--an-date-divider-color": "#71717a",
    "--an-date-divider-border-color": "#1c1c1e",
    "--an-input-background": "transparent",
    "--an-input-border-color": "#27272a",
    "--an-input-color": "#fafafa",
    "--an-input-placeholder-color": "#71717a",
    "--an-input-shadow": "0 1px 3px 0 rgba(0,0,0,0.4)",
    "--an-stop-button-color": "#09090b",
    "--an-stop-button-bg": "#fafafa",
    "--an-mode-selector-background": "#18181b",
    "--an-mode-selector-color": "#a1a1aa",
    "--an-mode-selector-active-color": "#fafafa",
    "--an-mode-selector-active-background": "#111113",
    "--an-model-selector-color": "#a1a1aa",
    "--an-model-selector-hover-color": "#fafafa",
    "--an-tool-background": "#111113",
    "--an-tool-border-color": "#27272a",
    "--an-tool-color": "#fafafa",
    "--an-tool-color-muted": "#a1a1aa",
    "--an-tool-icon-color": "#a1a1aa",
    "--an-code-background": "#18181b",
    "--an-attachment-background": "#18181b",
    "--an-attachment-border-color": "#27272a",
    "--an-attachment-hover-background": "#27272a",
    "--an-attachment-color": "#fafafa",
    "--an-attachment-color-muted": "#a1a1aa",
    "--an-scrollbar-color": "rgba(255,255,255,0.12)",
    "--an-scrollbar-hover-color": "rgba(255,255,255,0.2)",
    "--an-primary-color": "#3b82f6",
    "--an-primary-color-hover": "#3472d8",
    "--an-primary-color-active": "#2f68c5",
    "--an-focus-color": "#3b82f6",
    "--an-send-button-color": "#1a1a1a",
    "--an-send-button-bg": "#3b82f6",
    "--an-send-button-hover-color": "#1a1a1a",
    "--an-send-button-hover-bg": "#3472d8",
    "--an-send-button-active-bg": "#2f68c5",
    "--an-send-button-shadow": "none",
    "--an-input-focus-border-color": "#3b82f6",
    "--an-input-focus-shadow": "0 0 0 2px #3b82f61a",
    "--an-code-color": "#d4d4d4",
    "--an-diff-added-bg": "rgba(34, 197, 94, 0.15)",
    "--an-diff-added-border": "rgba(34, 197, 94, 0.4)",
    "--an-diff-added-text": "#4ade80",
    "--an-diff-removed-bg": "rgba(239, 68, 68, 0.15)",
    "--an-diff-removed-border": "rgba(239, 68, 68, 0.4)",
    "--an-diff-removed-text": "#f87171"
  }
}
Agents by 21stfounders@21st.dev
Theme Builder | 21st Agents SDK — 21st