Themes

Your homepage now includes 37 beautiful themes to choose from! All themes are collapsable in the Settings panel for easy browsing.

How to Change Themes

1. Click the ⚙️ Settings icon in the header
2. Click on "Themes" to expand the theme selector (closed by default)
3. Browse through all 52 built-in themes
4. Click any theme to apply it instantly
5. Your choice is saved automatically

Theme Categories

Default Themes (2)

• Default Light - Clean, modern light theme with blue accents
• Default Dark - Sleek dark theme with blue accents

Nord (2)

Inspired by the arctic, north-bluish color palette

• Nord Light - Cool, calm light theme
• Nord Dark - Deep blue-gray dark theme

Dracula (1)

The famous purple-based dark theme

• Dracula - Purple and pink dark theme with high contrast

Solarized (2)

Precision colors for machines and people

• Solarized Light - Warm, low-contrast light theme
• Solarized Dark - Deep teal-based dark theme

Monokai (1)

Classic dark theme from TextMate

• Monokai - Rich dark theme with vibrant colors

Gruvbox (2)

Retro groove color scheme

• Gruvbox Light - Warm, earthy light theme
• Gruvbox Dark - Warm dark theme with excellent contrast

Tokyo Night (2)

Dark theme based on the Tokyo cityscape at night

• Tokyo Night - Deep blue-purple dark theme
• Tokyo Night Storm - Slightly lighter variant

Catppuccin (4)

Soothing pastel themes in multiple variants

• Catppuccin Latte - Warm, cozy light theme
• Catppuccin Mocha - Dark, chocolatey theme
• Catppuccin Macchiato - Mid-dark variant
• Catppuccin Frappé - Cool dark variant

One Dark/Light (2)

Iconic themes from Atom editor

• One Dark - Popular dark theme with blue accents
• One Light - Clean light theme

Material (3)

Google's Material Design inspired

• Material Ocean - Deep ocean blue dark theme
• Material Palenight - Purple-tinted dark theme
• Material Lighter - Ultra-light variant

GitHub (2)

Official GitHub color schemes

• GitHub Light - GitHub's light mode colors
• GitHub Dark - GitHub's dark mode colors

Ayu (3)

Simple, elegant themes with great readability

• Ayu Light - Bright, high-contrast light theme
• Ayu Mirage - Balanced mid-dark theme
• Ayu Dark - Deep dark theme

Everforest (2)

Comfortable & pleasant forest-inspired themes

• Everforest Light - Soft, nature-inspired light theme
• Everforest Dark - Warm dark theme with green tones

Rosé Pine (3)

All natural pine, faux fur and a bit of soho vibes

• Rosé Pine - Deep purple-gray dark theme
• Rosé Pine Moon - Slightly lighter variant
• Rosé Pine Dawn - Soft, warm light theme

Other Popular Themes (7)

• Night Owl - Blue-based dark theme optimized for night coding
• Synthwave 84 - Retro neon cyberpunk theme
• Palenight - Purple-tinted dark theme
• Shades of Purple - Vibrant purple dark theme
• Horizon - Warm dark theme with orange and teal accents
• Moonlight - Blue-purple dark theme
• City Lights - Modern dark theme with cyan accents

Theme Preview

Each theme includes:

• Primary Color - Accent color for buttons, links, and highlights
• Background Colors - Three shades for depth and hierarchy
• Text Colors - Primary and secondary text colors for readability
• Border Colors - Subtle borders for visual separation

Color Swatches

In the settings panel, each theme shows 5 color swatches to give you a quick preview of the theme's palette.

Collapsable Design

The Themes section in Settings is:

• ✅ Collapsed by default - Keeps settings clean
• ✅ Shows theme count - See how many options you have
• ✅ Scrollable - List has max-height with scroll for easy browsing
• ✅ One-click expand - Click header to expand/collapse
• ✅ Smooth transitions - Polished animations

Other Collapsable Sections

All major settings sections are collapsable:

• Themes - Collapsed by default (52 built-in themes)
• Preferences - Expanded by default (Clock & Temperature settings)
• Widgets - Expanded by default (Widget visibility toggles)

Finding Your Perfect Theme

For Light Theme Lovers

Try: Default Light, Catppuccin Latte, GitHub Light, One Light, Gruvbox Light, Ayu Light, Material Lighter, Rosé Pine Dawn, Nord Light, Solarized Light, Everforest Light

For Dark Theme Lovers

Try: Tokyo Night, Dracula, Catppuccin Mocha, Nord Dark, One Dark, Gruvbox Dark, GitHub Dark, Ayu Dark, Everforest Dark, Rosé Pine, Night Owl

For Colorful Themes

Try: Dracula, Synthwave 84, Shades of Purple, Monokai, Catppuccin variants

For Minimal/Professional

Try: GitHub Light/Dark, Material variants, One Light/Dark, Default Light/Dark

For Warm Tones

Try: Gruvbox variants, Everforest variants, Rosé Pine Dawn, Solarized Light

For Cool Tones

Try: Nord variants, Ayu variants, Tokyo Night variants, Catppuccin variants

For High Contrast

Try: Dracula, Shades of Purple, Gruvbox Dark, One Dark

For Low Contrast

Try: Solarized variants, Rosé Pine variants, Everforest variants

Creating Custom Themes

Want to create your own theme? You can add themes directly to the database!

Via SQL

INSERT INTO themes (id, name, config, is_dark) VALUES (
  'my-theme',
  'My Custom Theme',
  '{
    "primary": "#your-color",
    "primaryHover": "#your-hover-color",
    "background": "#your-bg-color",
    "backgroundSecondary": "#your-secondary-bg",
    "backgroundTertiary": "#your-tertiary-bg",
    "textPrimary": "#your-text-color",
    "textSecondary": "#your-secondary-text",
    "border": "#your-border-color"
  }',
  1
);

Via API

curl -X POST http://localhost:3020/api/themes \
  -H "Content-Type: application/json" \
  -d '{
    "id": "my-theme",
    "name": "My Custom Theme",
    "config": {
      "primary": "#your-color",
      ...
    },
    "is_dark": true
  }'

Tips

1. Try them all! - Themes apply instantly, so browse freely
2. Match your mood - Switch themes based on time of day or preference
3. Consider your environment - Light themes for bright rooms, dark for dim
4. Check contrast - Ensure text is readable in your chosen theme
5. Seasonal themes - Warm tones for fall/winter, cool for spring/summer

Enjoy exploring your new themes! 🎨