feat: themes (#285)

config/config.go

@@ -46,6 +46,7 @@ type Config struct {
 	Accounts      []Account     `json:"accounts"`
 	DisableImages bool          `json:"disable_images,omitempty"`
 	HideTips      bool          `json:"hide_tips,omitempty"`
+	Theme         string        `json:"theme,omitempty"`
 	MailingLists  []MailingList `json:"mailing_lists,omitempty"`
 }
 
@@ -190,6 +191,7 @@ func LoadConfig() (*Config, error) {
 		Accounts      []rawAccount  `json:"accounts"`
 		DisableImages bool          `json:"disable_images,omitempty"`
 		HideTips      bool          `json:"hide_tips,omitempty"`
+		Theme         string        `json:"theme,omitempty"`
 		MailingLists  []MailingList `json:"mailing_lists,omitempty"`
 	}
 
@@ -220,6 +222,7 @@ func LoadConfig() (*Config, error) {
 
 	config.DisableImages = raw.DisableImages
 	config.HideTips = raw.HideTips
+	config.Theme = raw.Theme
 	config.MailingLists = raw.MailingLists
 	for _, rawAcc := range raw.Accounts {
 		acc := Account{

docs/docs/Configuration.md

@@ -36,6 +36,7 @@ Configuration is stored in `~/.config/matcha/config.json`.
       "addresses": ["alice@example.com", "bob@example.com"]
     }
   ],
+  "theme": "Matcha",
   "disable_images": true,
   "hide_tips": true
 }
@@ -46,3 +47,4 @@ Configuration is stored in `~/.config/matcha/config.json`.
 - **Drafts**: `~/.config/matcha/drafts/`
 - **Email Cache**: `~/.config/matcha/cache.json`
 - **Contacts**: `~/.config/matcha/contacts.json`
+- **Custom Themes**: `~/.config/matcha/themes/*.json`

docs/docs/Features/Themes.md

@@ -0,0 +1,69 @@
+# Themes
+
+Matcha supports color themes to personalize the look of your terminal email client. Choose from built-in themes or create your own.
+
+## Changing the Theme
+
+Go to **Settings > Theme** to browse available themes. A live preview panel on the right shows how each theme looks as you navigate the list. Press `enter` to apply the selected theme.
+
+Your selection is saved to `config.json` and persists across sessions.
+
+![Theme Settings](../assets/theme_settings.png)
+
+## Built-in Themes
+
+| Theme | Description |
+|-------|-------------|
+| **Matcha** | The default green theme |
+| **Rose** | Soft pink and rose accents |
+| **Lavender** | Purple and violet tones |
+| **Ocean** | Cool blue palette |
+| **Peach** | Warm orange and peach tones |
+| **Catppuccin Mocha** | Based on the popular [Catppuccin](https://catppuccin.com/) color scheme |
+
+## Custom Themes
+
+You can create your own themes by adding JSON files to `~/.config/matcha/themes/`. Each `.json` file in that directory will appear in the theme picker.
+
+### Example Custom Theme
+
+Create a file like `~/.config/matcha/themes/dracula.json`:
+
+```json
+{
+  "name": "Dracula",
+  "accent": "#BD93F9",
+  "accent_dark": "#6272A4",
+  "accent_text": "#F8F8F2",
+  "secondary": "#6272A4",
+  "subtle_text": "#6272A4",
+  "muted_text": "#6272A4",
+  "dim_text": "#F8F8F2",
+  "danger": "#FF5555",
+  "warning": "#FFB86C",
+  "tip": "#F1FA8C",
+  "link": "#8BE9FD",
+  "directory": "#BD93F9",
+  "contrast": "#282A36"
+}
+```
+
+### Color Properties
+
+| Property | Used For |
+|----------|----------|
+| `accent` | Selected items, focused elements, primary highlights |
+| `accent_dark` | Borders, title backgrounds |
+| `accent_text` | Text on accent-colored backgrounds |
+| `secondary` | Help text, blurred/unfocused elements |
+| `subtle_text` | List headers, hints |
+| `muted_text` | Dates, timestamps |
+| `dim_text` | Sender names, secondary info |
+| `danger` | Delete confirmations, errors |
+| `warning` | Update notifications |
+| `tip` | Contextual tips |
+| `link` | Hyperlinks in email content |
+| `directory` | Directory names in the file picker |
+| `contrast` | Text on accent-colored backgrounds (e.g. active folder) |
+
+Colors can be specified as hex values (`#BD93F9`) or ANSI 256-color codes (`42`).

docs/docs/Features/UI.md

@@ -4,7 +4,7 @@ Matcha features a modern terminal interface built for efficiency and aesthetics.
 
 ## Key Features
 
-- **🎨 Beautiful TUI**: Clean, modern terminal interface built with Bubble Tea.
+- **🎨 Beautiful TUI**: Clean, modern, customizable terminal interface built with Bubble Tea.
 - **⌨️ Vim-like Keybindings**: Efficient keyboard navigation (`j/k`, `h/l`, etc.).
 - **📱 Responsive Design**: Adapts to your terminal window size.
 - **🎯 Focus Management**: Clear visual indication of focused elements.

main.go

@@ -23,6 +23,7 @@ import (
 	"github.com/floatpane/matcha/config"
 	"github.com/floatpane/matcha/fetcher"
 	"github.com/floatpane/matcha/sender"
+	"github.com/floatpane/matcha/theme"
 	"github.com/floatpane/matcha/tui"
 	"github.com/google/uuid"
 	"github.com/yuin/goldmark"
@@ -1975,6 +1976,11 @@ func main() {
 	}
 
 	cfg, err := config.LoadConfig()
+	if err == nil && cfg.Theme != "" {
+		theme.SetTheme(cfg.Theme)
+	}
+	tui.RebuildStyles()
+
 	var initialModel *mainModel
 	if err != nil {
 		initialModel = newInitialModel(nil)

screenshots/theme_settings.tape

@@ -0,0 +1,48 @@
+# Screenshot: Theme Settings
+# Shows the theme picker with Rose selected and a live preview
+
+Output screenshots/theme_settings.gif
+
+Set FontSize 14
+Set FontFamily "JetBrainsMono Nerd Font"
+Set Width 1400
+Set Height 800
+Set Theme "Catppuccin Mocha"
+Set Padding 20
+Set WindowBar Colorful
+Set WindowBarSize 40
+Set BorderRadius 10
+
+Hide
+Type "go run ."
+Enter
+Show
+
+Sleep 2s
+
+# Navigate to Settings (last item in menu)
+# Inbox -> Compose -> [Drafts if present] -> Settings
+Down
+Sleep 300ms
+Down
+Sleep 300ms
+Down
+Sleep 300ms
+Down
+Sleep 300ms
+Enter
+
+Sleep 1s
+
+# Navigate to Theme (2nd option in settings)
+Down
+Sleep 300ms
+Enter
+
+Sleep 1s
+
+# Navigate to Rose (2nd theme in list)
+Down
+Sleep 500ms
+
+Screenshot screenshots/theme_settings.png