Theme

All components support theming through the built-in Theme system, the ActiveTheme trait provides access to the current theme colors:

use gpui_kit::component::{ActiveTheme as _};

// Access theme colors in your components
cx.theme().primary
cx.theme().background
cx.theme().foreground

So if you want use the colors from the current theme, you should keep your component or view have App context.

Gradient Backgrounds

Theme color values remain backward compatible with the existing string format:

{
  "colors": {
    "button.primary.background": "#4F46E5"
  }
}

Background tokens that opt in to gradient rendering can also use CSS-style two-stop linear gradients:

{
  "colors": {
    "button.primary.background": "linear-gradient(135deg, #4F46E5, #06B6D4)",
    "button.primary.hover.background": "linear-gradient(to right, red-500 25%, blue-600 75%)"
  }
}

Top-level theme fields, such as cx.theme().button_primary, remain solid Hsla values for compatibility. Code that needs the full resolved token can use cx.theme().tokens.button_primary; its .color field is the solid representative color, and its .background field contains the configured Background, including gradients.

Theme Registry

There have more than 20 built-in themes available in themes folder.

https://github.com/longbridge/gpui-kit/tree/main/themes

And we have a ThemeRegistry to help us to load themes.

Use the name of an entry in the themes array, such as Ayu Light, when looking up a theme from the registry.

use std::path::PathBuf;
use gpui_kit::{App, SharedString};
use gpui_kit::component::{Theme, ThemeRegistry};

pub fn init(cx: &mut App) {
    let theme_name = SharedString::from("Ayu Light");
    // Load and watch themes from ./themes directory
    if let Err(err) = ThemeRegistry::watch_dir(PathBuf::from("./themes"), cx, move |cx| {
        if let Some(theme) = ThemeRegistry::global(cx)
            .themes()
            .get(&theme_name)
            .cloned()
        {
            Theme::global_mut(cx).apply_config(&theme);
        }
    }) {
        tracing::error!("Failed to watch themes directory: {}", err);
    }
}