feat: built-in theme presets (Dracula, Catppuccin, Nord, Solarized) #181

Closed
opened 2026-03-06 09:28:11 -08:00 by hikari · 0 comments
Owner

Overview

Inspired by ralph-tui's customisable colour themes, this adds built-in theme presets to Hikari Desktop. We already support fully custom colour themes, but there are no presets — users must manually enter every hex value. Adding popular community presets makes theming instant and delightful.

User Story

As a developer who uses a specific colour scheme across all my tools, I want to apply a matching preset to Hikari in one click, so my desktop setup feels cohesive.

Proposed Presets

Preset Description
Hikari Default (Dark) Our current default dark theme
Hikari Default (Light) Clean light variant
Dracula Purple-heavy dark theme from draculatheme.com
Catppuccin Mocha Soft dark theme, warm tones
Catppuccin Latte Soft light theme
Nord Arctic, blue-grey palette
Solarized Dark Classic Ethan Schoonover dark
Solarized Light Classic Ethan Schoonover light
Tokyo Night Dark purple/blue neon theme
Gruvbox Dark Retro warm dark theme

Implementation Details

Data Structure

Define presets as static ThemePreset objects mapping to the existing HikariConfig colour fields:

  • bg_primary
  • bg_secondary
  • bg_terminal
  • accent_primary
  • accent_secondary
  • text_primary
  • text_secondary
  • border_color

UI Changes

In the Config Sidebar (theme section):

  • Add a "Preset Themes" dropdown/grid above the manual colour pickers
  • Selecting a preset populates all the colour fields instantly
  • A "Custom" option allows free editing of individual colours (existing behaviour)
  • Live preview updates immediately as presets are browsed
  • Selected preset name displayed as the active theme

Keyboard Shortcut

Optionally: a quick theme switcher accessible via Ctrl+Shift+T cycling through presets.

Acceptance Criteria

  • At least 6 preset themes implemented with accurate colour values
  • Selecting a preset applies all colours instantly
  • Manual colour editing still works (shows as "Custom")
  • Presets are clearly labelled and browsable
  • Selected theme persists across app restarts
  • Tests written for theme preset data and application logic

This issue was created with help from Hikari~ 🌸

## Overview Inspired by [ralph-tui](https://github.com/subsy/ralph-tui)'s customisable colour themes, this adds **built-in theme presets** to Hikari Desktop. We already support fully custom colour themes, but there are no presets — users must manually enter every hex value. Adding popular community presets makes theming instant and delightful. ## User Story As a developer who uses a specific colour scheme across all my tools, I want to apply a matching preset to Hikari in one click, so my desktop setup feels cohesive. ## Proposed Presets | Preset | Description | |--------|-------------| | **Hikari Default (Dark)** | Our current default dark theme | | **Hikari Default (Light)** | Clean light variant | | **Dracula** | Purple-heavy dark theme from [draculatheme.com](https://draculatheme.com/) | | **Catppuccin Mocha** | Soft dark theme, warm tones | | **Catppuccin Latte** | Soft light theme | | **Nord** | Arctic, blue-grey palette | | **Solarized Dark** | Classic Ethan Schoonover dark | | **Solarized Light** | Classic Ethan Schoonover light | | **Tokyo Night** | Dark purple/blue neon theme | | **Gruvbox Dark** | Retro warm dark theme | ## Implementation Details ### Data Structure Define presets as static `ThemePreset` objects mapping to the existing `HikariConfig` colour fields: - `bg_primary` - `bg_secondary` - `bg_terminal` - `accent_primary` - `accent_secondary` - `text_primary` - `text_secondary` - `border_color` ### UI Changes In the **Config Sidebar** (theme section): - Add a **"Preset Themes"** dropdown/grid above the manual colour pickers - Selecting a preset populates all the colour fields instantly - A **"Custom"** option allows free editing of individual colours (existing behaviour) - Live preview updates immediately as presets are browsed - Selected preset name displayed as the active theme ### Keyboard Shortcut Optionally: a quick theme switcher accessible via `Ctrl+Shift+T` cycling through presets. ## Acceptance Criteria - [ ] At least 6 preset themes implemented with accurate colour values - [ ] Selecting a preset applies all colours instantly - [ ] Manual colour editing still works (shows as "Custom") - [ ] Presets are clearly labelled and browsable - [ ] Selected theme persists across app restarts - [ ] Tests written for theme preset data and application logic ✨ This issue was created with help from Hikari~ 🌸
naomi closed this issue 2026-03-07 03:08:34 -08:00
Sign in to join this conversation.
No Label
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: nhcarrigan/hikari-desktop#181