More explicit mode indication (color)

[dstrelnikov]

At the moment one can only distinguish the current mode by the mode name in the status line and possibly by the cursor shape provided different cursor shapes are set for different mode.

I find it myself to difficult to see the mode name with the peripheral vision. I think a color indication might be useful.

[lrnzlo]

I'm currently working on this if it's ok to everybody!

[archseer]

Status line should be configurable (we were discussing a template format on a similar issue) but I don't want modeline colors by default. I find that airline etc. steal the eye focus by flashing colors on mode change

[lrnzlo]

as a workaround I've found this

add this to https://github.com/helix-editor/helix/blob/master/helix-term/src/ui/editor.rs#L550

let get_mode_bg = match mode {
    "INS" => "ui.statusline.insert",
    "SEL" => "ui.statusline.select",
    "modal" => "ui.statusline.normal",
}

and then modify this line https://github.com/helix-editor/helix/blob/master/helix-term/src/ui/editor.rs#L579#L580

let base_style = if is_focused {
    get_mode_bg // << add this
} ...

after that just go to runtime/themes/[your_favorite_theme] and add "ui.statusline.insert = {bg = "color_of_your_choice"}
etc...

Yes, this is not a perfect solution but is a good workaround for now. If you are interested you can also change just the background color of the mode word by using set_spans instead of set_string here:

helix/helix-term/src/ui/editor.rs

Line 587 in d37369c

surface.set_string(viewport.x + 1, viewport.y, mode, base_style);

find more info about set_spans here:

helix/helix-tui/src/buffer.rs

Line 418 in d37369c

pub fn set_spans<'a>(&mut self, x: u16, y: u16, spans: &Spans<'a>, width: u16) -> (u16, u16) {

if there's any questions ask.

[lobaluna]

Hi, @lrnzlo

Is it possible to change background color in a user theme, depending on which mode you are in?

I mean, having some hack like you mentioned here: #1979 (comment)

If so, can you explain me? I'm not really a programmer but can do little hacks ;D

[lrnzlo]

Yes, @lobaluna!
An extremely simple hack is to add this to the render function

let doc = doc!(cx.editor); 
let mode = match doc.mode() {
    Mode::Insert => "INS",
    Mode::Select => "SEL",
    Mode::Normal => "NOR",
};
        
let mode_ui_bg = match mode {
    "INS" => "ui.bg.insert",
    "SEL" => "ui.bg.select",
    "NOR" => "ui.bg.normal",
};

surface.set_style(area, cx.editor.theme.get(mode_ui_bg));

After that just add ui.bg.[mode] to your [theme].toml file!

[lobaluna]

Thank you!
It is simple, indeed. I will try to compile from source.

I respectfully ask if you can patch the code for the next release, so anyone can use this GREAT feature.