ColorPicker builder

Hue, saturation-brightness, optional opacity, and host-owned swatches.

A builder is RenderOnce. Construct and mount it in one expression.

The verified color-picker scene in studio-dark

use gpui_kit::controls::color_picker::ColorPicker;

Reviewed in color-picker.

Construct

new(ident: impl Into<Ident>, value: Hsla) -> Self

Options

Chain onto the value.

alpha(alpha: bool) -> Self
presets(colors: impl IntoIterator<Item = Hsla>) -> Self
recent(colors: impl IntoIterator<Item = Hsla>) -> Self
on_change(handler: impl Fn(Hsla, &mut Window, &mut App) + 'static) -> Self

Example · color-picker

fn color_picker(_window: &mut Window, cx: &mut App) -> AnyElement {
    let theme = cx.theme().clone();
    let current = theme.colors.info;
    stack(&theme)
        .child(caption(
            &theme,
            "the value is caller-owned; presets and recents are host lists",
        ))
        .child(
            ColorPicker::new("scene.color.picker", current)
                .alpha(true)
                .presets([
                    theme.colors.danger,
                    theme.colors.warning,
                    theme.colors.info,
                    theme.colors.success,
                    theme.colors.accent,
                ])
                .recent([theme.colors.accent, theme.colors.success])
                .on_change(|_, _, _| {}),
        )
        .child(caption(&theme, "a swatch reports the colour it was given"))
        .child(
            row(&theme)
                .items_start()
                .child(
                    div()
                        .column()
                        .items_center()
                        .gap_token(&theme, Space::Xs)
                        .child(ColorSwatch::new(
                            "scene.color.swatch.accent",
                            theme.colors.accent,
                        ))
                        .child(caption(&theme, "Default")),
                )
                .child(
                    div()
                        .column()
                        .items_center()
                        .gap_token(&theme, Space::Xs)
                        .child(
                            ColorSwatch::new("scene.color.swatch.selected", current)
                                .selected(true)
                                .on_click(|_, _, _| {}),
                        )
                        .child(caption(&theme, "Selected")),
                )
                .child(
                    div()
                        .column()
                        .items_center()
                        .gap_token(&theme, Space::Xs)
                        .child(
                            ColorSwatch::new("scene.color.swatch.disabled", theme.colors.danger)
                                .disabled(true),
                        )
                        .child(caption(&theme, "Disabled")),
                ),
        )
        .into_any_element()
}

Source: crates/gpui-kit/src/controls/color_picker.rs