dan/gpui-component
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

editor: Split Input and Editor background color. (#1323)

Browse source 
Keep input to use window background color, the `editor.background` only
for Editor mode.
This commit is contained in:
Jason Lee 2025-10-03 11:20:01 +08:00 committed by GitHub
parent e84e8ebaad
commit cfd060b66d
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
10 changed files with 114 additions and 247 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
crates/story/examples/editor.rs
View file

@ -866,7 +866,7 @@ impl Render for Example {
h_flex() h_flex()
.justify_between() .justify_between()
.text_sm() .text_sm()
.bg(cx.theme().secondary) .bg(cx.theme().background)
.py_1p5() .py_1p5()
.px_4() .px_4()
.border_t_1() .border_t_1()

40
crates/story/src/themes.rs
View file

@ -19,29 +19,37 @@ struct State {
scrollbar_show: Option<ScrollbarShow>, scrollbar_show: Option<ScrollbarShow>,
} }
impl Default for State {
fn default() -> Self {
Self {
theme: "Default Light".into(),
scrollbar_show: None,
}
}
}
pub fn init(cx: &mut App) { pub fn init(cx: &mut App) {
// Load last theme state // Load last theme state
let json = std::fs::read_to_string(STATE_FILE).unwrap_or(String::default()); let json = std::fs::read_to_string(STATE_FILE).unwrap_or(String::default());
tracing::info!("Load themes..."); tracing::info!("Load themes...");
if let Ok(state) = serde_json::from_str::<State>(&json) { let state = serde_json::from_str::<State>(&json).unwrap_or_default();
if let Err(err) = ThemeRegistry::watch_dir(PathBuf::from("./themes"), cx, move |cx| { if let Err(err) = ThemeRegistry::watch_dir(PathBuf::from("./themes"), cx, move |cx| {
if let Some(theme) = ThemeRegistry::global(cx) if let Some(theme) = ThemeRegistry::global(cx)
.themes() .themes()
.get(&state.theme) .get(&state.theme)
.cloned() .cloned()
{ {
Theme::global_mut(cx).apply_config(&theme); Theme::global_mut(cx).apply_config(&theme);
}
}) {
tracing::error!("Failed to watch themes directory: {}", err);
} }
}) {
if let Some(scrollbar_show) = state.scrollbar_show { tracing::error!("Failed to watch themes directory: {}", err);
Theme::global_mut(cx).scrollbar_show = scrollbar_show;
}
cx.refresh_windows();
} }
if let Some(scrollbar_show) = state.scrollbar_show {
Theme::global_mut(cx).scrollbar_show = scrollbar_show;
}
cx.refresh_windows();
cx.observe_global::<Theme>(|cx| { cx.observe_global::<Theme>(|cx| {
let state = State { let state = State {
theme: cx.theme().theme_name().clone(), theme: cx.theme().theme_name().clone(),

10
crates/ui/src/highlighter/registry.rs
View file

@ -412,15 +412,15 @@ impl StatusColors {
#[derive(Debug, Default, Clone, PartialEq, Eq, Hash, JsonSchema, Serialize, Deserialize)] #[derive(Debug, Default, Clone, PartialEq, Eq, Hash, JsonSchema, Serialize, Deserialize)]
pub struct HighlightThemeStyle { pub struct HighlightThemeStyle {
#[serde(rename = "editor.background")] #[serde(rename = "editor.background")]
pub background: Option<Hsla>, pub editor_background: Option<Hsla>,
#[serde(rename = "editor.foreground")] #[serde(rename = "editor.foreground")]
pub foreground: Option<Hsla>, pub editor_foreground: Option<Hsla>,
#[serde(rename = "editor.active_line.background")] #[serde(rename = "editor.active_line.background")]
pub active_line: Option<Hsla>, pub editor_active_line: Option<Hsla>,
#[serde(rename = "editor.line_number")] #[serde(rename = "editor.line_number")]
pub line_number: Option<Hsla>, pub editor_line_number: Option<Hsla>,
#[serde(rename = "editor.active_line_number")] #[serde(rename = "editor.active_line_number")]
pub active_line_number: Option<Hsla>, pub editor_active_line_number: Option<Hsla>,
#[serde(flatten)] #[serde(flatten)]
pub status: StatusColors, pub status: StatusColors,
#[serde(rename = "syntax")] #[serde(rename = "syntax")]

4
crates/ui/src/input/element.rs
View file

@ -1110,7 +1110,7 @@ impl Element for TextElement {
} }
} }
let active_line_color = cx.theme().highlight_theme.style.active_line; let active_line_color = cx.theme().highlight_theme.style.editor_active_line;
// Paint active line // Paint active line
let mut offset_y = px(0.); let mut offset_y = px(0.);
@ -1193,7 +1193,7 @@ impl Element for TextElement {
cx.theme() cx.theme()
.highlight_theme .highlight_theme
.style .style
.background .editor_background
.unwrap_or(cx.theme().background), .unwrap_or(cx.theme().background),
)); ));

14
crates/ui/src/input/text_input.rs
View file

@ -248,11 +248,15 @@ impl RenderOnce for TextInput {
let bg = if state.disabled { let bg = if state.disabled {
cx.theme().muted cx.theme().muted
} else { } else {
cx.theme() if state.mode.is_code_editor() {
.highlight_theme cx.theme()
.style .highlight_theme
.background .style
.unwrap_or(cx.theme().background) .editor_background
.unwrap_or(cx.theme().background)
} else {
cx.theme().background
}
}; };
let prefix = self.prefix; let prefix = self.prefix;

41
themes/ayu.json
View file

@ -8,33 +8,32 @@
"name": "Ayu Light", "name": "Ayu Light",
"mode": "light", "mode": "light",
"colors": { "colors": {
"accent.background": "#DFE0E1", "accent.background": "#dbdbdb",
"accent.foreground": "#5C6773", "accent.foreground": "#5C6773",
"background": "#fafafa", "background": "#ECECED",
"foreground": "#5c6166", "foreground": "#5c6166",
"border": "#cfd1d2ff", "border": "#cfd1d2ff",
"ring": "#FF9940", "ring": "#FF9940",
"input.border": "#D9DCE3", "input.border": "#D9DCE3",
"list.active.background": "#55B4D422", "list.active.background": "#55B4D422",
"list.active.border": "#55B4D4", "list.active.border": "#55B4D4",
"list.background": "#FAFAFA", "list.even.background": "#E6E6E6",
"list.even.background": "#EFF0F2", "list.head.background": "#E6E6E6",
"list.head.background": "#EFF0F2",
"muted.background": "#F3F4F5", "muted.background": "#F3F4F5",
"muted.foreground": "#ABB0B6", "muted.foreground": "#ABB0B6",
"panel.background": "#F3F4F5", "panel.background": "#F3F4F5",
"popover.background": "#ECECED", "popover.background": "#ECECED",
"popover.foreground": "#5C6773", "popover.foreground": "#5C6773",
"primary.active.background": "#55B4D4", "primary.active.background": "#42accf",
"primary.background": "#55B4D4", "primary.background": "#55b4d3",
"primary.foreground": "#FAFAFA", "primary.foreground": "#FAFAFA",
"primary.hover.background": "#55B4D4", "primary.hover.background": "#5fb9d7",
"scrollbar.background": "#FAFAFA00", "scrollbar.background": "#FAFAFA00",
"scrollbar.thumb.background": "#5c61664c", "scrollbar.thumb.background": "#5c61664c",
"secondary.active.background": "#ECECED", "secondary.active.background": "#CECECE",
"secondary.background": "#F0F1F2", "secondary.background": "#dbdbdb",
"secondary.foreground": "#5C6773", "secondary.foreground": "#5C6773",
"secondary.hover.background": "#F0F1F2EE", "secondary.hover.background": "#e0e0e0",
"tab.active.background": "#fafafa", "tab.active.background": "#fafafa",
"tab.active.foreground": "#5C6773", "tab.active.foreground": "#5C6773",
"tab.background": "#ECECED00", "tab.background": "#ECECED00",
@ -42,22 +41,16 @@
"tab_bar.background": "#ECECED", "tab_bar.background": "#ECECED",
"title_bar.background": "#dcddde", "title_bar.background": "#dcddde",
"title_bar.border": "#CFD1D2", "title_bar.border": "#CFD1D2",
"base.yellow": "#e7c547", "base.yellow": "#f1ad49",
"base.yellow.light": "#ffc94a",
"base.red": "#F07171", "base.red": "#F07171",
"base.red.light": "#F0717188", "base.blue": "#55b4d3",
"base.blue": "#41a6d9", "base.green": "#85b304",
"base.blue.light": "#73d8ff",
"base.green": "#86b300",
"base.geeen.light": "#b8e532",
"base.magenta": "#9371f0", "base.magenta": "#9371f0",
"base.magenta.light": "#9371f088", "base.cyan": "#4dbf99"
"base.cyan": "#95e6cb",
"base.cyan.light": "#7ff1cb"
}, },
"highlight": { "highlight": {
"editor.foreground": "#5C6773", "editor.foreground": "#5C6773",
"editor.background": "#FAFAFA", "editor.background": "#FCFCFC",
"editor.active_line.background": "#ECECED", "editor.active_line.background": "#ECECED",
"editor.line_number": "#ABB0B6", "editor.line_number": "#ABB0B6",
"editor.active_line_number": "#5C6773", "editor.active_line_number": "#5C6773",
@ -245,7 +238,7 @@
"accent.background": "#2D2F34", "accent.background": "#2D2F34",
"accent.foreground": "#B3B1AD", "accent.foreground": "#B3B1AD",
"background": "#1F2127", "background": "#1F2127",
"border": "#3f4043", "border": "#3d3e40",
"ring": "#FFB454", "ring": "#FFB454",
"foreground": "#B3B1AD", "foreground": "#B3B1AD",
"input.border": "#444444", "input.border": "#444444",
@ -271,7 +264,7 @@
"tab.background": "#1F2127", "tab.background": "#1F2127",
"tab.foreground": "#82807d", "tab.foreground": "#82807d",
"tab_bar.background": "#1F2127", "tab_bar.background": "#1F2127",
"title_bar.background": "#1F2127", "title_bar.background": "#313337",
"base.yellow": "#feb454", "base.yellow": "#feb454",
"base.red": "#ef7177", "base.red": "#ef7177",
"base.blue": "#5ac1fe", "base.blue": "#5ac1fe",

2
themes/catppuccin.json
View file

@ -429,7 +429,7 @@
"tab.background": "#1E202B00", "tab.background": "#1E202B00",
"tab.foreground": "#abb5d9", "tab.foreground": "#abb5d9",
"tab_bar.background": "#1E202B", "tab_bar.background": "#1E202B",
"title_bar.background": "#232634", "title_bar.background": "#1D202B",
"title_bar.border": "#30354b", "title_bar.border": "#30354b",
"base.red": "#e78284", "base.red": "#e78284",
"base.green": "#a6d189", "base.green": "#a6d189",

223
themes/flexoki.json
View file

@ -80,8 +80,6 @@
"modified.background": "#FAEEC6", "modified.background": "#FAEEC6",
"modified.border": "#AD8301", "modified.border": "#AD8301",
"predictive": "#B7B5AC", "predictive": "#B7B5AC",
"predictive.background": null,
"predictive.border": null,
"renamed": "#24837B", "renamed": "#24837B",
"renamed.background": "#DDF1E4", "renamed.background": "#DDF1E4",
"renamed.border": "#24837B", "renamed.border": "#24837B",
@ -96,140 +94,74 @@
"warning.border": "#AD8301", "warning.border": "#AD8301",
"syntax": { "syntax": {
"attribute": { "attribute": {
"color": "#205EA6", "color": "#205EA6"
"background_color": null,
"font_style": null,
"font_weight": null
}, },
"boolean": { "boolean": {
"color": "#BC5215", "color": "#BC5215"
"background_color": null,
"font_style": null,
"font_weight": null
}, },
"comment": { "comment": {
"color": "#B7B5AC", "color": "#B7B5AC"
"background_color": null,
"font_style": null,
"font_weight": null
}, },
"comment.doc": { "comment.doc": {
"color": "#B7B5AC", "color": "#B7B5AC"
"background_color": null,
"font_style": null,
"font_weight": null
}, },
"constant": { "constant": {
"color": "#F07171", "color": "#F07171"
"background_color": null,
"font_style": null,
"font_weight": null
}, },
"constructor": { "constructor": {
"color": "#205EA6", "color": "#205EA6"
"background_color": null,
"font_style": null,
"font_weight": null
}, },
"embedded": { "embedded": {
"color": "#5C6773", "color": "#5C6773"
"background_color": null,
"font_style": null,
"font_weight": null
}, },
"function": { "function": {
"color": "#BC5215", "color": "#BC5215"
"background_color": null,
"font_style": null,
"font_weight": null
}, },
"keyword": { "keyword": {
"color": "#66800B", "color": "#66800B"
"background_color": null,
"font_style": null,
"font_weight": null
}, },
"link_text": { "link_text": {
"color": "#24837B", "color": "#24837B"
"background_color": null,
"font_style": null,
"font_weight": null
}, },
"link_uri": { "link_uri": {
"color": "#24837B", "color": "#24837B"
"background_color": null,
"font_style": null,
"font_weight": null
}, },
"number": { "number": {
"color": "#5E409D", "color": "#5E409D"
"background_color": null,
"font_style": null,
"font_weight": null
}, },
"string": { "string": {
"color": "#24837B", "color": "#24837B"
"background_color": null,
"font_style": null,
"font_weight": null
}, },
"string.escape": { "string.escape": {
"color": "#24837B", "color": "#24837B"
"background_color": null,
"font_style": null,
"font_weight": null
}, },
"string.regex": { "string.regex": {
"color": "#24837B", "color": "#24837B"
"background_color": null,
"font_style": null,
"font_weight": null
}, },
"string.special": { "string.special": {
"color": "#24837B", "color": "#24837B"
"background_color": null,
"font_style": null,
"font_weight": null
}, },
"string.special.symbol": { "string.special.symbol": {
"color": "#24837B", "color": "#24837B"
"background_color": null,
"font_style": null,
"font_weight": null
}, },
"tag": { "tag": {
"color": "#205EA6", "color": "#205EA6"
"background_color": null,
"font_style": null,
"font_weight": null
}, },
"text.literal": { "text.literal": {
"color": "#24837B", "color": "#24837B"
"background_color": null,
"font_style": null,
"font_weight": null
}, },
"title": { "title": {
"color": "#24837B", "color": "#24837B",
"font_weight": 600 "font_weight": 600
}, },
"type": { "type": {
"color": "#AD8301", "color": "#AD8301"
"background_color": null,
"font_style": null,
"font_weight": null
}, },
"property": { "property": {
"color": "#BC5215", "color": "#BC5215"
"background_color": null,
"font_style": null,
"font_weight": null
}, },
"variable.special": { "variable.special": {
"color": "#205EA6", "color": "#205EA6"
"background_color": null,
"font_style": null,
"font_weight": null
} }
} }
} }
@ -270,6 +202,7 @@
"tab.background": "#1C1B1A", "tab.background": "#1C1B1A",
"tab.foreground": "#878580", "tab.foreground": "#878580",
"tab_bar.background": "#1C1B1A", "tab_bar.background": "#1C1B1A",
"title_bar.background": "#1C1B1A",
"base.yellow": "#AD8301", "base.yellow": "#AD8301",
"base.yellow.light": "#D0A215", "base.yellow.light": "#D0A215",
"base.red": "#AF3029", "base.red": "#AF3029",
@ -297,140 +230,74 @@
"predictive": "#878580", "predictive": "#878580",
"syntax": { "syntax": {
"attribute": { "attribute": {
"color": "#4385BE", "color": "#4385BE"
"background_color": null,
"font_style": null,
"font_weight": null
}, },
"boolean": { "boolean": {
"color": "#DA702C", "color": "#DA702C"
"background_color": null,
"font_style": null,
"font_weight": null
}, },
"comment": { "comment": {
"color": "#575653", "color": "#575653"
"background_color": null,
"font_style": null,
"font_weight": null
}, },
"comment.doc": { "comment.doc": {
"color": "#575653", "color": "#575653"
"background_color": null,
"font_style": null,
"font_weight": null
}, },
"constant": { "constant": {
"color": "#CE5D97", "color": "#CE5D97"
"background_color": null,
"font_style": null,
"font_weight": null
}, },
"constructor": { "constructor": {
"color": "#4385BE", "color": "#4385BE"
"background_color": null,
"font_style": null,
"font_weight": null
}, },
"embedded": { "embedded": {
"color": "#878580", "color": "#878580"
"background_color": null,
"font_style": null,
"font_weight": null
}, },
"function": { "function": {
"color": "#DA702C", "color": "#DA702C"
"background_color": null,
"font_style": null,
"font_weight": null
}, },
"keyword": { "keyword": {
"color": "#879A39", "color": "#879A39"
"background_color": null,
"font_style": null,
"font_weight": null
}, },
"link_text": { "link_text": {
"color": "#3AA99F", "color": "#3AA99F"
"background_color": null,
"font_style": null,
"font_weight": null
}, },
"link_uri": { "link_uri": {
"color": "#3AA99F", "color": "#3AA99F"
"background_color": null,
"font_style": null,
"font_weight": null
}, },
"number": { "number": {
"color": "#8B7EC8", "color": "#8B7EC8"
"background_color": null,
"font_style": null,
"font_weight": null
}, },
"string": { "string": {
"color": "#3AA99F", "color": "#3AA99F"
"background_color": null,
"font_style": null,
"font_weight": null
}, },
"string.escape": { "string.escape": {
"color": "#3AA99F", "color": "#3AA99F"
"background_color": null,
"font_style": null,
"font_weight": null
}, },
"string.regex": { "string.regex": {
"color": "#3AA99F", "color": "#3AA99F"
"background_color": null,
"font_style": null,
"font_weight": null
}, },
"string.special": { "string.special": {
"color": "#3AA99F", "color": "#3AA99F"
"background_color": null,
"font_style": null,
"font_weight": null
}, },
"string.special.symbol": { "string.special.symbol": {
"color": "#3AA99F", "color": "#3AA99F"
"background_color": null,
"font_style": null,
"font_weight": null
}, },
"tag": { "tag": {
"color": "#4385BE", "color": "#4385BE"
"background_color": null,
"font_style": null,
"font_weight": null
}, },
"text.literal": { "text.literal": {
"color": "#3AA99F", "color": "#3AA99F"
"background_color": null,
"font_style": null,
"font_weight": null
}, },
"title": { "title": {
"color": "#D0A215", "color": "#D0A215",
"font_weight": 600 "font_weight": 600
}, },
"type": { "type": {
"color": "#D0A215", "color": "#D0A215"
"background_color": null,
"font_style": null,
"font_weight": null
}, },
"property": { "property": {
"color": "#DA702C", "color": "#DA702C"
"background_color": null,
"font_style": null,
"font_weight": null
}, },
"variable.special": { "variable.special": {
"color": "#4385BE", "color": "#4385BE"
"background_color": null,
"font_style": null,
"font_weight": null
} }
} }
} }

1
themes/harper.json
View file

@ -33,6 +33,7 @@
"tab.active.background": "#010101", "tab.active.background": "#010101",
"tab.active.foreground": "#a8a49d", "tab.active.foreground": "#a8a49d",
"tab.foreground": "#787878", "tab.foreground": "#787878",
"title_bar.background": "#101010",
"base.red": "#ff5874", "base.red": "#ff5874",
"base.red.light": "#ff587499", "base.red.light": "#ff587499",
"base.green": "#489e48", "base.green": "#489e48",

24
themes/macos-classic.json
View file

@ -8,16 +8,13 @@
"name": "macOS Classic Light", "name": "macOS Classic Light",
"mode": "light", "mode": "light",
"colors": { "colors": {
"accent.background": "#EAEAEA", "accent.background": "#E0E0E0",
"accent.foreground": "#000000", "accent.foreground": "#000000",
"background": "#FFFFFF", "background": "#FCFCFC",
"foreground": "#000000", "foreground": "#000000",
"border": "#D2D2D2", "border": "#D2D2D2",
"ring": "#0064E1", "ring": "#0064E1",
"danger.background": "#d21f07",
"danger.active.background": "#C5060B",
"danger.foreground": "#FFFFFF", "danger.foreground": "#FFFFFF",
"danger.hover.background": "#D9564E",
"input.border": "#E0E0E0", "input.border": "#E0E0E0",
"list.active.background": "#C7DEFF", "list.active.background": "#C7DEFF",
"list.active.border": "#0064E1", "list.active.border": "#0064E1",
@ -30,16 +27,14 @@
"panel.background": "#F9F9F9", "panel.background": "#F9F9F9",
"popover.background": "#F7F7F7", "popover.background": "#F7F7F7",
"popover.foreground": "#000000", "popover.foreground": "#000000",
"primary.active.background": "#1958a4",
"primary.background": "#0064E1", "primary.background": "#0064E1",
"primary.foreground": "#FFFFFF", "primary.foreground": "#FFFFFF",
"primary.hover.background": "#2585fa",
"scrollbar.background": "#FFFFFF00", "scrollbar.background": "#FFFFFF00",
"scrollbar.thumb.background": "#C8C8C8AA", "scrollbar.thumb.background": "#C8C8C8AA",
"secondary.active.background": "#E0E0E0", "secondary.active.background": "#D0D0D0",
"secondary.background": "#E9E9E9", "secondary.background": "#E4E4E4",
"secondary.foreground": "#000000", "secondary.foreground": "#000000",
"secondary.hover.background": "#D0D0D0", "secondary.hover.background": "#e9e9e9",
"tab.active.background": "#FFFFFF", "tab.active.background": "#FFFFFF",
"tab.active.foreground": "#000000", "tab.active.foreground": "#000000",
"tab.background": "#E9E9E9", "tab.background": "#E9E9E9",
@ -157,14 +152,13 @@
"colors": { "colors": {
"accent.background": "#363636", "accent.background": "#363636",
"accent.foreground": "#CACCCA", "accent.foreground": "#CACCCA",
"background": "#1f1f1f", "background": "#1E1E1E",
"border": "#494949", "border": "#454545",
"ring": "#0059D1", "ring": "#0059D1",
"foreground": "#DEDEDE", "foreground": "#DEDEDE",
"input.border": "#494949", "input.border": "#494949",
"list.active.background": "#353436", "list.active.background": "#353436",
"list.active.border": "#0059D1", "list.active.border": "#0059D1",
"list.even.background": "#1E1D1E",
"muted.background": "#1E1D1E", "muted.background": "#1E1D1E",
"muted.foreground": "#9D9D9D", "muted.foreground": "#9D9D9D",
"panel.background": "#1E1D1E", "panel.background": "#1E1D1E",
@ -181,7 +175,7 @@
"tab.active.background": "#1E1E1E", "tab.active.background": "#1E1E1E",
"tab.background": "#232323", "tab.background": "#232323",
"tab.foreground": "#8F8F8F", "tab.foreground": "#8F8F8F",
"title_bar.background": "#222222", "title_bar.background": "#272727",
"selection.background": "#3F638B", "selection.background": "#3F638B",
"link": "#307BF6", "link": "#307BF6",
"base.blue": "#0059D1", "base.blue": "#0059D1",
@ -193,7 +187,7 @@
}, },
"highlight": { "highlight": {
"editor.foreground": "#CACCCA", "editor.foreground": "#CACCCA",
"editor.background": "#181818", "editor.background": "#131313",
"editor.active_line.background": "#35343666", "editor.active_line.background": "#35343666",
"editor.line_number": "#8F8F8F", "editor.line_number": "#8F8F8F",
"editor.active_line_number": "#DDDDDD", "editor.active_line_number": "#DDDDDD",