Home

Awesome

document-color.nvim 🌈

A colorizer plugin for tailwindcss and any lsp servers that support textDocument/documentColor!

For example tailwindcss, cssls, and dart support documentColor!

document-color.nvim demo

Installation & Usage

use { 'mrshmllow/document-color.nvim', config = function()
  require("document-color").setup {
    -- Default options
    mode = "background", -- "background" | "foreground" | "single"
  }
  end
}
<details> <summary>What is "single" mode?</summary> <br>

For people who don't like large bright chunks of their buffer un-colorschemed, single column mode is a compromise until anti-conceal.

"single" mode

</details> <details> <summary>What does foreground mode look like?</summary> <br>

image

</details>

For a typical lspconfig setup...

local on_attach = function(client)
  ...
  if client.server_capabilities.colorProvider then
    -- Attach document colour support
    require("document-color").buf_attach(bufnr)
  end
  ...
end

local capabilities = vim.lsp.protocol.make_client_capabilities()

-- You are now capable!
capabilities.textDocument.colorProvider = {
  dynamicRegistration = true
}

-- Lsp servers that support documentColor
require("lspconfig").tailwindcss.setup({
  on_attach = on_attach,
  capabilities = capabilities
})

Methods

-- Toggle in current buffer
require("document-color").buf_toggle()

-- Attach to the current buffer (Turn on)
require("document-color").buf_attach()

-- Detach from current buffer (Turn off)
require("document-color").buf_detach()

Tips & Tricks

-- Colorize
use { 'norcalli/nvim-colorizer.lua', config = function ()
  require('colorizer').setup({
    '*';
    -- An example
    '!css';
    '!html';
    '!tsx';
    '!dart';
  })
end }

Notes

🔮 A future...

When (or if) anti-conceal ever gets merged, it may be possible to have something like the tailwindcss vscode extension has

image

for now, we only have mode = "single"

Credits