Add more theme options and custom theme support

[koresent]

Feature description

Currently, Kanbased only supports two appearance options — Light and Dark. It would be great to have more built-in themes (for example, Solarized, Gruvbox, Catppuccin, etc.) and ideally, the ability for users to create or import their own themes.

A good example of how this could be implemented can be seen in Geekr:

• Live demo: https://geekr.vercel.app/settings/appearance
• Source: https://github.com/jarvis394/geekr/tree/master/src

This kind of flexible theme system allows users to fine-tune their workspace aesthetics and improves accessibility (e.g., softer contrast themes for eye comfort).

Possible workaround

Until this feature is officially added, it’s possible to use browser extensions like Stylus to apply custom CSS.

Here’s an example of a Gruvbox Dark theme userstyle:

/* ==UserStyle==
@name        Kanbased Gruvbox Dark
@namespace   t.me/koresent
@version     1.0.0
@description Gruvbox Dark theme for Kanbased
@author      Koresent
@license     GPL-3.0
==/UserStyle== */

@-moz-document domain("app.kanbased.com") {
  .dark {
    --color-scheme: dark;
    --background: #282828;
    --foreground: #ebdbb2;
    --muted: #3c3836;
    --muted-foreground: #a89984;
    --popover: #1d2021;
    --popover-foreground: #ebdbb2;
    --card: #1d2021;
    --card-foreground: #ebdbb2;
    --border: #504945;
    --input: #665c54;
    --primary: #b8bb26;
    --primary-foreground: #1d2021;
    --secondary: #458588;
    --secondary-foreground: #ebdbb2;
    --accent: #b8bb26;
    --accent-foreground: #fbf1c6;
    --destructive: #fb4934;
    --destructive-foreground: #1d2021;
    --ring: #b8bb26;
    --sidebar-background: var(--background);
    --sidebar-foreground: var(--foreground);
    --sidebar-primary: var(--primary);
    --sidebar-primary-foreground: var(--primary-foreground);
    --sidebar-accent: #3c3836;
    --sidebar-accent-foreground: var(--accent-foreground);
    --sidebar-border: var(--border);
    --sidebar-ring: var(--ring);
    --sidebar: var(--background);
  }
}