DEV Community

Cover image for VSCode Neovim Theme Modifier 🎨
coding_with_ju
coding_with_ju

Posted on

VSCode Neovim Theme Modifier 🎨

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

Over the years I've tried my hardest to get into Vim. 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 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.

Neovim

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 which seemed to be what VSCodeVim is to Vim, but it was much more.

Neovim Extension

  • VSCodeVim works by emulating Vim in VSC
  • Neovim Extension 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 extension and how to get it up and running see Chris@Machine's Blog and Video which really helped me get going.

An interesting feature of VSCodeVim 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

Yes I know I can zoom in 😛

I couldn't find a solution to this functionality for Neovim. This problem paired with my interest to finally make a VSC extension is why I created NeoVim UI Modifier.

Neovim theme modifier

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

Sidebar icons: Alt Text

Cursor + Tab underline: Alt Text

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

Neovim theme modifier 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.

By default the colours used are to match the theme I use Cobalt2 by

wesbos image

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

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

Discussion (0)