onboarding: Go back to not having system be separate (#35499)

Going back to having system be mutually exclusive with light/dark to
simplify the system. We instead just show both light and dark when
system is selected

Release Notes:

- N/A

---------

Co-authored-by: Danilo Leal <daniloleal09@gmail.com>
Co-authored-by: Anthony Eid <hello@anthonyeid.me>

crates/gpui/src/geometry.rs

@@ -3522,7 +3522,7 @@ impl Serialize for Length {
 /// # Returns
 ///
 /// A `DefiniteLength` representing the relative length as a fraction of the parent's size.
-pub fn relative(fraction: f32) -> DefiniteLength {
+pub const fn relative(fraction: f32) -> DefiniteLength {
     DefiniteLength::Fraction(fraction)
 }
 

crates/onboarding/src/basics_page.rs

@@ -1,42 +1,24 @@
+use std::sync::Arc;
+
 use client::TelemetrySettings;
 use fs::Fs;
-use gpui::{App, Entity, IntoElement, Window};
+use gpui::{App, IntoElement, Window};
 use settings::{BaseKeymap, Settings, update_settings_file};
-use theme::{Appearance, ThemeMode, ThemeName, ThemeRegistry, ThemeSelection, ThemeSettings};
+use theme::{
+    Appearance, SystemAppearance, ThemeMode, ThemeName, ThemeRegistry, ThemeSelection,
+    ThemeSettings,
+};
 use ui::{
     ParentElement as _, StatefulInteractiveElement, SwitchField, ToggleButtonGroup,
     ToggleButtonSimple, ToggleButtonWithIcon, prelude::*, rems_from_px,
 };
 use vim_mode_setting::VimModeSetting;
 
-use crate::theme_preview::ThemePreviewTile;
+use crate::theme_preview::{ThemePreviewStyle, ThemePreviewTile};
 
-/// separates theme "mode" ("dark" | "light" | "system") into two separate states
+fn render_theme_section(_window: &mut Window, cx: &mut App) -> impl IntoElement {
-/// - 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())
-            .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,
@@ -45,34 +27,84 @@ fn render_theme_section(window: &mut Window, cx: &mut App) -> impl IntoElement {
         light: ThemeName("One Light".into()),
         dark: ThemeName("One Dark".into()),
     });
+
+    let theme_mode = theme_selection
+        .mode()
+        .unwrap_or_else(|| match *system_appearance {
+            Appearance::Light => ThemeMode::Light,
+            Appearance::Dark => ThemeMode::Dark,
+        });
+
+    return v_flex()
+        .gap_2()
+        .child(
+            h_flex().justify_between().child(Label::new("Theme")).child(
+                ToggleButtonGroup::single_row(
+                    "theme-selector-onboarding-dark-light",
+                    [ThemeMode::Light, ThemeMode::Dark, ThemeMode::System].map(|mode| {
+                        const MODE_NAMES: [SharedString; 3] = [
+                            SharedString::new_static("Light"),
+                            SharedString::new_static("Dark"),
+                            SharedString::new_static("System"),
+                        ];
+                        ToggleButtonSimple::new(
+                            MODE_NAMES[mode as usize].clone(),
+                            move |_, _, cx| {
+                                write_mode_change(mode, cx);
+                            },
+                        )
+                    }),
+                )
+                .selected_index(theme_mode as usize)
+                .style(ui::ToggleButtonGroupStyle::Outlined)
+                .button_width(rems_from_px(64.)),
+            ),
+        )
+        .child(
+            h_flex()
+                .gap_4()
+                .justify_between()
+                .children(render_theme_previews(&theme_selection, cx)),
+        );
+
+    fn render_theme_previews(
+        theme_selection: &ThemeSelection,
+        cx: &mut App,
+    ) -> [impl IntoElement; 3] {
+        let system_appearance = SystemAppearance::global(cx);
         let theme_registry = ThemeRegistry::global(cx);
 
-    let current_theme_name = theme_selection.theme(appearance);
-    let theme_mode = theme_selection.mode().unwrap_or_default();
-
-    // let theme_mode = theme_selection.mode();
-    // TODO: Clean this up once the "System" button inside the
-    // toggle button group is done
-
-    let selected_index = match appearance {
-        Appearance::Light => 0,
-        Appearance::Dark => 1,
-    };
-
         let theme_seed = 0xBEEF as f32;
+        let theme_mode = theme_selection
+            .mode()
+            .unwrap_or_else(|| match *system_appearance {
+                Appearance::Light => ThemeMode::Light,
+                Appearance::Dark => ThemeMode::Dark,
+            });
+        let appearance = match theme_mode {
+            ThemeMode::Light => Appearance::Light,
+            ThemeMode::Dark => Appearance::Dark,
+            ThemeMode::System => *system_appearance,
+        };
+        let current_theme_name = theme_selection.theme(appearance);
 
         const LIGHT_THEMES: [&'static str; 3] = ["One Light", "Ayu Light", "Gruvbox Light"];
         const DARK_THEMES: [&'static str; 3] = ["One Dark", "Ayu Dark", "Gruvbox Dark"];
+        const FAMILY_NAMES: [SharedString; 3] = [
+            SharedString::new_static("One"),
+            SharedString::new_static("Ayu"),
+            SharedString::new_static("Gruvbox"),
+        ];
 
         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 themes = theme_names.map(|theme| theme_registry.get(theme).unwrap());
+
+        let theme_previews = [0, 1, 2].map(|index| {
+            let theme = &themes[index];
             let is_selected = theme.name == current_theme_name;
             let name = theme.name.clone();
             let colors = cx.theme().colors();
@@ -83,11 +115,12 @@ fn render_theme_section(window: &mut Window, cx: &mut App) -> impl IntoElement {
                 .items_center()
                 .gap_1()
                 .child(
-                div()
+                    h_flex()
+                        .relative()
                         .w_full()
                         .border_2()
                         .border_color(colors.border_transparent)
-                    .rounded(ThemePreviewTile::CORNER_RADIUS)
+                        .rounded(ThemePreviewTile::ROOT_RADIUS)
                         .map(|this| {
                             if is_selected {
                                 this.border_color(colors.border_selected)
@@ -95,114 +128,61 @@ fn render_theme_section(window: &mut Window, cx: &mut App) -> impl IntoElement {
                                 this.opacity(0.8).hover(|s| s.border_color(colors.border))
                             }
                         })
-                    .child(ThemePreviewTile::new(theme.clone(), theme_seed)),
+                        .map(|this| {
+                            if theme_mode == ThemeMode::System {
+                                let (light, dark) = (
+                                    theme_registry.get(LIGHT_THEMES[index]).unwrap(),
+                                    theme_registry.get(DARK_THEMES[index]).unwrap(),
+                                );
+                                this.child(
+                                    ThemePreviewTile::new(light, theme_seed)
+                                        .style(ThemePreviewStyle::SideBySide(dark)),
+                                )
+                            } else {
+                                this.child(
+                                    ThemePreviewTile::new(theme.clone(), theme_seed)
+                                        .style(ThemePreviewStyle::Bordered),
+                                )
+                            }
+                        }),
+                )
+                .child(
+                    Label::new(FAMILY_NAMES[index].clone())
+                        .color(Color::Muted)
+                        .size(LabelSize::Small),
                 )
-            .child(Label::new(name).color(Color::Muted).size(LabelSize::Small))
                 .on_click({
                     let theme_name = theme.name.clone();
                     move |_, _, cx| {
-                    let fs = <dyn Fs>::global(cx);
+                        write_theme_change(theme_name.clone(), theme_mode, cx);
-                    let theme_name = theme_name.clone();
-                    update_settings_file::<ThemeSettings>(fs, cx, move |settings, _| {
-                        settings.set_theme(theme_name, appearance);
-                    });
                     }
                 })
         });
 
-    return v_flex()
+        theme_previews
-        .gap_2()
-        .child(
-            h_flex().justify_between().child(Label::new("Theme")).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);
-                            }
-                        }),
-                        // TODO: Properly put the System back as a button within this group
-                        // Currently, given "System" is not an option in the Appearance enum,
-                        // this button doesn't get selected
-                        ToggleButtonSimple::new("System", {
-                            let theme = theme_selection.clone();
-                            move |_, _, cx| {
-                                toggle_system_theme_mode(theme.clone(), appearance, cx);
-                            }
-                        })
-                        .selected(theme_mode == ThemeMode::System),
-                    ],
-                )
-                .selected_index(selected_index)
-                .style(ui::ToggleButtonGroupStyle::Outlined)
-                .button_width(rems_from_px(64.)),
-            ),
-        )
-        .child(h_flex().gap_4().justify_between().children(theme_previews));
 
-    fn write_appearance_change(
+    fn write_mode_change(mode: ThemeMode, cx: &mut App) {
-        appearance_state: &Entity<Appearance>,
-        new_appearance: Appearance,
-        cx: &mut App,
-    ) {
         let fs = <dyn Fs>::global(cx);
-        appearance_state.write(cx, new_appearance);
+        update_settings_file::<ThemeSettings>(fs, cx, move |settings, _cx| {
-
+            settings.set_mode(mode);
-        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(
+    fn write_theme_change(theme: impl Into<Arc<str>>, theme_mode: ThemeMode, cx: &mut App) {
-        theme_selection: ThemeSelection,
-        appearance: Appearance,
-        cx: &mut App,
-    ) {
         let fs = <dyn Fs>::global(cx);
-
+        let theme = theme.into();
-        update_settings_file::<ThemeSettings>(fs, cx, move |settings, _| {
+        update_settings_file::<ThemeSettings>(fs, cx, move |settings, cx| {
-            settings.theme = Some(match theme_selection {
+            if theme_mode == ThemeMode::System {
-                ThemeSelection::Static(theme_name) => ThemeSelection::Dynamic {
+                settings.theme = Some(ThemeSelection::Dynamic {
                     mode: ThemeMode::System,
-                    light: theme_name.clone(),
+                    light: ThemeName(theme.clone()),
-                    dark: theme_name.clone(),
+                    dark: ThemeName(theme.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,
-                },
                 });
+            } else {
+                let appearance = *SystemAppearance::global(cx);
+                settings.set_theme(theme.clone(), appearance);
+            }
         });
     }
 }

crates/onboarding/src/theme_preview.rs

@@ -1,75 +1,85 @@
 #![allow(unused, dead_code)]
 use gpui::{Hsla, Length};
 use std::sync::Arc;
-use theme::{Theme, ThemeRegistry};
+use theme::{Theme, ThemeColors, ThemeRegistry};
 use ui::{
     IntoElement, RenderOnce, component_prelude::Documented, prelude::*, utils::inner_corner_radius,
 };
 
+#[derive(Clone, PartialEq)]
+pub enum ThemePreviewStyle {
+    Bordered,
+    Borderless,
+    SideBySide(Arc<Theme>),
+}
+
 /// 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,
+    style: ThemePreviewStyle,
 }
 
 impl ThemePreviewTile {
-    pub const CORNER_RADIUS: Pixels = px(8.0);
+    pub const SKELETON_HEIGHT_DEFAULT: Pixels = px(2.);
+    pub const SIDEBAR_SKELETON_ITEM_COUNT: usize = 8;
+    pub const SIDEBAR_WIDTH_DEFAULT: DefiniteLength = relative(0.25);
+    pub const ROOT_RADIUS: Pixels = px(8.0);
+    pub const ROOT_BORDER: Pixels = px(2.0);
+    pub const ROOT_PADDING: Pixels = px(2.0);
+    pub const CHILD_BORDER: Pixels = px(1.0);
+    pub const CHILD_RADIUS: std::cell::LazyCell<Pixels> = std::cell::LazyCell::new(|| {
+        inner_corner_radius(
+            Self::ROOT_RADIUS,
+            Self::ROOT_BORDER,
+            Self::ROOT_PADDING,
+            Self::CHILD_BORDER,
+        )
+    });
 
     pub fn new(theme: Arc<Theme>, seed: f32) -> Self {
-        Self { theme, seed }
+        Self {
+            theme,
+            seed,
+            style: ThemePreviewStyle::Bordered,
         }
     }
 
-impl RenderOnce for ThemePreviewTile {
+    pub fn style(mut self, style: ThemePreviewStyle) -> Self {
-    fn render(self, _window: &mut ui::Window, _cx: &mut ui::App) -> impl IntoElement {
+        self.style = style;
-        let color = self.theme.colors();
+        self
+    }
 
-        let root_radius = Self::CORNER_RADIUS;
+    pub fn item_skeleton(w: Length, h: Length, bg: Hsla) -> impl IntoElement {
-        let root_border = px(2.0);
+        div().w(w).h(h).rounded_full().bg(bg)
-        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);
+    pub fn render_sidebar_skeleton_items(
-
+        seed: f32,
-        let skeleton_height = px(2.);
+        colors: &ThemeColors,
-
+        skeleton_height: impl Into<Length> + Clone,
-        let sidebar_seeded_width = |seed: f32, index: usize| {
+    ) -> [impl IntoElement; Self::SIDEBAR_SKELETON_ITEM_COUNT] {
+        let skeleton_height = skeleton_height.into();
+        std::array::from_fn(|index| {
+            let width = {
                 let value = (seed * 1000.0 + index as f32 * 10.0).sin() * 0.5 + 0.5;
                 0.5 + value * 0.45
             };
-
+            Self::item_skeleton(
-        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),
+                colors.text.alpha(0.45),
             )
         })
-            .collect::<Vec<_>>();
+    }
 
-        let sidebar = div()
+    pub fn render_pseudo_code_skeleton(
-            .h_full()
+        seed: f32,
-            .w(relative(0.25))
+        theme: Arc<Theme>,
-            .border_r(px(1.))
+        skeleton_height: impl Into<Length>,
-            .border_color(color.border_transparent)
+    ) -> impl IntoElement {
-            .bg(color.panel_background)
-            .child(
-                v_flex()
-                    .p_2()
-                    .size_full()
-                    .gap_1()
-                    .children(sidebar_skeleton),
-            );
-
-        let pseudo_code_skeleton = |theme: Arc<Theme>, seed: f32| -> AnyElement {
         let colors = theme.colors();
         let syntax = theme.syntax();
 
@@ -91,10 +101,11 @@ impl RenderOnce for ThemePreviewTile {
             comment_color,
         ];
 
+        let skeleton_height = skeleton_height.into();
+
         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()
+            let val =
-                    * 0.5
+                (seed * 100.0 + line_idx as f32 * 20.0 + block_idx as f32 * 5.0).sin() * 0.5 + 0.5;
-                    + 0.5;
             0.05 + val * 0.2
         };
 
@@ -108,8 +119,7 @@ impl RenderOnce for ThemePreviewTile {
         };
 
         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()
+            let idx = ((seed * 10.0 + line_idx as f32 * 7.0 + block_idx as f32 * 3.0).sin() * 3.5)
-                    * 3.5)
                 .abs() as usize
                 % syntax_colors.len();
             syntax_colors[idx].unwrap_or(colors.text)
@@ -119,8 +129,7 @@ impl RenderOnce for ThemePreviewTile {
 
         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)
+                let block_count = (((seed * 30.0 + line_idx as f32 * 12.0).sin() * 0.5 + 0.5) * 3.0)
-                        * 3.0)
                     .round() as usize
                     + 2;
 
@@ -130,7 +139,7 @@ impl RenderOnce for ThemePreviewTile {
                     .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)
+                        Self::item_skeleton(relative(width).into(), skeleton_height, color)
                     })
                     .collect::<Vec<_>>();
 
@@ -138,39 +147,155 @@ impl RenderOnce for ThemePreviewTile {
             })
             .collect::<Vec<_>>();
 
-            v_flex()
+        v_flex().size_full().p_1().gap_1p5().children(lines)
-                .size_full()
+    }
-                .p_1()
-                .gap_1p5()
-                .children(lines)
-                .into_any_element()
-        };
 
-        let pane = v_flex().h_full().flex_grow().child(
+    pub fn render_sidebar(
+        seed: f32,
+        colors: &ThemeColors,
+        width: impl Into<Length> + Clone,
+        skeleton_height: impl Into<Length>,
+    ) -> impl IntoElement {
+        div()
+            .h_full()
+            .w(width)
+            .border_r(px(1.))
+            .border_color(colors.border_transparent)
+            .bg(colors.panel_background)
+            .child(v_flex().p_2().size_full().gap_1().children(
+                Self::render_sidebar_skeleton_items(seed, colors, skeleton_height.into()),
+            ))
+    }
+
+    pub fn render_pane(
+        seed: f32,
+        theme: Arc<Theme>,
+        skeleton_height: impl Into<Length>,
+    ) -> impl IntoElement {
+        v_flex().h_full().flex_grow().child(
             div()
                 .size_full()
                 .overflow_hidden()
-                .bg(color.editor_background)
+                .bg(theme.colors().editor_background)
                 .p_2()
-                .child(pseudo_code_skeleton(self.theme.clone(), self.seed)),
+                .child(Self::render_pseudo_code_skeleton(
-        );
+                    seed,
-
+                    theme,
-        let content = div().size_full().flex().child(sidebar).child(pane);
+                    skeleton_height.into(),
+                )),
+        )
+    }
 
+    pub fn render_editor(
+        seed: f32,
+        theme: Arc<Theme>,
+        sidebar_width: impl Into<Length> + Clone,
+        skeleton_height: impl Into<Length> + Clone,
+    ) -> impl IntoElement {
         div()
             .size_full()
-            .rounded(root_radius)
+            .flex()
-            .p(root_padding)
+            .bg(theme.colors().background.alpha(1.00))
+            .child(Self::render_sidebar(
+                seed,
+                theme.colors(),
+                sidebar_width,
+                skeleton_height.clone(),
+            ))
+            .child(Self::render_pane(seed, theme, skeleton_height.clone()))
+    }
+
+    fn render_borderless(seed: f32, theme: Arc<Theme>) -> impl IntoElement {
+        return Self::render_editor(
+            seed,
+            theme,
+            Self::SIDEBAR_WIDTH_DEFAULT,
+            Self::SKELETON_HEIGHT_DEFAULT,
+        );
+    }
+
+    fn render_border(seed: f32, theme: Arc<Theme>) -> impl IntoElement {
+        div()
+            .size_full()
+            .p(Self::ROOT_PADDING)
+            .rounded(Self::ROOT_RADIUS)
             .child(
                 div()
                     .size_full()
-                    .rounded(inner_radius)
+                    .rounded(*Self::CHILD_RADIUS)
-                    .border(child_border)
+                    .border(Self::CHILD_BORDER)
-                    .border_color(color.border)
+                    .border_color(theme.colors().border)
-                    .bg(color.background)
+                    .child(Self::render_editor(
-                    .child(content),
+                        seed,
+                        theme.clone(),
+                        Self::SIDEBAR_WIDTH_DEFAULT,
+                        Self::SKELETON_HEIGHT_DEFAULT,
+                    )),
             )
     }
+
+    fn render_side_by_side(
+        seed: f32,
+        theme: Arc<Theme>,
+        other_theme: Arc<Theme>,
+        border_color: Hsla,
+    ) -> impl IntoElement {
+        let sidebar_width = relative(0.20);
+
+        return div()
+            .size_full()
+            .p(Self::ROOT_PADDING)
+            .rounded(Self::ROOT_RADIUS)
+            .child(
+                h_flex()
+                    .size_full()
+                    .relative()
+                    .rounded(*Self::CHILD_RADIUS)
+                    .border(Self::CHILD_BORDER)
+                    .border_color(border_color)
+                    .overflow_hidden()
+                    .child(div().size_full().child(Self::render_editor(
+                        seed,
+                        theme.clone(),
+                        sidebar_width,
+                        Self::SKELETON_HEIGHT_DEFAULT,
+                    )))
+                    .child(
+                        div()
+                            .size_full()
+                            .absolute()
+                            .left_1_2()
+                            .bg(other_theme.colors().editor_background)
+                            .child(Self::render_editor(
+                                seed,
+                                other_theme,
+                                sidebar_width,
+                                Self::SKELETON_HEIGHT_DEFAULT,
+                            )),
+                    ),
+            )
+            .into_any_element();
+    }
+}
+
+impl RenderOnce for ThemePreviewTile {
+    fn render(self, _window: &mut ui::Window, _cx: &mut ui::App) -> impl IntoElement {
+        match self.style {
+            ThemePreviewStyle::Bordered => {
+                Self::render_border(self.seed, self.theme).into_any_element()
+            }
+            ThemePreviewStyle::Borderless => {
+                Self::render_borderless(self.seed, self.theme).into_any_element()
+            }
+            ThemePreviewStyle::SideBySide(other_theme) => Self::render_side_by_side(
+                self.seed,
+                self.theme,
+                other_theme,
+                _cx.theme().colors().border,
+            )
+            .into_any_element(),
+        }
+    }
 }
 
 impl Component for ThemePreviewTile {