[question] How would i change typescript/javascript constants colors?

[gipo355]

Hi @sainnhe! Thank you for this amazing theme, it's insanely beautiful. I was wondering if there could be a little improvement on the typescript/javascript part.

Is there a way to color the UPPER_CASE variables and constants to the gruvbox/monokai purple?

this is the current colors (typescript), every var is white

while this is the desired output (loctvl842/monokai-pro.nvim)

While not dealbeaking, small details like those could make this the best to use in every scenario for me but i'm unfortunately not too proficient yet to implement this in lua even reading the customization :help page

if i could see how it'd get setup, i'd add all the missing ts highlights

thanks alot for your much appreciated work!

[antoineco]

You might need a LSP server with support for LSP Semantic Tokens for this.

Maybe your current server already does. Could you please move your cursor on the constant and share the output of the :Inspect command?

[gipo355]

for the constant

Treesitter
  - @variable.typescript links to Fg typescript

Semantic Tokens
  - @lsp.type.variable.typescript links to Fg priority: 125
  - @lsp.mod.declaration.typescript links to @lsp priority: 126
  - @lsp.mod.local.typescript links to @lsp priority: 126
  - @lsp.mod.readonly.typescript links to @lsp priority: 126
  - @lsp.typemod.variable.declaration.typescript links to @lsp priority: 127
  - @lsp.typemod.variable.local.typescript links to @lsp priority: 127
  - @lsp.typemod.variable.readonly.typescript links to @lsp priority: 127

Extmarks
  - IlluminatedWordRead links to CurrentWord illuminate.highlight

for a mutable variable

Treesitter
  - @variable.typescript links to Fg typescript

Semantic Tokens
  - @lsp.type.variable.typescript links to Fg priority: 125
  - @lsp.mod.declaration.typescript links to @lsp priority: 126
  - @lsp.mod.local.typescript links to @lsp priority: 126
  - @lsp.typemod.variable.declaration.typescript links to @lsp priority: 127
  - @lsp.typemod.variable.local.typescript links to @lsp priority: 127

Extmarks
  - IlluminatedWordRead links to CurrentWord illuminate.highlight

here it is! <3

looks like it's possible, monokai-pro implemented it somehow as in the second pic above

[antoineco]

Thanks!

Please try adding this to you Neovim config:

-- Apply custom highlights on colorscheme change.
-- Must be declared before executing ':colorscheme'.
local grpid = vim.api.nvim_create_augroup('custom_highlights_gruvboxmaterial', {})
vim.api.nvim_create_autocmd('ColorScheme', {
  group = grpid,
  pattern = 'gruvbox-material',
  callback = function()
    local function hl_lnk(src, trgt)
      vim.api.nvim_set_hl(0, src, { link = trgt })
    end

    hl_lnk('@lsp.typemod.variable.readonly.typescript', 'Purple')
  end
})

Feel free to link to a different color than purple of course.

[gipo355]

Thank you! it works! Going to save this snippet for all the missing patterns.

Trying to define custom colors now, i guess i need to set highlight groups for them

Edit: understood how to customize everything now, many thanks to you! <3

local grpid = vim.api.nvim_create_augroup('custom_highlights_gruvboxmaterial', {})
vim.api.nvim_create_autocmd('ColorScheme', {
  group = grpid,
  pattern = 'gruvbox-material',
  callback = function()
    local function hl_lnk(src, trgt)
      vim.api.nvim_set_hl(0, src, { link = trgt })
    end
    vim.api.nvim_set_hl(0, '@lsp.type.parameter.typescript', { fg = "#b16286" })

    hl_lnk('@lsp.typemod.variable.readonly.typescript', 'Purple')
  end
})

[gipo355]

@antoineco as a last question, is there a way to set the highlight only if a combination of semTokens are present?

Pseudocode
hl_lnk('@lsp.typemod.variable.readonly.typescript && @lsp.typemod.variable.declaration.typescript', 'Purple')

and possibly when NOT present ( or override with priority )

Pseudocode
hl_lnk('!@lsp.typemod.variable.readonly.typescript && @lsp.typemod.variable.declaration.typescript', 'Purple')

[antoineco]

Not the way you suggested, no. Highlights are evaluated in the order they appear (last result wins).

You can however customize a bunch of things related to semantic tokens (and therefore apply very specific highlights) if you don't mind writing a little bit of Lua code: https://gist.github.com/swarn/fb37d9eefe1bc616c2a7e476c0bc0316#complex-highlighting

[gipo355]

Thanks, this was good enough to get me started 👍