Add mode specific styles (#2676)

* Add mode specific styles

In similar vein to neovim's lualine and similar statusline packages this
allows helix users to style their mode based on which mode it is thus
making each mode more visually distinct at a glance

* Add an example based on rosepine

* Add editor.colors-mode config

* Document statusline mode styles

book/src/configuration.md

@@ -46,6 +46,7 @@ ### `[editor]` Section
 | `auto-info` | Whether to display infoboxes | `true` |
 | `true-color` | Set to `true` to override automatic detection of terminal truecolor support in the event of a false negative. | `false` |
 | `rulers` | List of column positions at which to display the rulers. Can be overridden by language specific `rulers` in `languages.toml` file. | `[]` |
+| `color-modes` | Whether to color the mode indicator with different colors depending on the mode itself | `false` |
 
 ### `[editor.lsp]` Section
 

book/src/themes.md

@@ -219,6 +219,9 @@ #### Interface
 | `ui.linenr.selected`      | Line number for the line the cursor is on      |
 | `ui.statusline`           | Statusline                                     |
 | `ui.statusline.inactive`  | Statusline (unfocused document)                |
+| `ui.statusline.normal`    | Statusline mode during normal mode ([only if `editor.color-modes` is enabled][editor-section]) |
+| `ui.statusline.insert`    | Statusline mode during insert mode ([only if `editor.color-modes` is enabled][editor-section]) |
+| `ui.statusline.select`    | Statusline mode during select mode ([only if `editor.color-modes` is enabled][editor-section]) |
 | `ui.popup`                | Documentation popups (e.g space-k)             |
 | `ui.popup.info`           | Prompt for multiple key options                |
 | `ui.window`               | Border lines separating splits                 |
@@ -226,7 +229,7 @@ #### Interface
 | `ui.text`                 | Command prompts, popup text, etc.              |
 | `ui.text.focus`           |                                                |
 | `ui.text.info`            | The key: command text in `ui.popup.info` boxes |
-| `ui.virtual.ruler`        | Ruler columns (see the [`editor.rulers` config][rulers-config])|
+| `ui.virtual.ruler`        | Ruler columns (see the [`editor.rulers` config][editor-section])|
 | `ui.virtual.whitespace`   | Visible white-space characters                 |
 | `ui.virtual.indent-guide` | Vertical indent width guides                   |
 | `ui.menu`                 | Code and command completion menus              |
@@ -246,4 +249,4 @@ #### Interface
 | `diagnostic.warning`      | Diagnostics warning (editing area)             |
 | `diagnostic.error`        | Diagnostics error (editing area)               |
 
-[rulers-config]: ./configuration.md#editor-section
+[editor-section]: ./configuration.md#editor-section

helix-term/src/ui/editor.rs

@@ -161,7 +161,7 @@ pub fn render_view(
             .area
             .clip_top(view.area.height.saturating_sub(1))
             .clip_bottom(1); // -1 from bottom to remove commandline
-        self.render_statusline(doc, view, statusline_area, surface, theme, is_focused);
+        self.render_statusline(editor, doc, view, statusline_area, surface, is_focused);
     }
 
     pub fn render_rulers(
@@ -732,11 +732,11 @@ pub fn highlight_cursorline(doc: &Document, view: &View, surface: &mut Surface,
 
     pub fn render_statusline(
         &self,
+        editor: &Editor,
         doc: &Document,
         view: &View,
         viewport: Rect,
         surface: &mut Surface,
-        theme: &Theme,
         is_focused: bool,
     ) {
         use tui::text::{Span, Spans};
@@ -745,10 +745,11 @@ pub fn render_statusline(
         // Left side of the status line.
         //-------------------------------
 
-        let mode = match doc.mode() {
+        let theme = &editor.theme;
-            Mode::Insert => "INS",
+        let (mode, mode_style) = match doc.mode() {
-            Mode::Select => "SEL",
+            Mode::Insert => (" INS ", theme.get("ui.statusline.insert")),
-            Mode::Normal => "NOR",
+            Mode::Select => (" SEL ", theme.get("ui.statusline.select")),
+            Mode::Normal => (" NOR ", theme.get("ui.statusline.normal")),
         };
         let progress = doc
             .language_server()
@@ -767,7 +768,13 @@ pub fn render_statusline(
         // statusline
         surface.set_style(viewport.with_height(1), base_style);
         if is_focused {
-            surface.set_string(viewport.x + 1, viewport.y, mode, base_style);
+            let color_modes = editor.config().color_modes;
+            surface.set_string(
+                viewport.x,
+                viewport.y,
+                mode,
+                if color_modes { mode_style } else { base_style },
+            );
         }
         surface.set_string(viewport.x + 5, viewport.y, progress, base_style);
 

helix-view/src/editor.rs

@@ -161,6 +161,8 @@ pub struct Config {
     pub whitespace: WhitespaceConfig,
     /// Vertical indent width guides.
     pub indent_guides: IndentGuidesConfig,
+    /// Whether to color modes with different colors. Defaults to `false`.
+    pub color_modes: bool,
 }
 
 #[derive(Debug, Default, Clone, PartialEq, Serialize, Deserialize)]
@@ -414,6 +416,7 @@ fn default() -> Self {
             rulers: Vec::new(),
             whitespace: WhitespaceConfig::default(),
             indent_guides: IndentGuidesConfig::default(),
+            color_modes: false,
         }
     }
 }

runtime/themes/rose_pine.toml

@@ -9,6 +9,9 @@
 "ui.selection" = { bg = "highlight" }
 "comment" = "subtle"
 "ui.statusline" = {fg = "foam", bg = "surface" }
+"ui.statusline.insert" = {fg = "base", bg = "foam", modifiers = ["bold"]}
+"ui.statusline.normal" = {fg = "base", bg = "rose", modifiers = ["bold"]}
+"ui.statusline.select" = {fg = "base", bg = "iris", modifiers = ["bold"]}
 "ui.statusline.inactive" = { fg = "iris", bg = "surface" }
 "ui.cursor" = { fg = "rose", modifiers = ["reversed"] }
 "ui.text" = { fg = "text" }