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.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjI1NDQ1MjMsIm5iZiI6MTcyMjU0NDIyMywicGF0aCI6Ii8xNDc0ODIxLzMxMzc4NjY0Ni1kOTlhODAwYy0wZWE5LTQ0ZjktYmMxYy05ODYyMzZhZGY0NGEucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDgwMSUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA4MDFUMjAzMDIzWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9Zjg0OGRjYmUyMDk5M2M4YjY1OTJkMjI4MTc3NWFmZDVjMjBkMTJiZTU5YzkxZWZlNmZkYmU5NWFmYjZlZjU2MiZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.lC1sB8KDM_fmdtsKtpuN1XdEWdB6JNd-7hjEfExX8tk)
- 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 = '■',
---Set virtual symbol suffix (defaults to '')
virtual_symbol_prefix = '',
---Set virtual symbol suffix (defaults to ' ')
virtual_symbol_suffix = ' ',
---Set virtual symbol position()
---@usage 'inline'|'eol'|'eow'
---inline mimics VS Code style
---eol stands for `end of column` - Recommended to set `virtual_symbol_suffix = ''` when used.
---eow stands for `end of word` - Recommended to set `virtual_symbol_prefix = ' ' and virtual_symbol_suffix = ''` when used.
virtual_symbol_position = 'inline',
---Highlight hex colors, e.g. '#FFFFFF'
enable_hex = true,
---Highlight short hex colors e.g. '#fff'
enable_short_hex = true,
---Highlight rgb colors, e.g. 'rgb(0 0 0)'
enable_rgb = true,
---Highlight hsl colors, e.g. 'hsl(150deg 30% 40%)'
enable_hsl = true,
---Highlight CSS variables, e.g. 'var(--testing-color)'
enable_var_usage = true,
---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' },
}
-- Exclude filetypes or buftypes from highlighting
-- Note: terminal buffers are always excluded due to instability
exclude = {
filetypes = {},
buftypes = {},
}
}
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.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjI1NDQ1MjMsIm5iZiI6MTcyMjU0NDIyMywicGF0aCI6Ii8xNDc0ODIxLzMxMzc3MTU5MS1iZjhjMGQyZC01NTJjLTQ4NWEtYWViYS1iM2QyODFjOGMzMzMucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDgwMSUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA4MDFUMjAzMDIzWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9OGQwOTI0ZmEzNDc0NzMwZTRlYjc2NTEzOGYyNjQzM2YzMzkzMjA4OGY0NmM4MTRmZjgxNDkyN2RlMzdkNzg5MiZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.zt0TEbNQV1Cq0CjFZ9xlswcVvolaMz4brAyljm395N0)
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.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjI1NDQ1MjMsIm5iZiI6MTcyMjU0NDIyMywicGF0aCI6Ii8xNDc0ODIxLzMxMzc3MTU1MS00ZTJlOWM3ZC01NTJiLTQ1NTgtYWI3OS00ZmUzNzczOGY4NjkucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDgwMSUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA4MDFUMjAzMDIzWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9NmUzYTVhMmUwN2MzNGE4MTAyN2UxODQxODQxZDI3NTc0ZjVjNjFhYTkyMTliNDI3ZjY2Njc4NWMxMTVkNjZkNSZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.w3RFwDJ0QzGdrxR96pm3f_98_plyMTnURfGClTS9kX0)
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.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjI1NDQ1MjMsIm5iZiI6MTcyMjU0NDIyMywicGF0aCI6Ii8xNDc0ODIxLzMxMzc3MTUzNC01MzZiMTZlNC0wNGFkLTRlZGUtOTVmNS1jMTg1NTM4NmMyOTQucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDgwMSUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA4MDFUMjAzMDIzWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9NTM2MDczNDNhZTYwMTMyZTczY2MyNjIxMjdiNjljMDc5ZWZhZGE5MTIzNjNlYmI5MmFkY2M1NjI1ODliYWUzNCZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.8XHq2zjIeOMJQKGpodu2nTI8PB9GfrajOjtspY30-Io)
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()