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);
    }
}