Skip to main content

​
Color Palette

SSH Portfolio uses the Catppuccin Mocha color palette, a soothing pastel theme designed for the morning cat. All colors are defined in ui/theme.go:

​
Core Colors

ui/theme.go
const (
    Base      = "#1e1e2e"  // Background base
    Mantle    = "#181825"  // Darker background
    Crust     = "#11111b"  // Darkest background
)

​
Text Colors

ui/theme.go
const (
    Text      = "#cdd6f4"  // Primary text
    Subtext1  = "#bac2de"  // Secondary text
    Subtext0  = "#a6adc8"  // Tertiary text
)

​
Accent Colors

ui/theme.go
const (
    Rosewater = "#f5e0dc"
    Flamingo  = "#f2cdcd"
    Pink      = "#f5c2e7"
    Mauve     = "#cba6f7"  // Used for headers, ASCII art
    Red       = "#f38ba8"
    Maroon    = "#eba0ac"
    Peach     = "#fab387"  // Used for projects
    Yellow    = "#f9e2af"
    Green     = "#a6e3a1"  // Used for skills
    Teal      = "#94e2d5"
    Sky       = "#89dceb"
    Sapphire  = "#74c7ec"  // Used for tech tags
    Blue      = "#89b4fa"  // Used for active tabs, titles
    Lavender  = "#b4befe"  // Used for URLs
)

​
Surface Colors

ui/theme.go
const (
    Surface0  = "#313244"  // Inactive tabs
    Surface1  = "#45475a"  // Borders, dividers
    Surface2  = "#585b70"
    Overlay0  = "#6c7086"  // Status bar text
    Overlay1  = "#7f849c"  // Unselected items
    Overlay2  = "#9399b2"
)

​
Where Colors Are Used

​
Tab Bar

The tab bar at the top of the UI uses different colors for active and inactive states:
ui/model.go
// Active tab
tab := r.NewStyle().
    Foreground(lipgloss.Color(Base)).      // Dark text
    Background(lipgloss.Color(Blue)).      // Blue background
    Bold(true).
    Padding(0, 2).
    Render(name)

// Inactive tab
tab := r.NewStyle().
    Foreground(lipgloss.Color(Subtext0)).  // Muted text
    Background(lipgloss.Color(Surface0)).  // Dark background
    Padding(0, 2).
    Render(name)

​
Home Page

The home page displays your ASCII art and introduction:
ui/home.go
// ASCII art styling
artStyle := r.NewStyle().
    Foreground(lipgloss.Color(Mauve)).     // Purple
    Bold(true).
    Align(lipgloss.Center)

// Title styling
titleStyle := r.NewStyle().
    Foreground(lipgloss.Color(Blue)).      // Blue
    Bold(true).
    Align(lipgloss.Center)

// Intro text styling
introStyle := r.NewStyle().
    Foreground(lipgloss.Color(Subtext0)).  // Muted gray
    Align(lipgloss.Center)

​
Skills Page

The skills page uses colors to differentiate categories and items:
ui/skills.go
// Selected category
line := r.NewStyle().
    Foreground(lipgloss.Color(Blue)).      // Blue for selection
    Bold(true).
    Render("  ▸ " + cat.Category)

// Category header
header := r.NewStyle().
    Foreground(lipgloss.Color(Mauve)).     // Purple for headers
    Bold(true)

// Skill items
nameStyle := r.NewStyle().
    Foreground(lipgloss.Color(Green))      // Green for skill names

// Skill level bars
filled := r.NewStyle().
    Foreground(lipgloss.Color(Blue)).      // Blue filled bars
    Render(strings.Repeat("█", item.Level*2))

empty := r.NewStyle().
    Foreground(lipgloss.Color(Surface1)).  // Gray empty bars
    Render(strings.Repeat("░", (5-item.Level)*2))

​
Projects Page

Projects use distinct colors for different elements:
ui/projects.go
// Selected project name
line := r.NewStyle().
    Foreground(lipgloss.Color(Peach)).     // Peach/orange
    Bold(true).
    Render("  ▸ " + proj.Name)

// Project description
desc := r.NewStyle().
    Foreground(lipgloss.Color(Text)).      // Primary text color
    Render(proj.Description)

// Tech stack
tech := r.NewStyle().
    Foreground(lipgloss.Color(Sapphire)).  // Light blue
    Render("  ⚡ " + strings.Join(proj.Tech, " · "))

// URLs
url := r.NewStyle().
    Foreground(lipgloss.Color(Lavender)).  // Lavender
    Underline(true).
    Render("  🔗 " + proj.URL)

​
Contact Page

The contact page uses a centered card layout:
ui/contact.go
// Labels
labelStyle := r.NewStyle().
    Foreground(lipgloss.Color(Mauve)).     // Purple labels
    Bold(true)

// Values
valueStyle := r.NewStyle().
    Foreground(lipgloss.Color(Text)).      // Primary text
    PaddingLeft(2)

// Header
headerStyle := r.NewStyle().
    Foreground(lipgloss.Color(Blue)).      // Blue header
    Bold(true)

​
Status Bar

The status bar at the bottom shows keyboard hints:
ui/model.go
return r.NewStyle().
    Foreground(lipgloss.Color(Overlay0)).  // Muted gray
    Background(lipgloss.Color(Mantle)).    // Dark background
    Width(m.width).
    Padding(0, 1).
    Render(hints)

​
Modifying the Theme

​
Changing Individual Colors

To change colors, edit the constants in ui/theme.go:
ui/theme.go
const (
    Blue = "#89b4fa"  // Change to your preferred hex color
    Mauve = "#cba6f7"
    // ... other colors
)

​
Using a Different Palette

Catppuccin offers four flavors. To switch to a different one, replace all color values:
  • Mocha (current): Dark theme with warm tones
  • Macchiato: Slightly lighter than Mocha
  • Frappé: Medium contrast
  • Latte: Light theme
Visit catppuccin.com/palette to get hex values for other flavors.

​
Creating a Custom Theme

  1. Replace color constants in ui/theme.go with your hex values
  2. Ensure sufficient contrast between:
    • Text colors and backgrounds (Text, Subtext0, Subtext1 vs Base, Surface0, Mantle)
    • Active vs inactive states (e.g., Blue vs Overlay1)
    • Borders and backgrounds (Surface1 vs Base)
  3. Test in your terminal to ensure colors render correctly
  4. Rebuild the application:
go build -o portfolio .

​
Tips

  • Keep accent colors distinct for different UI elements (skills vs projects vs links)
  • Maintain consistent use of colors across pages for better UX
  • Test your theme in different terminal emulators (some may not support true color)
  • Use lighter colors for text on dark backgrounds
  • Keep borders subtle with Surface1 or similar muted colors

Build docs developers (and LLMs) love

Get started for freeTalk to us