Skip to content

Customization & Theming

Jump to bottom
Ekrem EDALI edited this page May 20, 2026 · 1 revision

KoBar is built to look as good as it works. A floating sidebar should fit seamlessly into your desktop environment, which is why KoBar offers an extensive set of customization options.

🎨 Built-in Themes & Color Picker

KoBar ships with 11 built-in themes, carefully crafted to provide high contrast and aesthetic appeal.

Available Themes

Theme Vibe / Color
Ember (default) 🟠 Warm Amber
Ocean 🔵 Deep Blue
Sakura 🌸 Cherry Blossom
Emerald 🟢 Forest Green
Midnight 🔮 Deep Indigo
Amethyst 💜 Rich Purple
Crimson 🔴 Vibrant Red
Nord 🧊 Arctic Blue-Grey
Coffee ☕ Warm Brown
Lavender 💟 Pastel Purple
Custom 🎨 Your choice!

The Custom Theme Generator

Not satisfied with the built-in colors? KoBar features an advanced built-in Color Picker.

  1. Open KoBar settings and navigate to the Themes section.
  2. Select Custom.
  3. Use the HEX/RGB/HSL picker to select any color.
  4. KoBar's Tailwind CSS integration will automatically generate dynamic shades (lighter for hovers, darker for active states) and instantly apply your personalized theme across the entire application.

🪟 Design Modes (Solid vs. Glass)

You can further customize how KoBar renders against your desktop background using Design Modes.

  • Style 1 (Solid): A clean, opaque dark background (#1a1612). Best for maximizing contrast and readability, especially when using the Notes Panel or AI Hub.
  • Style 2 (Glass): A beautiful frosted glassmorphism effect. The sidebar background becomes partially transparent and blurs the windows beneath it.
    • Note for Windows: Uses CSS backdrop-filter.
    • Note for macOS: Uses native Electron vibrancy effects.

🌍 Internationalization (Languages)

KoBar speaks your language! The interface is fully translated into 10 different languages:

  • 🇺🇸 English
  • 🇹🇷 Turkish
  • 🇩🇪 German
  • 🇫🇷 French
  • 🇪🇸 Spanish
  • 🇷🇺 Russian
  • 🇯🇵 Japanese
  • 🇨🇳 Chinese
  • 🇸🇦 Arabic
  • 🇮🇳 Hindi

You can switch languages instantly from the Settings panel without needing to restart the application.

Next Step: Are you a developer interested in how KoBar works under the hood? Check out the Developer Guide & Architecture.

Clone this wiki locally