Nvim UI+

Nvim UI+ - Neovim mode indicator for VSCode

What's this?

Hey there! Nvim UI+ takes your VSCode Neovim experience to the next level by making the UI adapt to your current Vim mode. Think of it as mood lighting for your editor - different colors for different modes so you always know where you are.

Cool Stuff It Does

• 🌈 UI that knows your mode: VSCode's interface changes color based on your Neovim mode
• 📊 Mode indicator that pops: The status bar shows your current mode with neat icons and colors
• ⚙️ Make it yours: Pick which UI bits change and choose your own colors
• 🔄 Instant feedback: See changes immediately when switching between modes

Before You Install

• You need the VSCode Neovim extension installed

Getting Started

1. Grab the VSCode Neovim extension
2. Install this extension (Nvim UI+)
3. Add a bit of Lua to your Neovim config (see below)
4. Restart VSCode and enjoy!

Neovim Config Setup

Add this to your Neovim config:

-- For init.lua
local vscode = require("vscode")

local function notify_vscode_mode()
    local mode = vim.api.nvim_get_mode().mode
    local mode_name = ""
    -- Convert Neovim mode to readable name
    if mode == "n" then
        mode_name = "normal"
    elseif mode == "i" then
        mode_name = "insert"
    elseif mode == "v" then
        mode_name = "visual"
    elseif mode == "V" then
        mode_name = "visual"
    elseif mode == "\22" then
        mode_name = "visual"
    elseif mode == "c" then
        mode_name = "cmdline"
    elseif mode == "R" then
        mode_name = "replace"
    else
        mode_name = mode
    end
    --  Call VSCode extension to update UI asynchronously
    vscode.action("nvim-ui-plus.setMode", {
        args = { mode = mode_name }
    })
end

-- Mode change notification autocmd
vim.api.nvim_create_autocmd("ModeChanged", {
    pattern = "*",
    callback = notify_vscode_mode,
})

Tweaking to Your Taste

You can customize everything through VSCode settings:

Mode Colors

Set your own colors for each mode (defaults to Catppuccin colors):

🎨 Catppuccin Mocha Colors

Mode	Color	Hex	Preview
Normal	Teal	#94E2D5
Insert	Sapphire	#74C7EC
Visual	Mauve	#CBA6F7
Replace	Maroon	#EBA0AC
Command	Peach	#FAB387

How It Works

The extension listens for mode changes from Neovim, then updates VSCode's interface accordingly. Your Neovim config sends mode information to VSCode, and we handle the rest!

License

MIT License