Skip to content

Commit

Permalink
Add mode specific styles (#2676)
Browse files Browse the repository at this point in the history
* 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
  • Loading branch information
Mathspy authored Jun 30, 2022
1 parent ed89f88 commit d06800f
Show file tree
Hide file tree
Showing 5 changed files with 26 additions and 9 deletions.
1 change: 1 addition & 0 deletions book/src/configuration.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
7 changes: 5 additions & 2 deletions book/src/themes.md
Original file line number Diff line number Diff line change
Expand Up @@ -219,14 +219,17 @@ 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 |
| `ui.help` | Description box for commands |
| `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 |
Expand All @@ -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
21 changes: 14 additions & 7 deletions helix-term/src/ui/editor.rs
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand Down Expand Up @@ -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};
Expand All @@ -745,10 +745,11 @@ impl EditorView {
// Left side of the status line.
//-------------------------------

let mode = match doc.mode() {
Mode::Insert => "INS",
Mode::Select => "SEL",
Mode::Normal => "NOR",
let theme = &editor.theme;
let (mode, mode_style) = match doc.mode() {
Mode::Insert => (" INS ", theme.get("ui.statusline.insert")),
Mode::Select => (" SEL ", theme.get("ui.statusline.select")),
Mode::Normal => (" NOR ", theme.get("ui.statusline.normal")),
};
let progress = doc
.language_server()
Expand All @@ -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);

Expand Down
3 changes: 3 additions & 0 deletions helix-view/src/editor.rs
Original file line number Diff line number Diff line change
Expand Up @@ -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)]
Expand Down Expand Up @@ -414,6 +416,7 @@ impl Default for Config {
rulers: Vec::new(),
whitespace: WhitespaceConfig::default(),
indent_guides: IndentGuidesConfig::default(),
color_modes: false,
}
}
}
Expand Down
3 changes: 3 additions & 0 deletions runtime/themes/rose_pine.toml
Original file line number Diff line number Diff line change
Expand Up @@ -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" }
Expand Down

0 comments on commit d06800f

Please sign in to comment.