Please add colors to tsx files

[idelice]

Question or Suggestion

The colors in a tsx file (react + typescript) looks very dull and "empty".

Please add support for this.

Example

[scottmckendry]

Looks fine on my side of things:

Do you have the tsx grammar installed? (:TSInstall tsx)

[idelice]

Yes I have

[idelice]

[scottmckendry]

It looks like you may have some color overrides making it look a little weird. The yellow html tags don't look default.... Can you share your cyberdream.nvim config?

[idelice]

Oh yeah.. I've been working with java for so long that I had to reset some highlights due to conflicts with my own custom ones that I've forgotten that it messed up my other highlights.

return {
  "scottmckendry/cyberdream.nvim",
  lazy = false,
  priority = 1000,
  config = function()
    require("cyberdream").setup({
      -- Recommended - see "Configuring" below for more config options
      transparent = true,
      italic_comments = true,
      hide_fillchars = true,
      borderless_telescope = false,
      terminal_colors = true,
      theme = {
        -- variant = "light",
        highlights = {
          CursorLineNr = { fg = "#ff9e64", style = "bold" },
          MiniFilesBorder = { fg = "#ff9e64" },
          Type = { fg = "NONE", bg = "NONE" },
          Keyword = { fg = "NONE", bg = "NONE"},
          TelescopeBorder = { fg = "#ff9e64" },
          IndentLineCurrent = { fg = "#7b8496"},
          MiniIndentscopeSymbol = { fg = "#7b8496"},
        },
      },
    })
    vim.cmd("colorscheme cyberdream") -- set the colorscheme
  end,
}

I had to reset Keyword and Type here because of custom java highlighting. Is there a way to only reset those two for java files and keep the default for everything else?

[scottmckendry]

Yes, you can achieve this with autocmds. Here's my config where I got it working:

return {
    {
        "scottmckendry/cyberdream.nvim",
        dev = true,
        lazy = false,
        priority = 1000,
        config = function()
            require("cyberdream").setup({
                transparent = true,
                italic_comments = true,
                hide_fillchars = true,
                terminal_colors = false,
                borderless_telescope = { border = false, style = "flat" },
                theme = {
                    variant = "auto",
                    overrides = function(colours)
                        return {
                            TelescopePromptPrefix = { fg = colours.blue },
                            TelescopeMatching = { fg = colours.cyan },
                            TelescopeResultsTitle = { fg = colours.blue },
                            TelescopePromptCounter = { fg = colours.cyan },
                            TelescopePromptTitle = { fg = colours.bg, bg = colours.blue, bold = true },
                        }
                    end,
                },
            })

            vim.cmd("colorscheme cyberdream")
            vim.api.nvim_set_keymap("n", "<leader>tt", ":CyberdreamToggleMode<CR>", { noremap = true, silent = true })
            vim.api.nvim_create_autocmd("User", {
                pattern = "CyberdreamToggleMode",
                callback = function(ev)
                    print("Switched to " .. ev.data .. " mode!")
                end,
            })

            vim.api.nvim_create_autocmd("BufEnter", {
                pattern = "*.java",
                callback = function()
                    -- Disable some syntax highlighting for Java files
                    vim.api.nvim_command("highlight Keyword guifg=NONE")
                    vim.api.nvim_command("highlight Type guifg=NONE")
                end,
            })

            vim.api.nvim_create_autocmd("BufLeave", {
                pattern = "*.java",
                callback = function()
                    -- Re-enable syntax highlighting for Java files - Linking to existing groups with the same original highlighting
                    vim.api.nvim_command("highlight link Keyword Number")
                    vim.api.nvim_command("highlight link Type Operator")
                end,
            })
        end,
    },
}

The last two autcmd definitions are what you want. The first one detects when you enter a file with the extension .java and removes the highlighting for those two groups.

The second one adds them back again when you move to another buffer. It does this by linking them to two pre-existing groups that have the same default highlights. This is a bit of a hack but it works really well from my testing.

[idelice]

These two did the trick. Thank you!

vim.api.nvim_create_autocmd("BufEnter", {
                pattern = "*.java",
                callback = function()
                    -- Disable some syntax highlighting for Java files
                    vim.api.nvim_command("highlight Keyword guifg=NONE")
                    vim.api.nvim_command("highlight Type guifg=NONE")
                end,
            })

            vim.api.nvim_create_autocmd("BufLeave", {
                pattern = "*.java",
                callback = function()
                    -- Re-enable syntax highlighting for Java files - Linking to existing groups with the same original highlighting
                    vim.api.nvim_command("highlight link Keyword Number")
                    vim.api.nvim_command("highlight link Type Operator")
                end,
            })

[idelice]

Hi @scottmckendry

Sorry to revive this issue again, but I have a small problem with the solution you've provided.

The issue is that when I let's say open trouble symbols and navigate through the lsp list or use lsp hover on a piece of code, the highlighting is switching back to the original due to that autocmd command you provided

 vim.api.nvim_create_autocmd("BufLeave", {
                pattern = "*.java",
                callback = function()
                    -- Re-enable syntax highlighting for Java files - Linking to existing groups with the same original highlighting
                    vim.api.nvim_command("highlight link Keyword Number")
                    vim.api.nvim_command("highlight link Type Operator")
                end,
            })

Is there a better fix for this? I want to keep these two consistent as long as I'm viewing java stuff.

  vim.api.nvim_command("highlight Keyword guifg=NONE")
  vim.api.nvim_command("highlight Type guifg=NONE")

[scottmckendry]

You could remove this auto command altogether. It's only necessary for re-enabling highlights in the current session. So if you're not working with Java and TypeScript files simultaneously, that shouldn't be an issue.

However, if your stack is requiring you to work with both at the same time, you could modify the event and pattern so that it captures .tsx and any other file types you may need to interact with inside the same session.

For example:

vim.api.nvim_create_autocmd("BufEnter", {
    pattern = "*.java",
    callback = function()
        -- Disable some syntax highlighting for Java files
        print("Jave files detected. Disabling syntax highlighting for Java files.")
        vim.api.nvim_command("highlight Keyword guifg=NONE")
        vim.api.nvim_command("highlight Type guifg=NONE")
    end,
})

vim.api.nvim_create_autocmd("BufEnter", {
    pattern = { "*.tsx", "*.ts", "*.js", "*.jsx" },
    callback = function()
        -- Re-enable syntax highlighting for non-Java files.
        print("Re-enabling syntax highlighting for TypeScript and JavaScript files.")
        vim.api.nvim_command("highlight link Keyword Number")
        vim.api.nvim_command("highlight link Type Operator")
    end,
})

Feel free to remove the print statements, these are just for the sake of demoing. You can also modify the pattern table to include any other filetypes you might need these highlights on. This should prevent other buffers from bringing back the highlights.

The above config looks like this:

[idelice]

Interesting. I'll try it out and report back!