Yehowshua/ZIm
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

onboarding: Expand power of theme selector (#35421)

Browse source 
Closes #ISSUE

The behavior of the theme selector is documented above the function,
copied here for reference:
```rust
/// separates theme "mode" ("dark" | "light" | "system") into two separate states
/// - appearance = "dark" | "light"
/// - "system" true/false
/// when system selected:
///  - toggling between light and dark does not change theme.mode, just which variant will be changed
/// when system not selected:
///  - toggling between light and dark does change theme.mode
/// selecting a theme preview will always change theme.["light" | "dark"] to the selected theme,
///
/// this allows for selecting a dark and light theme option regardless of whether the mode is set to system or not
/// it does not support setting theme to a static value
```

Release Notes:

- N/A *or* Added/Fixed/Improved ...
This commit is contained in:
Ben Kunkle 2025-07-31 15:21:58 -05:00 • committed by GitHub
parent c6947ee4f0
commit c946b98ea1
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
7 changed files with 254 additions and 173 deletions
Download patch file Download diff file Expand all files Collapse all files

2
crates/onboarding/Cargo.toml
View file

@ -18,6 +18,8 @@ default = []
anyhow.workspace = true
client.workspace = true
command_palette_hooks.workspace = true
component.workspace = true
documented.workspace = true
db.workspace = true
editor.workspace = true
feature_flags.workspace = true

298
crates/onboarding/src/basics_page.rs
View file

@ -1,36 +1,228 @@
use std::sync::Arc;
use client::TelemetrySettings;
use fs::Fs;
use gpui::{App, IntoElement};
use gpui::{App, Entity, IntoElement, Window};
use settings::{BaseKeymap, Settings, update_settings_file};
use theme::{Appearance, SystemAppearance, ThemeMode, ThemeSettings};
use theme::{Appearance, ThemeMode, ThemeName, ThemeRegistry, ThemeSelection, ThemeSettings};
use ui::{
SwitchField, ThemePreviewTile, ToggleButtonGroup, ToggleButtonSimple, ToggleButtonWithIcon,
prelude::*,
ParentElement as _, StatefulInteractiveElement, SwitchField, ToggleButtonGroup,
ToggleButtonSimple, ToggleButtonWithIcon, prelude::*, rems_from_px,
};
use vim_mode_setting::VimModeSetting;
use crate::Onboarding;
use crate::theme_preview::ThemePreviewTile;
fn read_theme_selection(cx: &App) -> (ThemeMode, SharedString) {
let settings = ThemeSettings::get_global(cx);
(
settings
.theme_selection
/// separates theme "mode" ("dark" | "light" | "system") into two separate states
/// - appearance = "dark" | "light"
/// - "system" true/false
/// when system selected:
/// - toggling between light and dark does not change theme.mode, just which variant will be changed
/// when system not selected:
/// - toggling between light and dark does change theme.mode
/// selecting a theme preview will always change theme.["light" | "dark"] to the selected theme,
///
/// this allows for selecting a dark and light theme option regardless of whether the mode is set to system or not
/// it does not support setting theme to a static value
fn render_theme_section(window: &mut Window, cx: &mut App) -> impl IntoElement {
let theme_selection = ThemeSettings::get_global(cx).theme_selection.clone();
let system_appearance = theme::SystemAppearance::global(cx);
let appearance_state = window.use_state(cx, |_, _cx| {
theme_selection
.as_ref()
.and_then(|selection| selection.mode())
.unwrap_or_default(),
settings.active_theme.name.clone(),
)
}
fn write_theme_selection(theme_mode: ThemeMode, cx: &App) {
let fs = <dyn Fs>::global(cx);
update_settings_file::<ThemeSettings>(fs, cx, move |settings, _| {
settings.set_mode(theme_mode);
.and_then(|mode| match mode {
ThemeMode::System => None,
ThemeMode::Light => Some(Appearance::Light),
ThemeMode::Dark => Some(Appearance::Dark),
})
.unwrap_or(*system_appearance)
});
let appearance = *appearance_state.read(cx);
let theme_selection = theme_selection.unwrap_or_else(|| ThemeSelection::Dynamic {
mode: match *system_appearance {
Appearance::Light => ThemeMode::Light,
Appearance::Dark => ThemeMode::Dark,
},
light: ThemeName("One Light".into()),
dark: ThemeName("One Dark".into()),
});
let theme_registry = ThemeRegistry::global(cx);
let current_theme_name = theme_selection.theme(appearance);
let theme_mode = theme_selection.mode();
let selected_index = match appearance {
Appearance::Light => 0,
Appearance::Dark => 1,
};
let theme_seed = 0xBEEF as f32;
const LIGHT_THEMES: [&'static str; 3] = ["One Light", "Ayu Light", "Gruvbox Light"];
const DARK_THEMES: [&'static str; 3] = ["One Dark", "Ayu Dark", "Gruvbox Dark"];
let theme_names = match appearance {
Appearance::Light => LIGHT_THEMES,
Appearance::Dark => DARK_THEMES,
};
let themes = theme_names
.map(|theme_name| theme_registry.get(theme_name))
.map(Result::unwrap);
let theme_previews = themes.map(|theme| {
let is_selected = theme.name == current_theme_name;
let name = theme.name.clone();
let colors = cx.theme().colors();
v_flex()
.id(name.clone())
.on_click({
let theme_name = theme.name.clone();
move |_, _, cx| {
let fs = <dyn Fs>::global(cx);
let theme_name = theme_name.clone();
update_settings_file::<ThemeSettings>(fs, cx, move |settings, _| {
settings.set_theme(theme_name, appearance);
});
}
})
.flex_1()
.child(
div()
.border_2()
.border_color(colors.border_transparent)
.rounded(ThemePreviewTile::CORNER_RADIUS)
.hover(|mut style| {
if !is_selected {
style.border_color = Some(colors.element_hover);
}
style
})
.when(is_selected, |this| {
this.border_color(colors.border_selected)
})
.cursor_pointer()
.child(ThemePreviewTile::new(theme, theme_seed)),
)
.child(
h_flex()
.justify_center()
.items_baseline()
.child(Label::new(name).color(Color::Muted)),
)
});
return v_flex()
.child(
h_flex().justify_between().child(Label::new("Theme")).child(
h_flex()
.gap_2()
.child(
ToggleButtonGroup::single_row(
"theme-selector-onboarding-dark-light",
[
ToggleButtonSimple::new("Light", {
let appearance_state = appearance_state.clone();
move |_, _, cx| {
write_appearance_change(
&appearance_state,
Appearance::Light,
cx,
);
}
}),
ToggleButtonSimple::new("Dark", {
let appearance_state = appearance_state.clone();
move |_, _, cx| {
write_appearance_change(
&appearance_state,
Appearance::Dark,
cx,
);
}
}),
],
)
.selected_index(selected_index)
.style(ui::ToggleButtonGroupStyle::Outlined)
.button_width(rems_from_px(64.)),
)
.child(
ToggleButtonGroup::single_row(
"theme-selector-onboarding-system",
[ToggleButtonSimple::new("System", {
let theme = theme_selection.clone();
move |_, _, cx| {
toggle_system_theme_mode(theme.clone(), appearance, cx);
}
})],
)
.selected_index((theme_mode != Some(ThemeMode::System)) as usize)
.style(ui::ToggleButtonGroupStyle::Outlined)
.button_width(rems_from_px(64.)),
),
),
)
.child(h_flex().justify_between().children(theme_previews));
fn write_appearance_change(
appearance_state: &Entity<Appearance>,
new_appearance: Appearance,
cx: &mut App,
) {
appearance_state.update(cx, |appearance, _| {
*appearance = new_appearance;
});
let fs = <dyn Fs>::global(cx);
update_settings_file::<ThemeSettings>(fs, cx, move |settings, _| {
if settings.theme.as_ref().and_then(ThemeSelection::mode) == Some(ThemeMode::System) {
return;
}
let new_mode = match new_appearance {
Appearance::Light => ThemeMode::Light,
Appearance::Dark => ThemeMode::Dark,
};
settings.set_mode(new_mode);
});
}
fn toggle_system_theme_mode(
theme_selection: ThemeSelection,
appearance: Appearance,
cx: &mut App,
) {
let fs = <dyn Fs>::global(cx);
update_settings_file::<ThemeSettings>(fs, cx, move |settings, _| {
settings.theme = Some(match theme_selection {
ThemeSelection::Static(theme_name) => ThemeSelection::Dynamic {
mode: ThemeMode::System,
light: theme_name.clone(),
dark: theme_name.clone(),
},
ThemeSelection::Dynamic {
mode: ThemeMode::System,
light,
dark,
} => {
let mode = match appearance {
Appearance::Light => ThemeMode::Light,
Appearance::Dark => ThemeMode::Dark,
};
ThemeSelection::Dynamic { mode, light, dark }
}
ThemeSelection::Dynamic {
mode: _,
light,
dark,
} => ThemeSelection::Dynamic {
mode: ThemeMode::System,
light,
dark,
},
});
});
}
}
fn write_keymap_base(keymap_base: BaseKeymap, cx: &App) {
@ -41,35 +233,10 @@ fn write_keymap_base(keymap_base: BaseKeymap, cx: &App) {
});
}
fn render_theme_section(theme_mode: ThemeMode) -> impl IntoElement {
h_flex().justify_between().child(Label::new("Theme")).child(
ToggleButtonGroup::single_row(
"theme-selector-onboarding",
[
ToggleButtonSimple::new("Light", |_, _, cx| {
write_theme_selection(ThemeMode::Light, cx)
}),
ToggleButtonSimple::new("Dark", |_, _, cx| {
write_theme_selection(ThemeMode::Dark, cx)
}),
ToggleButtonSimple::new("System", |_, _, cx| {
write_theme_selection(ThemeMode::System, cx)
}),
],
)
.selected_index(match theme_mode {
ThemeMode::Light => 0,
ThemeMode::Dark => 1,
ThemeMode::System => 2,
})
.style(ui::ToggleButtonGroupStyle::Outlined)
.button_width(rems_from_px(64.)),
)
}
fn render_telemetry_section(cx: &App) -> impl IntoElement {
let fs = <dyn Fs>::global(cx);
fn render_telemetry_section(fs: Arc<dyn Fs>, cx: &App) -> impl IntoElement {
v_flex()
.gap_4()
.child(Label::new("Telemetry").size(LabelSize::Large))
.child(SwitchField::new(
@ -125,17 +292,7 @@ fn render_telemetry_section(fs: Arc<dyn Fs>, cx: &App) -> impl IntoElement {
))
}
pub(crate) fn render_basics_page(onboarding: &Onboarding, cx: &mut App) -> impl IntoElement {
let (theme_mode, active_theme_name) = read_theme_selection(cx);
let themes = match theme_mode {
ThemeMode::Dark => &onboarding.dark_themes,
ThemeMode::Light => &onboarding.light_themes,
ThemeMode::System => match SystemAppearance::global(cx).0 {
Appearance::Light => &onboarding.light_themes,
Appearance::Dark => &onboarding.dark_themes,
},
};
pub(crate) fn render_basics_page(window: &mut Window, cx: &mut App) -> impl IntoElement {
let base_keymap = match BaseKeymap::get_global(cx) {
BaseKeymap::VSCode => Some(0),
BaseKeymap::JetBrains => Some(1),
@ -148,22 +305,7 @@ pub(crate) fn render_basics_page(onboarding: &Onboarding, cx: &mut App) -> impl
v_flex()
.gap_6()
.child(render_theme_section(theme_mode))
.child(h_flex().children(
themes.iter().map(|theme| {
ThemePreviewTile::new(theme.clone(), active_theme_name == theme.name, 0.48)
.on_click({
let theme_name = theme.name.clone();
let fs = onboarding.fs.clone();
move |_, _, cx| {
let theme_name = theme_name.clone();
update_settings_file::<ThemeSettings>(fs.clone(), cx, move |settings, cx| {
settings.set_theme(theme_name.to_string(), SystemAppearance::global(cx).0);
});
}
})
})
))
.child(render_theme_section(window, cx))
.child(
v_flex().gap_2().child(Label::new("Base Keymap")).child(
ToggleButtonGroup::two_rows(
@ -206,7 +348,7 @@ pub(crate) fn render_basics_page(onboarding: &Onboarding, cx: &mut App) -> impl
ui::ToggleState::Unselected
},
{
let fs = onboarding.fs.clone();
let fs = <dyn Fs>::global(cx);
move |selection, _, cx| {
let enabled = match selection {
ToggleState::Selected => true,
@ -222,5 +364,5 @@ pub(crate) fn render_basics_page(onboarding: &Onboarding, cx: &mut App) -> impl
}
},
)))
.child(render_telemetry_section(onboarding.fs.clone(), cx))
.child(render_telemetry_section(cx))
}

37
crates/onboarding/src/onboarding.rs
View file

@ -13,8 +13,10 @@ use schemars::JsonSchema;
use serde::Deserialize;
use settings::{SettingsStore, VsCodeSettingsSource};
use std::sync::Arc;
use theme::{Theme, ThemeRegistry};
use ui::{Avatar, FluentBuilder, KeyBinding, Vector, VectorName, prelude::*, rems_from_px};
use ui::{
Avatar, FluentBuilder, Headline, KeyBinding, ParentElement as _, StatefulInteractiveElement,
Vector, VectorName, prelude::*, rems_from_px,
};
use workspace::{
AppState, Workspace, WorkspaceId,
dock::DockPosition,
@ -25,6 +27,7 @@ use workspace::{
mod basics_page;
mod editing_page;
mod theme_preview;
mod welcome;
pub struct OnBoardingFeatureFlag {}
@ -219,11 +222,8 @@ enum SelectedPage {
struct Onboarding {
workspace: WeakEntity<Workspace>,
light_themes: [Arc<Theme>; 3],
dark_themes: [Arc<Theme>; 3],
focus_handle: FocusHandle,
selected_page: SelectedPage,
fs: Arc<dyn Fs>,
user_store: Entity<UserStore>,
_settings_subscription: Subscription,
}
@ -234,36 +234,11 @@ impl Onboarding {
user_store: Entity<UserStore>,
cx: &mut App,
) -> Entity<Self> {
let theme_registry = ThemeRegistry::global(cx);
let one_dark = theme_registry
.get("One Dark")
.expect("Default themes are always present");
let ayu_dark = theme_registry
.get("Ayu Dark")
.expect("Default themes are always present");
let gruvbox_dark = theme_registry
.get("Gruvbox Dark")
.expect("Default themes are always present");
let one_light = theme_registry
.get("One Light")
.expect("Default themes are always present");
let ayu_light = theme_registry
.get("Ayu Light")
.expect("Default themes are always present");
let gruvbox_light = theme_registry
.get("Gruvbox Light")
.expect("Default themes are always present");
cx.new(|cx| Self {
workspace,
user_store,
focus_handle: cx.focus_handle(),
light_themes: [one_light, ayu_light, gruvbox_light],
dark_themes: [one_dark, ayu_dark, gruvbox_dark],
selected_page: SelectedPage::Basics,
fs: <dyn Fs>::global(cx),
_settings_subscription: cx.observe_global::<SettingsStore>(move |_, cx| cx.notify()),
})
}
@ -411,7 +386,7 @@ impl Onboarding {
fn render_page(&mut self, window: &mut Window, cx: &mut Context<Self>) -> AnyElement {
match self.selected_page {
SelectedPage::Basics => {
crate::basics_page::render_basics_page(&self, cx).into_any_element()
crate::basics_page::render_basics_page(window, cx).into_any_element()
}
SelectedPage::Editing => {
crate::editing_page::render_editing_page(window, cx).into_any_element()

256
crates/onboarding/src/theme_preview.rs Normal file
View file

@ -0,0 +1,256 @@
#![allow(unused, dead_code)]
use gpui::{Hsla, Length};
use std::sync::Arc;
use theme::{Theme, ThemeRegistry};
use ui::{
IntoElement, RenderOnce, component_prelude::Documented, prelude::*, utils::inner_corner_radius,
};
/// Shows a preview of a theme as an abstract illustration
/// of a thumbnail-sized editor.
#[derive(IntoElement, RegisterComponent, Documented)]
pub struct ThemePreviewTile {
theme: Arc<Theme>,
seed: f32,
}
impl ThemePreviewTile {
pub const CORNER_RADIUS: Pixels = px(8.0);
pub fn new(theme: Arc<Theme>, seed: f32) -> Self {
Self { theme, seed }
}
}
impl RenderOnce for ThemePreviewTile {
fn render(self, _window: &mut ui::Window, _cx: &mut ui::App) -> impl IntoElement {
let color = self.theme.colors();
let root_radius = Self::CORNER_RADIUS;
let root_border = px(2.0);
let root_padding = px(2.0);
let child_border = px(1.0);
let inner_radius =
inner_corner_radius(root_radius, root_border, root_padding, child_border);
let item_skeleton = |w: Length, h: Pixels, bg: Hsla| div().w(w).h(h).rounded_full().bg(bg);
let skeleton_height = px(4.);
let sidebar_seeded_width = |seed: f32, index: usize| {
let value = (seed * 1000.0 + index as f32 * 10.0).sin() * 0.5 + 0.5;
0.5 + value * 0.45
};
let sidebar_skeleton_items = 8;
let sidebar_skeleton = (0..sidebar_skeleton_items)
.map(|i| {
let width = sidebar_seeded_width(self.seed, i);
item_skeleton(
relative(width).into(),
skeleton_height,
color.text.alpha(0.45),
)
})
.collect::<Vec<_>>();
let sidebar = div()
.h_full()
.w(relative(0.25))
.border_r(px(1.))
.border_color(color.border_transparent)
.bg(color.panel_background)
.child(
div()
.p_2()
.flex()
.flex_col()
.size_full()
.gap(px(4.))
.children(sidebar_skeleton),
);
let pseudo_code_skeleton = |theme: Arc<Theme>, seed: f32| -> AnyElement {
let colors = theme.colors();
let syntax = theme.syntax();
let keyword_color = syntax.get("keyword").color;
let function_color = syntax.get("function").color;
let string_color = syntax.get("string").color;
let comment_color = syntax.get("comment").color;
let variable_color = syntax.get("variable").color;
let type_color = syntax.get("type").color;
let punctuation_color = syntax.get("punctuation").color;
let syntax_colors = [
keyword_color,
function_color,
string_color,
variable_color,
type_color,
punctuation_color,
comment_color,
];
let line_width = |line_idx: usize, block_idx: usize| -> f32 {
let val = (seed * 100.0 + line_idx as f32 * 20.0 + block_idx as f32 * 5.0).sin()
* 0.5
+ 0.5;
0.05 + val * 0.2
};
let indentation = |line_idx: usize| -> f32 {
let step = line_idx % 6;
if step < 3 {
step as f32 * 0.1
} else {
(5 - step) as f32 * 0.1
}
};
let pick_color = |line_idx: usize, block_idx: usize| -> Hsla {
let idx = ((seed * 10.0 + line_idx as f32 * 7.0 + block_idx as f32 * 3.0).sin()
* 3.5)
.abs() as usize
% syntax_colors.len();
syntax_colors[idx].unwrap_or(colors.text)
};
let line_count = 13;
let lines = (0..line_count)
.map(|line_idx| {
let block_count = (((seed * 30.0 + line_idx as f32 * 12.0).sin() * 0.5 + 0.5)
* 3.0)
.round() as usize
+ 2;
let indent = indentation(line_idx);
let blocks = (0..block_count)
.map(|block_idx| {
let width = line_width(line_idx, block_idx);
let color = pick_color(line_idx, block_idx);
item_skeleton(relative(width).into(), skeleton_height, color)
})
.collect::<Vec<_>>();
h_flex().gap(px(2.)).ml(relative(indent)).children(blocks)
})
.collect::<Vec<_>>();
v_flex()
.size_full()
.p_1()
.gap(px(6.))
.children(lines)
.into_any_element()
};
let pane = div()
.h_full()
.flex_grow()
.flex()
.flex_col()
// .child(
// div()
// .w_full()
// .border_color(color.border)
// .border_b(px(1.))
// .h(relative(0.1))
// .bg(color.tab_bar_background),
// )
.child(
div()
.size_full()
.overflow_hidden()
.bg(color.editor_background)
.p_2()
.child(pseudo_code_skeleton(self.theme.clone(), self.seed)),
);
let content = div().size_full().flex().child(sidebar).child(pane);
div()
.size_full()
.rounded(root_radius)
.p(root_padding)
.child(
div()
.size_full()
.rounded(inner_radius)
.border(child_border)
.border_color(color.border)
.bg(color.background)
.child(content),
)
}
}
impl Component for ThemePreviewTile {
fn description() -> Option<&'static str> {
Some(Self::DOCS)
}
fn preview(_window: &mut Window, cx: &mut App) -> Option<AnyElement> {
let theme_registry = ThemeRegistry::global(cx);
let one_dark = theme_registry.get("One Dark");
let one_light = theme_registry.get("One Light");
let gruvbox_dark = theme_registry.get("Gruvbox Dark");
let gruvbox_light = theme_registry.get("Gruvbox Light");
let themes_to_preview = vec![
one_dark.clone().ok(),
one_light.clone().ok(),
gruvbox_dark.clone().ok(),
gruvbox_light.clone().ok(),
]
.into_iter()
.flatten()
.collect::<Vec<_>>();
Some(
v_flex()
.gap_6()
.p_4()
.children({
if let Some(one_dark) = one_dark.ok() {
vec![example_group(vec![single_example(
"Default",
div()
.w(px(240.))
.h(px(180.))
.child(ThemePreviewTile::new(one_dark.clone(), 0.42))
.into_any_element(),
)])]
} else {
vec![]
}
})
.child(
example_group(vec![single_example(
"Default Themes",
h_flex()
.gap_4()
.children(
themes_to_preview
.iter()
.enumerate()
.map(|(_, theme)| {
div()
.w(px(200.))
.h(px(140.))
.child(ThemePreviewTile::new(theme.clone(), 0.42))
})
.collect::<Vec<_>>(),
)
.into_any_element(),
)])
.grow(),
)
.into_any_element(),
)
}
}