[feat] Add support for custom color schemes / themes

[koresent]

Describe the problem

Currently, Kunkun only supports basic Light and Dark modes, likely following the system preference. While functional, it lacks the personalization options found in established alternatives like Raycast or Alfred. For many users, the ability to match their launcher's appearance with their overall system theme (ricing) or specifically needed high-contrast colors is crucial for a comfortable workflow.

Describe the solution you'd like

I would love to see support for custom color schemes.
Given that Kunkun uses Tailwind CSS, a good starting point (MVP) could be allowing users to override the base color variables via a configuration file (e.g., theme.json or within the main config).

Alternatives considered

Using standard Light/Dark modes, but they don't always fit specific aesthetic setups or accessibility needs.

Additional context

Since Kunkun is positioned as a modern, extensible alternative to Raycast, having theming support would be a significant competitive advantage and a highly requested feature by the community as the project grows.

Contributes

• I am willing to submit a PR to implement this feature

Searched

• I have searched for similar issues and found none

[koresent]

While waiting for official support, I've put together a Gruvbox Dark theme as a proof of concept.

For those building from source and wanting to use it immediately, you can replace the .dark block in apps/desktop/src/app.css with the following values:

.dark {
    --background: 0 0% 16%;
    --foreground: 43 59% 81%;
    --muted: 20 5% 22%;
    --muted-foreground: 35 17% 59%;
    --popover: 0 0% 16%;
    --popover-foreground: 43 59% 81%;
    --card: 0 0% 16%;
    --card-foreground: 43 59% 81%;
    --border: 22 7% 29%;
    --input: 20 5% 22%;
    --primary: 61 66% 44%;
    --primary-foreground: 0 0% 16%;
    --secondary: 22 7% 29%;
    --secondary-foreground: 43 59% 81%;
    --accent: 20 5% 22%;
    --accent-foreground: 43 59% 81%;
    --destructive: 6 96% 59%;
    --destructive-foreground: 0 0% 16%;
    --ring: 61 66% 44%;

    --sidebar-background: 20 3% 19%;
    --sidebar-foreground: 43 59% 81%;
    --sidebar-primary: 61 66% 44%;
    --sidebar-primary-foreground: 0 0% 16%;
    --sidebar-accent: 20 5% 22%;
    --sidebar-accent-foreground: 43 59% 81%;
    --sidebar-border: 22 7% 29%;
    --sidebar-ring: 61 66% 44%;
}

Screenshots:

[koresent]

I've ported a few more popular themes as well. Same process: replace the corresponding block in apps/desktop/src/app.css.

Gruvbox Light

:root {
    --background: 48.5 86.7% 88.2%;
    --foreground: 20 6% 23%;
    --muted: 45 29% 84%;
    --muted-foreground: 27.5 10.7% 43.9%;
    --popover: 48.5 86.7% 88.2%;
    --popover-foreground: 20 6% 23%;
    --card: 48.5 86.7% 88.2%;
    --card-foreground: 20 6% 23%;
    --border: 42 30% 73%;
    --input: 42 30% 73%;
    --primary: 20 6% 23%;
    --primary-foreground: 48.5 86.7% 88.2%;
    --secondary: 42 30% 73%;
    --secondary-foreground: 20 6% 23%;
    --accent: 42 30% 73%;
    --accent-foreground: 20 6% 23%;
    --destructive: 2.4 75.1% 45.7%;
    --destructive-foreground: 48.5 86.7% 88.2%;
    --ring: 27.5 10.7% 43.9%;
    --radius: 0.5rem;

    --sidebar-background: 48.5 86.7% 88.2%;
    --sidebar-foreground: 20 6% 23%;
    --sidebar-primary: 20 6% 23%;
    --sidebar-primary-foreground: 48.5 86.7% 88.2%;
    --sidebar-accent: 42 30% 73%;
    --sidebar-accent-foreground: 20 6% 23%;
    --sidebar-border: 42 30% 73%;
    --sidebar-ring: 27.5 10.7% 43.9%;
}

---

Solarized Dark

