roobert / tailwindcss-colorizer-cmp.nvim

:rainbow: A Neovim plugin to add vscode-style TailwindCSS completion to nvim-cmp
323 stars 3 forks source link

Missing color on hover state #14

Open diegoulloao opened 9 months ago

diegoulloao commented 9 months ago

Color is missed when hovering inside the cmp box. I'm using the minimal configuration for this plugin.

nvim version: 0.9.4 os: macOs Sonoma iTerm2

https://github.com/roobert/tailwindcss-colorizer-cmp.nvim/assets/45423661/68c2ab40-aed5-4417-bfdc-7af186e782e5

My nvim-cmp config:

cmp.setup({
  window = {
    completion = {
      border = "rounded",
      -- custom colors
      winhighlight = "Normal:Normal,FloatBorder:BorderBG,CursorLine:CursorLineBG,Search:None",
    },
    documentation = {
      border = "rounded",
      -- custom colors
      winhighlight = "Normal:Normal,FloatBorder:BorderBG,CursorLine:CursorLineBG,Search:None",
    },
  },
  snippet = {
    expand = function(args)
      luasnip.lsp_expand(args.body)
    end,
  },
  mapping = cmp.mapping.preset.insert({
    ["<C-k>"] = cmp.mapping.select_prev_item(), -- select previous suggestion
    ["<S-tab>"] = cmp.mapping.select_prev_item(), -- select previous suggestion (2)
    ["<C-j>"] = cmp.mapping.select_next_item(), -- select next suggestion
    ["<tab>"] = cmp.mapping.select_next_item(), -- select next suggestion (2)
    ["<C-l>"] = cmp.mapping.scroll_docs(-4), -- scroll docs down
    ["<C-h>"] = cmp.mapping.scroll_docs(4), -- scroll docs up
    ["<C-e>"] = cmp.mapping.abort(), -- close completion window
    ["<C-Space>"] = cmp.mapping.complete(), -- show completion suggestions
    ["<CR>"] = cmp.mapping.confirm({ select = false }), -- confirm suggestion
  }),
  sources = cmp.config.sources({
    { name = "nvim_lsp" }, -- lsp
    { name = "luasnip" }, -- luasnips
    { name = "buffer" }, -- text within the current buffer
    { name = "path" }, -- file system paths
  }),
  formatting = {
    -- vscode like icons for cmp autocompletion
    format = lspkind.cmp_format({
      maxwidth = 50,
      ellipsis_char = "...",
      -- prepend tailwindcss-colorizer
      before = tailwindcss_colorizer_cmp.formatter,
    }),
  },
})

-- alias for formatting
local f = string.format

-- nvim-cmp custom colors
vim.cmd(f([[ hi! BorderBG guibg=NONE guifg=%s ]], palette.primary))
vim.cmd(f([[ hi! CursorLineBG guibg=%s guifg=%s ]], palette.primary, palette.dark))

My full nvim config: https://github.com/diegoulloao/nvim-diegoulloao

isak102 commented 6 months ago

Did you manage to fix this? I have the same issue

fnune commented 6 months ago

The involved highlight is PmenuSel. You can run this:

:highlight PmenuSel

It will return something like this:

image

If your theme sets PmenuSel with a foreground color, like guifg=some-color, then that wil override the colors set by this plugin.

To fix it, use a background only. In my case, I've set a group override for the vscode theme:

       vscode.setup({
         disable_nvimtree_bg = true,
         group_overrides = {
           ["@comment"] = { fg = colors.vscGray },
           ["Comment"] = { fg = colors.vscGray },
           ["SpecialComment"] = { fg = colors.vscGray },
           ["Pmenu"] = { fg = colors.vscPopupFront, bg = "NONE" },
+          ["PmenuSel"] = { fg = "NONE", bg = colors.vscPopupHighlightBlue },
         },
       })

Note that I've set fg to NONE.