Theme · Importing: VS Code themes read into Ely's palette, code palettes to choose

settings::read_vscode_theme reads a VS Code color theme, comments and
trailing commas and all: its type picks the mode, its colors and token
scopes name what they give, and the rest keep Ely's palette of that mode.
settings::ThemeImporter takes one dropped or browsed for, shows its name,
mode and count, and hands it over on Apply; a file that does not read
says why. theme::syntax_themes offers Ely's code colors, Quiet and Paper,
chosen through settings::SyntaxThemePicker, radio cards with a line of
code in each palette. A card's words now shrink as a plain block, so a
preview wraps inside the card at 280px.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

examples/gallery/pages/theme/importing.rs

@@ -0,0 +1,48 @@
+use ely_gpui_component::{
+    settings::{SyntaxThemePicker, ThemeImporter},
+    theme::{ActiveTheme, Theme, syntax_themes},
+};
+use gpui::{App, IntoElement, ParentElement, SharedString, Styled, Window, div, px};
+
+use crate::ui::{change, keep, section, specimen, specimens};
+
+/// Which code palette the demo last chose.
+struct Chosen(SharedString);
+
+pub fn importing(window: &mut Window, cx: &mut App) -> impl IntoElement + use<> {
+    let chosen = keep("theme-syntax", || Chosen("Ely".into()), window, cx);
+    let name = chosen.read(cx).0.clone();
+    section(
+        "ThemeImporter · SyntaxThemes",
+        "A VS Code color theme dropped here reads into Ely's palette, the colors it leaves out kept from Ely's; Apply sets it on the whole gallery. Code palettes choose the colors of code for the mode shown.",
+        cx,
+    )
+    .child(
+        specimens()
+            .child(specimen(
+                "ThemeImporter",
+                div().w(px(360.)).child(ThemeImporter::new("theme-importer").on_apply(|read, _, cx| {
+                    Theme::set_palette(read.mode, Some(read.colors.clone()), cx);
+                    Theme::set_mode(read.mode, cx);
+                })),
+                cx,
+            ))
+            .child(specimen(
+                "SyntaxThemePicker",
+                div().w(px(360.)).child(SyntaxThemePicker::new("theme-syntax", syntax_themes(), name).on_change(
+                    move |picked, _, cx| {
+                        let theme = syntax_themes()
+                            .into_iter()
+                            .find(|theme| theme.name == picked)
+                            .expect("a listed syntax theme");
+                        let mode = cx.theme().mode();
+                        let mut colors = cx.theme().palette();
+                        colors.syntax = theme.of(mode);
+                        Theme::set_palette(mode, Some(colors), cx);
+                        change(&chosen, cx, |chosen| chosen.0 = picked.into());
+                    },
+                )),
+                cx,
+            )),
+    )
+}

examples/gallery/pages/theme/mod.rs

@@ -10,6 +10,7 @@ use gpui::{
 };
 
 mod editing;
+mod importing;
 
 use super::Page;
 use crate::ui::{section, specimen, specimens};
@@ -147,6 +148,7 @@ fn render(window: &mut Window, cx: &mut App) -> AnyElement {
             .child(track("spring", "spring · damping 0.75", motion::spring, cx)),
         )
         .child(editing::editor(window, cx))
+        .child(importing::importing(window, cx))
         .into_any_element()
 }