Change status bar color based on mode

[brandonblock]

I understand that this may not currently be possible with VS Code but the thing I'm missing most in switching from Vim is the color-indicated mode bar from lightline.

[johnfn]

This is tracked on the vscode repo: microsoft/vscode#1884

[jnachtigall]

Something similar to these two vim plugins would be really nice:

• https://github.com/powerline/powerline#vim-statusline
• https://github.com/itchyny/lightline.vim#powerline-theme-default
• https://github.com/vim-airline/vim-airline#vim-airline-

For VSCodeVim another color when typing in a Search (e.g. /) would be nice. "Normal Mode" and "Searching for: " are really hard to differentiate as they are tiny and at very bottom and very left, whereas the code is more top right.

[zelphir]

any updates? If is it not possible can you just append the statusbar-item div with a class? like normal-mode or insert-mode?

[xconverge]

This is still experimental in vscode so was waiting a little bit for more adoption.

Just to get some feedback on this, would it be ok for something like this as config options:

vim.statusBarColorControl: true
vim.statusBarColors = {
    normal: "#268bd2"
    insert: "#d33682"
    visual: "#268bd2"
    visualline: "#2aa198"
    visualblock: "#859900"
    replace: "#b58900"
}

[zelphir]

@xconverge Can I help you with?

[xconverge]

I will take a stab at it tonight if I get a chance! I will let you know, one thing I do know is that I have 0 clue on what colors are used, that was going to be left up to the user. If you can pick some default colors though, that would be helpful.

[zelphir]

there are no default colors! Everyone usually pick a color/theme for airline or lightline. Have a look here: https://github.com/itchyny/lightline.vim

As you can see it depends on the theme

[xconverge]

Then how about these colors ;)

https://github.com/itchyny/lightline.vim#powerline-theme-default

[xconverge]

Also, I think from the vscode implementation, the entire bar will change colors, so font color to read on it is going to be annoying, I will try it out and post some screenshots here for review though

[zelphir]

It'd be great if you can customise theme in the settings using workbench.experimental.colorCustomizations... but that could be the next step.

[xconverge]

It works :)

[13hoop]

works fine
ths.😄

[matthewsimo]

This seems to knock out my other theme color tweaks, is there a way to not blow out the other stuff in workbench.colorCustomizations? As an aside, would it be a nice feature to let users define a string of the color (and get current behavior) or an object of valid workbench.colorCustomizations key/value pairs (and get those values swapped in/out by mode)?

[xahon]

Is it possible to change foreground color?

[xahon]

there is "statusBar.foreground" option that works. May be someone made a PR?

[xahon]

I've just added solution to change foreground in my PR #2102

[crucialfelix]

This works but it's a performance killer. Repaints are happening on every key stroke.

[xconverge]

Let me take a peek and make sure it is only done on mode transitions

[crucialfelix]

I have a profile showing the keystrokes and the repaints. They stop when I change the status bar setting. Will post the profile tomorrow if you like.
You

[xconverge]

I took a look this morning, it is definitely doing stuff every keystroke, not just on mode changes

my ONLY concern, is how to make sure things are really correct. For example, when switching tabs, it needs to accurately represent the new tabs state, so if one is in visual and one is in normal, how do we ensure things are all synced up and the proper color is displayed.

I think I have an idea, just cache the last mode in our statusBar singleton, and only do anything with color if newMode != oldMode

Will see if I can get a fix in tonight!

Edit: Yes looking at it, this should be very straight forward, something like this:

Vim/src/statusBar.ts

Line 33 in d2e869f

public SetColor(background: string, foreground?: string) {

Just add this to the top of SetColor() and also pass in the mode:

if(this._prevModeName === mode){
return;
}

We are already doing this in SetText more or less