Highlight colors within Neovim
![Background highlights for hex, rgb, hsl, named colors, and CSS variables](https://private-user-images.githubusercontent.com/1474821/313786646-d99a800c-0ea9-44f9-bc1c-986236adf44a.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjY1ODM4NjEsIm5iZiI6MTcyNjU4MzU2MSwicGF0aCI6Ii8xNDc0ODIxLzMxMzc4NjY0Ni1kOTlhODAwYy0wZWE5LTQ0ZjktYmMxYy05ODYyMzZhZGY0NGEucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDkxNyUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA5MTdUMTQzMjQxWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9ZGY5NTM4ODE2OTMzZjRkODlhYjI1NmUwN2Q4MGI4YTI0ZWNlNWYyODJkOTIzMWQwOWViZWZiOTBkOGVkMzMyNCZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.5jTKJjWNP2v8tx1BFfXNiAUYzt2GxSD3DueYowakYyM)
- Realtime color highlighting
- Supports hex, rgb, hsl, CSS variables, and Tailwind CSS
- LSP support! For any LSP that supports
textDocument/documentColor
like tailwindcss - Multiple rendering modes: background, foreground, and virtual text
Install via your preferred package manager:
'brenoprata10/nvim-highlight-colors'
Initialize the plugin:
-- Ensure termguicolors is enabled if not already
vim.opt.termguicolors = true
require('nvim-highlight-colors').setup({})
require("nvim-highlight-colors").setup {
---Render style
---@usage 'background'|'foreground'|'virtual'
render = 'background',
---Set virtual symbol (requires render to be set to 'virtual')
virtual_symbol = 'โ ',
---Highlight named colors, e.g. 'green'
enable_named_colors = true,
---Highlight tailwind colors, e.g. 'bg-blue-500'
enable_tailwind = false,
---Set custom colors
---Label must be properly escaped with '%' to adhere to `string.gmatch`
--- :help string.gmatch
custom_colors = {
{ label = '%-%-theme%-primary%-color', color = '#0f1219' },
{ label = '%-%-theme%-secondary%-color', color = '#5a5d64' },
}
}
Examples shown use
enable_tailwind = true
Background
![Background highlights for named colors, CSS variables, and Tailwind CSS colors](https://private-user-images.githubusercontent.com/1474821/313771591-bf8c0d2d-552c-485a-aeba-b3d281c8c333.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjY1ODM4NjEsIm5iZiI6MTcyNjU4MzU2MSwicGF0aCI6Ii8xNDc0ODIxLzMxMzc3MTU5MS1iZjhjMGQyZC01NTJjLTQ4NWEtYWViYS1iM2QyODFjOGMzMzMucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDkxNyUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA5MTdUMTQzMjQxWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9MGQxOTdlOGE2ZGUwMTdkMDM2NzcyODQzMWNkNzFmYmUzODEzOTU3ZGNhMGY5MDdjZTM4NTY1YzRkMTM0MDk0NyZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.pyAd7LcsVXPqDG7SgWxsvNAmKkpEETHunwPv_3RR25Y)
Foreground
![Foreground highlights for named colors, CSS variables, and Tailwind CSS colors](https://private-user-images.githubusercontent.com/1474821/313771551-4e2e9c7d-552b-4558-ab79-4fe37738f869.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjY1ODM4NjEsIm5iZiI6MTcyNjU4MzU2MSwicGF0aCI6Ii8xNDc0ODIxLzMxMzc3MTU1MS00ZTJlOWM3ZC01NTJiLTQ1NTgtYWI3OS00ZmUzNzczOGY4NjkucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDkxNyUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA5MTdUMTQzMjQxWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9MGZiNDE5ZWI3N2RmMjczMWIxNjVkNjU3ZDEzMDNkZmU2N2RiMzVjMDYxZDMzMDY5NDg2MWVkYWIzN2FmZDc5ZSZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.G6gDblkrH150EnPnyuyON_v5QG1pwmuqFXUO4Jk0FdE)
Virtual text
![Virtual text highlights for named colors, CSS variables, and Tailwind CSS colors](https://private-user-images.githubusercontent.com/1474821/313771534-536b16e4-04ad-4ede-95f5-c1855386c294.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjY1ODM4NjEsIm5iZiI6MTcyNjU4MzU2MSwicGF0aCI6Ii8xNDc0ODIxLzMxMzc3MTUzNC01MzZiMTZlNC0wNGFkLTRlZGUtOTVmNS1jMTg1NTM4NmMyOTQucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDkxNyUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA5MTdUMTQzMjQxWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9ZWNlYTg4NTRmN2U4N2Y0OGUxOWE4MDFmOTY4OWNiMDllN2Q1YTc4ZTUwOWYwMzNiOTM5YWMxYzgzYmRjYWNlNSZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.qpy3DfRwUYIXKCjgMNEz6kXX_0u1nHbFUeKYnO6kd9Q)
Command | Description |
---|---|
:HighlightColors On |
Turn highlights on |
:HighlightColors Off |
Turn highlights off |
:HighlightColors Toggle |
Toggle highlights |
Commands are also available in lua:
require("nvim-highlight-colors").turnOn()
require("nvim-highlight-colors").turnOff()
require("nvim-highlight-colors").toggle()