VSCode Neovim Theme Modifier 🎨
Tags: vscode, vim, tools, plugins
Published: 2020-10-26 18:09:08

To commit to a mouse-less future I've been working to make a workflow that doesn't have me moving away from the home row.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/jwz18zz7cxqpdxo2ci01.png)

Over the years I've tried my hardest to get into [Vim](https://www.vim.org/). I love the idea of it but my interest ends up trailing off... Not this time!!

I've also got into mechanical keyboards in a big way and now type on a 40% split! Getting rid of over half the keys has sped me up quite a bit - I may write an article just on this. This felt like the perfect time to give Vim a proper go.

I had used the [VSCodeVim](https://github.com/VSCodeVim/Vim) plugin in my previous futile attempts in moving to the Vim workflow. It works great, but what piqued my interest (and sent me back down this rabbit hole) in Vim again was finding [Neovim](https://neovim.io/).

![Neovim](https://dev-to-uploads.s3.amazonaws.com/i/kmgbcarm1ajfshi0k1ji.png)


I hadn't used Neovim and proceeded to download the GUI app. After seeing how rich the feature set is and the extensive plugin library it started to appeal to me as it didn't feel like I was comprising vs using VSCode. In researching it further I found the [Neovim Extension](https://marketplace.visualstudio.com/items?itemName=asvetliakov.vscode-neovim) which seemed to be what [VSCodeVim](https://github.com/VSCodeVim/Vim) is to [Vim](https://www.vim.org/), but it was much more.

![Neovim Extension](https://dev-to-uploads.s3.amazonaws.com/i/a4f8jscf7k54nve9vibi.png)

- [VSCodeVim](https://github.com/VSCodeVim/Vim) works by emulating Vim in VSC 
- [Neovim Extension]
(https://marketplace.visualstudio.com/items?itemName=asvetliakov.vscode-neovim) differs in that it's communicating with a real instance of Neovim via its API. 

This gives us the best of both worlds, not only is it really fast ⚡ but we now have the full feature sets (almost) of both editors.

For more info on the [Neovim Extension](https://marketplace.visualstudio.com/items?itemName=asvetliakov.vscode-neovim) extension and how to get it up and running see Chris@Machine's [Blog](https://www.chrisatmachine.com/Neovim/22-vscodium-neovim/) and Video which really helped me get going.

{% youtube g4dXZ0RQWdw %}

An interesting feature of [VSCodeVim](https://github.com/VSCodeVim/Vim) is that you can change the status bar colour based on what mode you are in. This is handy with VSC's status bar being quite small, especially on high res monitors:

![High Res](https://dev-to-uploads.s3.amazonaws.com/i/0d4gc0c2jf16z29nws86.png)

*Yes I know I can zoom in* 😛 

I couldn't find a solution to this functionality for [Neovim](https://marketplace.visualstudio.com/items?itemName=asvetliakov.vscode-neovim). This problem paired with my interest to finally make a VSC extension is why I created [NeoVim UI Modifier](https://marketplace.visualstudio.com/items?itemName=JulianIaquinandi.nvim-ui-modifier).

![Neovim theme modifier](https://dev-to-uploads.s3.amazonaws.com/i/wo6bt81z7b2q93eibj51.png)

It takes changing the colour of the status bar one step further by changing the colour of a few key UI elements:

Statusbar + Panel outline: ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/wy08lwqavea78kpzjk83.png)

Sidebar icons: ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/jrpgwado3log2eyftlj7.png)

Cursor + Tab underline: ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/up5uaqa8y53z45b383yw.png)

It currently supports picking colours for Normal, Insert and Visual mode; 

![Neovim theme modifier gif](https://dev-to-uploads.s3.amazonaws.com/i/7qy1sd8yxd3lgd6qg6k5.gif)

I'm looking to expand this to Replace and Search modes as my Vim knowledge grows, there have been a few unsuccessful attempts so far. If you have any ideas please let me know/create a pull request: [Github](https://github.com/kensleDev/vscode-nvim-ui).

By default the colours used are to match the theme I use [Cobalt2](https://github.com/wesbos/cobalt2-vscode) by 

{% user wesbos %}

 and have done for over a year now! To make sure it works for your theme you can change to colours in settings.json:

![settings.json](https://dev-to-uploads.s3.amazonaws.com/i/wcozljqur5f9acbivi18.png)

I'm open to any feedback so if you use NeoVim for VSCode please give it a try! 

Available in the VSC marketplace, search for: Neovim 

or click [Here](https://github.com/kensleDev/vscode-nvim-ui)