Support for TUI themes

- Includes some classic built-in themes
- Supports custom user-defined themes
- Supports hot-reloading of the custom themes for ease of customization
- Comes with a /theme command to change theme in the TUI, gets saved to global user config

Signed-off-by: krissetto <chrisjpetito@gmail.com>

Author: krissetto

.dockerignore

@@ -7,4 +7,5 @@
 !./**/*.css
 !./**/*.go
 !./**/*.txt
-!/pkg/config/default-agent.yaml
+!/pkg/config/default-agent.yaml
+!/pkg/tui/styles/themes/*.yaml

cmd/root/run.go

@@ -22,6 +22,7 @@ import (
 	"github.com/docker/cagent/pkg/session"
 	"github.com/docker/cagent/pkg/teamloader"
 	"github.com/docker/cagent/pkg/telemetry"
+	"github.com/docker/cagent/pkg/tui/styles"
 )
 
 type runExecFlags struct {
@@ -234,6 +235,11 @@ func (f *runExecFlags) runOrExec(ctx context.Context, out *cli.Printer, args []s
 	}
 	defer cleanup()
 
+	// Apply theme before TUI starts
+	if tui {
+		applyTheme()
+	}
+
 	if f.dryRun {
 		out.Println("Dry run mode enabled. Agent initialized but will not execute.")
 		return nil
@@ -440,3 +446,21 @@ func (f *runExecFlags) handleRunMode(ctx context.Context, rt runtime.Runtime, se
 
 	return runTUI(ctx, rt, sess, opts...)
 }
+
+// applyTheme applies the theme from user config, or the built-in default.
+func applyTheme() {
+	// Resolve theme from user config > built-in default
+	themeRef := styles.DefaultThemeRef
+	if userSettings := config.GetUserSettings(); userSettings.Theme != "" {
+		themeRef = userSettings.Theme
+	}
+
+	theme, err := styles.LoadTheme(themeRef)
+	if err != nil {
+		slog.Warn("Failed to load theme, using default", "theme", themeRef, "error", err)
+		theme = styles.DefaultTheme()
+	}
+
+	styles.ApplyTheme(theme)
+	slog.Debug("Applied theme", "theme_ref", themeRef, "theme_name", theme.Name)
+}

pkg/tui/commands/commands.go

@@ -186,6 +186,16 @@ func builtInSessionCommands() []Item {
 				return core.CmdHandler(messages.AttachFileMsg{FilePath: arg})
 			},
 		},
+		{
+			ID:           "settings.theme",
+			Label:        "Theme",
+			SlashCommand: "/theme",
+			Description:  "Change the color theme (saved globally)",
+			Category:     "Settings",
+			Execute: func(string) tea.Cmd {
+				return core.CmdHandler(messages.OpenThemePickerMsg{})
+			},
+		},
 	}
 
 	// Add speak command on supported platforms (macOS only)

pkg/tui/components/editor/editor.go

@@ -550,6 +550,9 @@ func (e *editor) Update(msg tea.Msg) (layout.Model, tea.Cmd) {
 		e.keyboardEnhancementsSupported = msg.Flags != 0
 		e.configureNewlineKeybinding()
 		return e, nil
+	case messages.ThemeChangedMsg:
+		e.textarea.SetStyles(styles.InputStyle)
+		return e, nil
 	case tea.WindowSizeMsg:
 		e.textarea.SetWidth(msg.Width - 2)
 		return e, nil

pkg/tui/components/markdown/fast_renderer.go

@@ -160,9 +160,27 @@ type cachedStyles struct {
 var (
 	globalStyles     *cachedStyles
 	globalStylesOnce sync.Once
+	globalStylesMu   sync.Mutex
 )
 
+// ResetStyles resets the cached markdown styles so they will be rebuilt on next use.
+// Call this when the theme changes to pick up new colors.
+func ResetStyles() {
+	globalStylesMu.Lock()
+	globalStyles = nil
+	globalStylesOnce = sync.Once{}
+	globalStylesMu.Unlock()
+
+	// Also clear chroma syntax highlighting cache
+	chromaStyleCacheMu.Lock()
+	chromaStyleCache = make(map[chroma.TokenType]ansiStyle)
+	chromaStyleCacheMu.Unlock()
+}
+
 func getGlobalStyles() *cachedStyles {
+	globalStylesMu.Lock()
+	defer globalStylesMu.Unlock()
+
 	globalStylesOnce.Do(func() {
 		mdStyle := styles.MarkdownStyle()
 
@@ -207,7 +225,7 @@ func getGlobalStyles() *cachedStyles {
 				buildAnsiStyle(headingLipStyles[5]),
 			},
 			ansiBlockquote:   buildAnsiStyle(blockquoteLipStyle),
-			ansiFootnote:     buildAnsiStyle(lipgloss.NewStyle().Foreground(lipgloss.Color("8")).Italic(true)),
+			ansiFootnote:     buildAnsiStyle(lipgloss.NewStyle().Foreground(styles.TextSecondary).Italic(true)),
 			styleTaskTicked:  mdStyle.Task.Ticked,
 			styleTaskUntick:  mdStyle.Task.Unticked,
 			listIndent:       int(mdStyle.List.LevelIndent),

pkg/tui/components/messages/messages.go

@@ -188,6 +188,19 @@ func (m *model) Update(msg tea.Msg) (layout.Model, tea.Cmd) {
 		m.invalidateAllItems()
 		return m, nil
 
+	case messages.ThemeChangedMsg:
+		// Theme changed - invalidate all render caches
+		m.invalidateAllItems()
+		editfile.InvalidateCaches()
+		for i, view := range m.views {
+			updatedView, cmd := view.Update(msg)
+			m.views[i] = updatedView
+			if cmd != nil {
+				cmds = append(cmds, cmd)
+			}
+		}
+		return m, tea.Batch(cmds...)
+
 	case reasoningblock.BlockMsg:
 		return m.forwardToReasoningBlock(msg.GetBlockID(), msg)
 

pkg/tui/components/reasoningblock/reasoningblock.go

@@ -17,6 +17,7 @@ import (
 	"github.com/docker/cagent/pkg/tui/components/markdown"
 	"github.com/docker/cagent/pkg/tui/components/tool"
 	"github.com/docker/cagent/pkg/tui/core/layout"
+	"github.com/docker/cagent/pkg/tui/messages"
 	"github.com/docker/cagent/pkg/tui/service"
 	"github.com/docker/cagent/pkg/tui/styles"
 	"github.com/docker/cagent/pkg/tui/types"
@@ -369,7 +370,11 @@ func (m *Model) Init() tea.Cmd {
 
 // Update handles messages.
 func (m *Model) Update(msg tea.Msg) (layout.Model, tea.Cmd) {
-	if _, ok := msg.(animation.TickMsg); ok {
+	switch msg.(type) {
+	case messages.ThemeChangedMsg:
+		// Theme changed - invalidate cached rendering
+		m.cache = nil
+	case animation.TickMsg:
 		// Compute fade levels based on elapsed time (tick-rate independent)
 		m.computeFadeProgressAt(nowFunc())
 		// Unregister if no more fading tools (uses fadeProgress computed above)

pkg/tui/components/sidebar/sidebar.go

@@ -459,6 +459,31 @@ func (m *model) Update(msg tea.Msg) (layout.Model, tea.Cmd) {
 			delete(m.ragIndexing, k)
 		}
 		return m, nil
+	case messages.ThemeChangedMsg:
+		// Theme changed - recreate spinners with new colors
+		// The spinner pre-renders frames with colors, so we need to recreate it
+		var cmds []tea.Cmd
+
+		// Recreate main spinner
+		wasActive := m.spinnerActive
+		if wasActive {
+			m.spinner.Stop()
+		}
+		m.spinner = spinner.New(spinner.ModeSpinnerOnly, styles.SpinnerDotsHighlightStyle)
+		if wasActive {
+			cmd := m.spinner.Init()
+			m.spinnerActive = true
+			cmds = append(cmds, cmd)
+		}
+
+		// Recreate all RAG indexing spinners
+		for _, state := range m.ragIndexing {
+			state.spinner.Stop()
+			state.spinner = spinner.New(spinner.ModeSpinnerOnly, styles.SpinnerDotsHighlightStyle)
+			cmds = append(cmds, state.spinner.Init())
+		}
+
+		return m, tea.Batch(cmds...)
 	default:
 		var cmds []tea.Cmd
 

pkg/tui/components/statusbar/statusbar.go

@@ -25,8 +25,7 @@ type StatusBar struct {
 // New creates a new StatusBar instance
 func New(help core.KeyMapHelp) StatusBar {
 	return StatusBar{
-		help:              help,
-		cachedVersionText: styles.MutedStyle.Render("cagent " + version.Version),
+		help: help,
 	}
 }
 
@@ -58,8 +57,21 @@ func (s *StatusBar) formatHelpString(bindings []key.Binding) string {
 	return strings.Join(helpParts, "  ")
 }
 
+// InvalidateCache clears all cached values.
+// Call this when the theme changes to pick up new colors.
+func (s *StatusBar) InvalidateCache() {
+	s.cachedHelpText = ""
+	s.cachedVersionText = ""
+	s.cachedBindingsLen = 0
+}
+
 // View renders the status bar
 func (s *StatusBar) View() string {
+	// Regenerate version text if empty
+	if s.cachedVersionText == "" {
+		s.cachedVersionText = styles.MutedStyle.Render("cagent " + version.Version)
+	}
+
 	var helpText string
 	if s.help != nil {
 		help := s.help.Help()

pkg/tui/components/tool/editfile/render.go

@@ -49,6 +49,16 @@ var (
 	lexerCacheMu sync.RWMutex
 )
 
+// InvalidateCaches clears all render caches.
+// Call this when the theme changes to pick up new colors.
+func InvalidateCaches() {
+	cacheMu.Lock()
+	for _, c := range cache {
+		c.renderCached = false
+	}
+	cacheMu.Unlock()
+}
+
 type chromaToken struct {
 	Text  string
 	Style lipgloss.Style