Configuration
Preset
Theme
Messages
Input Bar
Preview
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