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.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjIxMzQxMDgsIm5iZiI6MTcyMjEzMzgwOCwicGF0aCI6Ii8xNDc0ODIxLzMxMzc4NjY0Ni1kOTlhODAwYy0wZWE5LTQ0ZjktYmMxYy05ODYyMzZhZGY0NGEucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDcyOCUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA3MjhUMDIzMDA4WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9N2I4ZDZhNjkzZjNjYzVhYTliMDBjNzlmNjk3Y2Y0ODU4NmVkNTRlNjhkYmE2OGNkZmE4N2Y5YmM5ZTQwYTNiNiZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.CVNJXnJZMdD8taGqcf98esfIrTCD1YioY8guMMjlxgg)
- Realtime color highlighting
- Supports hex, rgb, hsl, CSS variables, and Tailwind CSS
- 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,
---Highlight custom tailwind colors, e.g. 'bg-your-color-200'
enable_document_color = false, -- / true
---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.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjIxMzQxMDgsIm5iZiI6MTcyMjEzMzgwOCwicGF0aCI6Ii8xNDc0ODIxLzMxMzc3MTU5MS1iZjhjMGQyZC01NTJjLTQ4NWEtYWViYS1iM2QyODFjOGMzMzMucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDcyOCUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA3MjhUMDIzMDA4WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9M2RjOTc2ZDU1NjNlNWViYWE1ZmEzMmJlZWI4OWZjNjJhZGVmZmRhNmQ0Y2NkMTdjZjhkYTAzNWIyMGIxNzNjOSZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.7oGU1vy9ZB_iJxG3QtL-uAsfaR12z736YXJfy_T6GjI)
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.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjIxMzQxMDgsIm5iZiI6MTcyMjEzMzgwOCwicGF0aCI6Ii8xNDc0ODIxLzMxMzc3MTU1MS00ZTJlOWM3ZC01NTJiLTQ1NTgtYWI3OS00ZmUzNzczOGY4NjkucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDcyOCUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA3MjhUMDIzMDA4WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9N2IzNDliZTk1OTczOTlmY2E4ZjQ2NWQ4MTBhM2NmMWMzNWMwNzE4YmZjMjhjY2M4YWQwMzdjMWZjYWI3YTU0NCZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.75JhB_LTnvIX3n6t0bM69ncgVz20DyRIOBcW7NqjDXo)
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.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjIxMzQxMDgsIm5iZiI6MTcyMjEzMzgwOCwicGF0aCI6Ii8xNDc0ODIxLzMxMzc3MTUzNC01MzZiMTZlNC0wNGFkLTRlZGUtOTVmNS1jMTg1NTM4NmMyOTQucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDcyOCUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA3MjhUMDIzMDA4WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9ZTkwZDU0NjliMzAyZTJhYzkwMzc2OTYzNjZkMjVlNjk3OTkxNmJjZDMxM2FjMWYwZmU5M2I4ZTMxY2E2MzY3YSZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.4ZdLkfbciYpYd1hrhw2bawyKiwFHmisERXGJCkMAhDY)
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()