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 @@ hidden = false
 | `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 @@ These scopes are used for theming the editor 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 @@ These scopes are used for theming the editor 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 @@ These scopes are used for theming the editor 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 @@ impl EditorView {
             .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 @@ impl EditorView {
 
     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 @@ impl EditorView {
         // 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 @@ impl EditorView {
         // 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 @@ impl Default for Config {
             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" }