diff --git a/crates/story/examples/editor.rs b/crates/story/examples/editor.rs index 7fafddc9..be0d0acc 100644 --- a/crates/story/examples/editor.rs +++ b/crates/story/examples/editor.rs @@ -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() diff --git a/crates/story/src/themes.rs b/crates/story/src/themes.rs index 611352f2..f7872b06 100644 --- a/crates/story/src/themes.rs +++ b/crates/story/src/themes.rs @@ -19,29 +19,37 @@ struct State { scrollbar_show: Option, } +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::(&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::(&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::(|cx| { let state = State { theme: cx.theme().theme_name().clone(), diff --git a/crates/ui/src/highlighter/registry.rs b/crates/ui/src/highlighter/registry.rs index a235a5bb..3187f7cd 100644 --- a/crates/ui/src/highlighter/registry.rs +++ b/crates/ui/src/highlighter/registry.rs @@ -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, + pub editor_background: Option, #[serde(rename = "editor.foreground")] - pub foreground: Option, + pub editor_foreground: Option, #[serde(rename = "editor.active_line.background")] - pub active_line: Option, + pub editor_active_line: Option, #[serde(rename = "editor.line_number")] - pub line_number: Option, + pub editor_line_number: Option, #[serde(rename = "editor.active_line_number")] - pub active_line_number: Option, + pub editor_active_line_number: Option, #[serde(flatten)] pub status: StatusColors, #[serde(rename = "syntax")] diff --git a/crates/ui/src/input/element.rs b/crates/ui/src/input/element.rs index 800a2338..550b8301 100644 --- a/crates/ui/src/input/element.rs +++ b/crates/ui/src/input/element.rs @@ -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), )); diff --git a/crates/ui/src/input/text_input.rs b/crates/ui/src/input/text_input.rs index 5d475260..49af7792 100644 --- a/crates/ui/src/input/text_input.rs +++ b/crates/ui/src/input/text_input.rs @@ -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; diff --git a/themes/ayu.json b/themes/ayu.json index b01e9fbb..c060337f 100644 --- a/themes/ayu.json +++ b/themes/ayu.json @@ -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", diff --git a/themes/catppuccin.json b/themes/catppuccin.json index 5c96b706..59cab2ae 100644 --- a/themes/catppuccin.json +++ b/themes/catppuccin.json @@ -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", diff --git a/themes/flexoki.json b/themes/flexoki.json index 871d31bd..ff1bf934 100644 --- a/themes/flexoki.json +++ b/themes/flexoki.json @@ -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" } } } diff --git a/themes/harper.json b/themes/harper.json index 62bfe3a3..6ca5cc86 100644 --- a/themes/harper.json +++ b/themes/harper.json @@ -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", diff --git a/themes/macos-classic.json b/themes/macos-classic.json index d01f2bb7..3a731380 100644 --- a/themes/macos-classic.json +++ b/themes/macos-classic.json @@ -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",