oak-gpui/crates/gpui_widgets/examples/themes.rs

//! A theme demo: toggle between Olive Dark and Olive Light at runtime. Every
//! widget that reads `cx.default_colors()` re-themes immediately.

use gpui::{
	App, Bounds, ClickEvent, Context, Entity, Render, Window, WindowBounds, WindowOptions,
	colors::DefaultColors, div, prelude::*, px, size,
};
use gpui_widgets::checkbox::{CheckBox, CheckBoxEvent, CheckState};
use gpui_widgets::slider::{Slider, SliderEvent, SliderModel};
use gpui_widgets::theme::{OakTheme, apply_theme};
use gpui_widgets::value::ValueKind;

struct Example {
	slider: Entity<Slider>,
	checkbox: Entity<CheckBox>,
	dark: bool,
}

impl Example {
	fn new(window: &mut Window, cx: &mut Context<Self>) -> Self {
		let slider = cx.new(|cx| {
			Slider::new(
				1,
				SliderModel::new(ValueKind::Float, 0.0, 1.0, 0.05, 0.5),
				window,
				cx,
			)
		});
		cx.subscribe(
			&slider,
			|_this: &mut Self, _s: Entity<Slider>, event: &SliderEvent, _cx| {
				println!("slider: {event:?}");
			},
		)
		.detach();

		let checkbox = cx.new(|cx| {
			CheckBox::new(2, CheckState::Checked, window, cx).with_label("Track enabled")
		});
		cx.subscribe(
			&checkbox,
			|_this: &mut Self, _c: Entity<CheckBox>, event: &CheckBoxEvent, _cx| {
				println!("checkbox: {event:?}");
			},
		)
		.detach();

		Self {
			slider,
			checkbox,
			dark: true,
		}
	}
}

impl Render for Example {
	fn render(&mut self, _window: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
		let colors = cx.default_colors().clone();
		let theme = if self.dark {
			OakTheme::olive_dark()
		} else {
			OakTheme::olive_light()
		};

		div()
			.size_full()
			.bg(theme.base)
			.flex()
			.flex_col()
			.gap_3()
			.p_6()
			.child(
				div()
					.text_color(colors.text)
					.child(format!("Current theme: {}", theme.name)),
			)
			.child(
				div()
					.flex()
					.items_center()
					.gap_2()
					.child(self.slider.clone()),
			)
			.child(self.checkbox.clone())
			.child(
				div()
					.id("theme-toggle")
					.px_3()
					.py_1()
					.rounded_md()
					.bg(colors.selected)
					.text_color(colors.selected_text)
					.cursor_pointer()
					.on_click(cx.listener(|this, _event: &ClickEvent, _window, cx| {
						this.dark = !this.dark;
						let theme = if this.dark {
							OakTheme::olive_dark()
						} else {
							OakTheme::olive_light()
						};
						apply_theme(cx, &theme);
						cx.notify();
					}))
					.child("Toggle theme"),
			)
	}
}

fn main() {
	gpui_platform::application().run(|cx: &mut App| {
		apply_theme(cx, &OakTheme::olive_dark());
		let bounds = Bounds::centered(None, size(px(480.0), px(320.0)), cx);
		cx.open_window(
			WindowOptions {
				window_bounds: Some(WindowBounds::Windowed(bounds)),
				..Default::default()
			},
			|window, cx| cx.new(|cx| Example::new(window, cx)),
		)
		.expect("Failed to open window");

		cx.activate(true);
		cx.on_window_closed(|cx, _| {
			if cx.windows().is_empty() {
				cx.quit();
			}
		})
		.detach();
	});
}