# Skins Gonzo supports customizable color schemes (skins) to personalize your terminal UI experience.

Gonzo TUI using "dracula" theme skin

### Using Built-in Skins Gonzo includes 11+ pre-built themes in the [skins directory](https://github.com/control-theory/gonzo/tree/main/skins). #### Available Skins **Dark Themes 🌙** * `default` - Original Gonzo dark theme * `controltheory-dark` - ControlTheory branded dark theme * `dracula` - Purple-accented vampire theme * `gruvbox` - Retro groove colors * `monokai` - Warm high-contrast theme * `nord` - Arctic blue palette * `solarized-dark` - Precision colors for reduced eye strain **Light Themes ☀️** * `controltheory` - ControlTheory branded light theme * `github-light` - Clean GitHub-inspired light mode * `solarized-light` - Precision light colors * `vs-code-light` - Professional VS Code style * `spring` - Fresh nature-inspired colors #### Setup **Download skins:** ```bash # Create skins directory mkdir -p ~/.config/gonzo/skins # Download a specific skin curl -o ~/.config/gonzo/skins/dracula.yaml \ https://raw.githubusercontent.com/control-theory/gonzo/main/skins/dracula.yaml # Or clone repo and copy all skins git clone https://github.com/control-theory/gonzo.git cp gonzo/skins/*.yaml ~/.config/gonzo/skins/ ``` #### Usage **Command line:** ```bash # Use a skin gonzo --skin=dracula -f application.log # Short form gonzo -s nord ``` **Environment variable:** ```bash export GONZO_SKIN=github-light gonzo -f application.log ``` **Configuration file** (`~/.config/gonzo/config.yml`): ```yaml skin: solarized-dark ``` ### Creating Custom Skins Create a YAML file in `~/.config/gonzo/skins/` with this structure: #### Basic Structure ```yaml name: my-custom-skin description: My awesome custom skin author: Your Name colors: # UI Components primary: "#0066cc" # Main accent color secondary: "#00cc66" # Secondary accent background: "#ffffff" # Main background surface: "#f8f9fa" # Panel backgrounds border: "#dee2e6" # Section borders border_active: "#0066cc" # Active borders text: "#212529" # Primary text text_secondary: "#6c757d" # Muted text text_inverse: "#ffffff" # Text on colored backgrounds # Charts chart_title: "#0066cc" # Chart titles chart_bar: "#00cc66" # Bar chart bars chart_accent: "#ff6600" # Chart accents # Log Entries log_timestamp: "#6c757d" # Timestamps log_message: "#212529" # Message text log_background: "#ffffff" # Entry background log_selected: "#e3f2fd" # Selected entry # Severity Levels severity_trace: "#adb5bd" # TRACE severity_debug: "#6c757d" # DEBUG severity_info: "#0066cc" # INFO severity_warn: "#ff9500" # WARN/WARNING severity_error: "#dc3545" # ERROR severity_fatal: "#6f42c1" # FATAL/CRITICAL # Status Indicators success: "#00cc66" # Success states warning: "#ff9500" # Warnings error: "#dc3545" # Errors info: "#0066cc" # Info # Special Elements help: "#6c757d" # Help text highlight: "#fff3cd" # Search highlights disabled: "#adb5bd" # Disabled elements ``` #### Color Reference | Category | Color | Purpose | | ------------ | ---------------- | ------------------------------------ | | **UI** | `primary` | Main accent color, active highlights | | | `secondary` | Alternative highlights | | | `background` | Main dashboard background | | | `surface` | Modal/panel backgrounds | | | `border` | Default borders | | | `border_active` | Active section borders | | | `text` | Primary readable text | | | `text_secondary` | Timestamps, help text | | | `text_inverse` | Text on colored backgrounds | | **Charts** | `chart_title` | Chart section titles | | | `chart_bar` | Bar chart elements | | | `chart_accent` | Chart highlights | | **Logs** | `log_timestamp` | Log timestamps | | | `log_message` | Log message text | | | `log_background` | Log entry background | | | `log_selected` | Selected log highlight | | **Severity** | `severity_trace` | TRACE level | | | `severity_debug` | DEBUG level | | | `severity_info` | INFO level | | | `severity_warn` | WARN/WARNING level | | | `severity_error` | ERROR level | | | `severity_fatal` | FATAL/CRITICAL level | | **Status** | `success` | Success indicators | | | `warning` | Warning indicators | | | `error` | Error indicators | | | `info` | Information indicators | | **Special** | `help` | Help text | | | `highlight` | Search highlights | | | `disabled` | Disabled elements | #### Complete Examples **Light Theme:** ```yaml name: clean-light description: A clean light theme author: Me colors: primary: "#0066cc" secondary: "#00cc66" background: "#ffffff" surface: "#f8f9fa" border: "#dee2e6" border_active: "#0066cc" text: "#212529" text_secondary: "#6c757d" text_inverse: "#ffffff" chart_title: "#0066cc" chart_bar: "#00cc66" chart_accent: "#ff6600" log_timestamp: "#6c757d" log_message: "#212529" log_background: "#ffffff" log_selected: "#e3f2fd" severity_trace: "#adb5bd" severity_debug: "#6c757d" severity_info: "#0066cc" severity_warn: "#fd7e14" severity_error: "#dc3545" severity_fatal: "#6f42c1" success: "#00cc66" warning: "#fd7e14" error: "#dc3545" info: "#0066cc" help: "#6c757d" highlight: "#fff3cd" disabled: "#adb5bd" ``` **Dark Theme:** ```yaml name: sleek-dark description: A sleek dark theme author: Me colors: primary: "#66d9ef" secondary: "#a6e22e" background: "#272822" surface: "#3e3d32" border: "#75715e" border_active: "#66d9ef" text: "#f8f8f2" text_secondary: "#75715e" text_inverse: "#272822" chart_title: "#66d9ef" chart_bar: "#a6e22e" chart_accent: "#fd971f" log_timestamp: "#75715e" log_message: "#f8f8f2" log_background: "#272822" log_selected: "#49483e" severity_trace: "#75715e" severity_debug: "#ae81ff" severity_info: "#66d9ef" severity_warn: "#e6db74" severity_error: "#f92672" severity_fatal: "#ae81ff" success: "#a6e22e" warning: "#e6db74" error: "#f92672" info: "#66d9ef" help: "#75715e" highlight: "#49483e" disabled: "#75715e" ``` #### Using Your Custom Skin ```bash # Save as ~/.config/gonzo/skins/my-skin.yaml gonzo --skin=my-skin -f application.log ``` ### Design Guidelines **Light Themes:** * Use dark text (#212529) on light backgrounds (#ffffff) * Ensure contrast ratio ≥ 4.5:1 (WCAG AA) * Use muted colors for secondary elements * Prefer subtle grays over pure white **Dark Themes:** * Use light text (#f8f8f2) on dark backgrounds (#272822) * Avoid pure black; use dark grays * Use vibrant colors for accents * Ensure readability in low-light **Accessibility:** * Test with color blindness simulators * Maintain adequate contrast ratios * Don't rely solely on color to convey information ### Troubleshooting **Skin not loading:** ```bash # Check if skin exists ls ~/.config/gonzo/skins/ # Verify YAML syntax cat ~/.config/gonzo/skins/my-skin.yaml # Test with default gonzo --skin=default ``` **Missing colors:** All colors are optional. Unspecified colors use defaults. **Color formats:** Use hex colors (`#ff0000`, `#RGB`, `#RRGGBB`) ### Contributing Skins Share your skin with the community! Submit a pull request to the [Gonzo repository](https://github.com/control-theory/gonzo) with: * Your skin YAML file * Screenshots (optional but appreciated) * Description of the theme ### Additional Resources * **Skin Examples:** * **Issue Tracker:** --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.controltheory.com/controltheory-documentation/gonzo-docs/advanced-features/skins.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.