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()
.justify_between()
.text_sm()
.bg(cx.theme().secondary)
.bg(cx.theme().background)
.py_1p5()
.px_4()
.border_t_1()

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

@ -19,29 +19,37 @@ struct State {
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) {
// Load last theme state
let json = std::fs::read_to_string(STATE_FILE).unwrap_or(String::default());
tracing::info!("Load themes...");
if let Ok(state) = serde_json::from_str::<State>(&json) {
if let Err(err) = ThemeRegistry::watch_dir(PathBuf::from("./themes"), cx, move |cx| {
if let Some(theme) = ThemeRegistry::global(cx)
.themes()
.get(&state.theme)
.cloned()
{
Theme::global_mut(cx).apply_config(&theme);
}
}) {
tracing::error!("Failed to watch themes directory: {}", err);
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 Some(theme) = ThemeRegistry::global(cx)
.themes()
.get(&state.theme)
.cloned()
{
Theme::global_mut(cx).apply_config(&theme);
}
if let Some(scrollbar_show) = state.scrollbar_show {
Theme::global_mut(cx).scrollbar_show = scrollbar_show;
}
cx.refresh_windows();
}) {
tracing::error!("Failed to watch themes directory: {}", err);
}
if let Some(scrollbar_show) = state.scrollbar_show {
Theme::global_mut(cx).scrollbar_show = scrollbar_show;
}
cx.refresh_windows();
cx.observe_global::<Theme>(|cx| {
let state = State {
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)]
pub struct HighlightThemeStyle {
#[serde(rename = "editor.background")]
pub background: Option<Hsla>,
pub editor_background: Option<Hsla>,
#[serde(rename = "editor.foreground")]
pub foreground: Option<Hsla>,
pub editor_foreground: Option<Hsla>,
#[serde(rename = "editor.active_line.background")]
pub active_line: Option<Hsla>,
pub editor_active_line: Option<Hsla>,
#[serde(rename = "editor.line_number")]
pub line_number: Option<Hsla>,
pub editor_line_number: Option<Hsla>,
#[serde(rename = "editor.active_line_number")]
pub active_line_number: Option<Hsla>,
pub editor_active_line_number: Option<Hsla>,
#[serde(flatten)]
pub status: StatusColors,
#[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
let mut offset_y = px(0.);
@ -1193,7 +1193,7 @@ impl Element for TextElement {
cx.theme()
.highlight_theme
.style
.background
.editor_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 {
cx.theme().muted
} else {
cx.theme()
.highlight_theme
.style
.background
.unwrap_or(cx.theme().background)
if state.mode.is_code_editor() {
cx.theme()
.highlight_theme
.style
.editor_background
.unwrap_or(cx.theme().background)
} else {
cx.theme().background
}
};
let prefix = self.prefix;

41
themes/ayu.json
View file

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

2
themes/catppuccin.json
View file

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

223
themes/flexoki.json
View file

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

1
themes/harper.json
View file

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

24
themes/macos-classic.json
View file

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