diff --git a/book/src/themes.md b/book/src/themes.md index 57a8d5d1..ea52835d 100644 --- a/book/src/themes.md +++ b/book/src/themes.md @@ -231,6 +231,7 @@ These scopes are used for theming the editor interface. | `ui.virtual.indent-guide` | Vertical indent width guides | | `ui.menu` | Code and command completion menus | | `ui.menu.selected` | Selected autocomplete item | +| `ui.menu.scroll` | `fg` sets thumb color, `bg` sets track color of scrollbar | | `ui.selection` | For selections in the editing area | | `ui.selection.primary` | | | `warning` | Diagnostics warning (gutter) | diff --git a/helix-term/src/ui/menu.rs b/helix-term/src/ui/menu.rs index fa56008d..0519374a 100644 --- a/helix-term/src/ui/menu.rs +++ b/helix-term/src/ui/menu.rs @@ -310,7 +310,7 @@ impl Component for Menu { use tui::widgets::TableState; table.render_table( - area.clip_left(Self::LEFT_PADDING as u16), + area.clip_left(Self::LEFT_PADDING as u16).clip_right(1), surface, &mut TableState { offset: scroll, @@ -320,20 +320,32 @@ impl Component for Menu { if let Some(cursor) = self.cursor { let offset_from_top = cursor - scroll; - let cell = &mut surface[(area.x, area.y + offset_from_top as u16)]; - cell.set_style(selected); + let left = &mut surface[(area.left(), area.y + offset_from_top as u16)]; + left.set_style(selected); + let right = &mut surface[( + area.right().saturating_sub(1), + area.y + offset_from_top as u16, + )]; + right.set_style(selected); } let fits = len <= win_height; + let scroll_style = theme.get("ui.menu.scroll"); for (i, _) in (scroll..(scroll + win_height).min(len)).enumerate() { + let cell = &mut surface[(area.x + area.width - 1, area.y + i as u16)]; + + if !fits { + // Draw scroll track + cell.set_symbol("▐"); // right half block + cell.set_fg(scroll_style.bg.unwrap_or(helix_view::theme::Color::Reset)); + } + let is_marked = i >= scroll_line && i < scroll_line + scroll_height; if !fits && is_marked { - let cell = &mut surface[(area.x + area.width - 2, area.y + i as u16)]; - cell.set_symbol("▐"); - // cell.set_style(selected); - // cell.set_style(if is_marked { selected } else { style }); + // Draw scroll thumb + cell.set_fg(scroll_style.fg.unwrap_or(helix_view::theme::Color::Reset)); } } } diff --git a/runtime/themes/onedark.toml b/runtime/themes/onedark.toml index d0cbb949..a4d05ca8 100644 --- a/runtime/themes/onedark.toml +++ b/runtime/themes/onedark.toml @@ -73,6 +73,7 @@ diagnostic = { modifiers = ["underlined"] } "ui.window" = { bg = "gray" } "ui.menu" = { fg = "white", bg = "gray" } "ui.menu.selected" = { fg = "black", bg = "blue" } +"ui.menu.scroll" = { fg = "white", bg = "light-gray" } [palette] diff --git a/theme.toml b/theme.toml index 8e550f92..3fc694e4 100644 --- a/theme.toml +++ b/theme.toml @@ -69,6 +69,7 @@ label = "honey" "ui.menu" = { fg = "lavender", bg = "revolver" } "ui.menu.selected" = { fg = "revolver", bg = "white" } +"ui.menu.scroll" = { fg = "lavender", bg = "comet" } diagnostic = { modifiers = ["underlined"] } # "diagnostic.hint" = { fg = "revolver", bg = "lilac" }