.dark {
    --background: 192 100% 11%;
    --foreground: 186 8% 55%;
    --muted: 192 81% 14%;
    --muted-foreground: 194 14% 40%;
    --popover: 192 100% 11%;
    --popover-foreground: 186 8% 55%;
    --card: 192 100% 11%;
    --card-foreground: 186 8% 55%;
    --border: 192 81% 14%;
    --input: 192 81% 14%;
    --primary: 205 69% 49%;
    --primary-foreground: 192 100% 11%;
    --secondary: 192 81% 14%;
    --secondary-foreground: 186 8% 55%;
    --accent: 192 81% 14%;
    --accent-foreground: 186 8% 55%;
    --destructive: 4 74% 53%;
    --destructive-foreground: 44 87% 94%;
    --ring: 205 69% 49%;

    --sidebar-background: 192 81% 14%;
    --sidebar-foreground: 186 8% 55%;
    --sidebar-primary: 205 69% 49%;
    --sidebar-primary-foreground: 192 100% 11%;
    --sidebar-accent: 194 14% 40%;
    --sidebar-accent-foreground: 44 87% 94%;
    --sidebar-border: 192 100% 11%;
    --sidebar-ring: 205 69% 49%;
}

---

Solarized Light

:root {
    --background: 44 87% 94%;
    --foreground: 196 13% 45%;
    --muted: 44 47% 88%;
    --muted-foreground: 180 7% 60%;
    --popover: 44 87% 94%;
    --popover-foreground: 196 13% 45%;
    --card: 44 87% 94%;
    --card-foreground: 196 13% 45%;
    --border: 44 47% 88%;
    --input: 44 47% 88%;
    --primary: 193 100% 11%;
    --primary-foreground: 44 87% 94%;
    --secondary: 44 47% 88%;
    --secondary-foreground: 193 100% 11%;
    --accent: 44 47% 88%;
    --accent-foreground: 193 100% 11%;
    --destructive: 359 67% 53%;
    --destructive-foreground: 44 87% 94%;
    --ring: 193 100% 11%;
    --radius: 0.5rem;

    --sidebar-background: 44 47% 88%;
    --sidebar-foreground: 196 13% 45%;
    --sidebar-primary: 193 100% 11%;
    --sidebar-primary-foreground: 44 87% 94%;
    --sidebar-accent: 44 87% 94%;
    --sidebar-accent-foreground: 193 100% 11%;
    --sidebar-border: 44 87% 94%;
    --sidebar-ring: 193 100% 11%;
}

---

Catppuccin 🌿 Mocha

.dark {
    --background: 240 21% 15%;
    --foreground: 226 64% 88%;
    --muted: 237 16% 23%;
    --muted-foreground: 228 17% 64%;
    --popover: 240 21% 15%;
    --popover-foreground: 226 64% 88%;
    --card: 240 21% 15%;
    --card-foreground: 226 64% 88%;
    --border: 234 13% 31%;
    --input: 237 16% 23%;
    --primary: 267 84% 81%;
    --primary-foreground: 240 21% 15%;
    --secondary: 234 13% 31%;
    --secondary-foreground: 226 64% 88%;
    --accent: 237 16% 23%;
    --accent-foreground: 226 64% 88%;
    --destructive: 343 81% 75%;
    --destructive-foreground: 240 21% 15%;
    --ring: 267 84% 81%;

    --sidebar-background: 240 21% 12%;
    --sidebar-foreground: 226 64% 88%;
    --sidebar-primary: 267 84% 81%;
    --sidebar-primary-foreground: 240 21% 15%;
    --sidebar-accent: 237 16% 23%;
    --sidebar-accent-foreground: 226 64% 88%;
    --sidebar-border: 234 13% 31%;
    --sidebar-ring: 267 84% 81%;
}

---

Catppuccin 🌻 Latte

:root {
    --background: 220 23% 95%;
    --foreground: 234 16% 35%;
    --muted: 220 22% 92%;
    --muted-foreground: 228 11% 65%;
    --popover: 220 23% 95%;
    --popover-foreground: 234 16% 35%;
    --card: 220 23% 95%;
    --card-foreground: 234 16% 35%;
    --border: 220 21% 89%;
    --input: 220 21% 89%;
    --primary: 220 91% 54%;
    --primary-foreground: 220 23% 95%;
    --secondary: 220 22% 92%;
    --secondary-foreground: 220 91% 54%;
    --accent: 220 22% 92%;
    --accent-foreground: 220 91% 54%;
    --destructive: 347 87% 44%;
    --destructive-foreground: 220 23% 95%;
    --ring: 220 91% 54%;
    --radius: 0.5rem;

    --sidebar-background: 220 23% 95%;
    --sidebar-foreground: 234 16% 35%;
    --sidebar-primary: 220 91% 54%;
    --sidebar-primary-foreground: 220 23% 95%;
    --sidebar-accent: 220 22% 92%;
    --sidebar-accent-foreground: 220 91% 54%;
    --sidebar-border: 220 21% 89%;
    --sidebar-ring: 220 91% 54%;
}