Differences between monokai pro on vscode

[kaykhan]

Hi, i just wanted to point out some differences i noticed between the monokai pro theme on vscode and this neovim theme.

My goal is to be able to modify/ovveride this theme to match it a little better.

1. Unused variables/imports: Is there a way to gray out the unused variables and imports like in vscode, rather than adding a blue squigly line like in this theme?
2. Color of export/async/await: In vscode monokai pro these key words are in red, where as in this theme they are blue, is there some way i can change that?

screenshot (left: neovim, right: vscode)

my current ovverides

override = function()
	return {
		Normal = { bg = "#121212" },
		DiagnosticVirtualTextError = { bg = "none" },
		DiagnosticVirtualTextInformation = { bg = "none" },
		DiagnosticVirtualTextWarning = { bg = "none" },
		DiagnosticVirtualTextHint = { fg = "Gray", bg = "none" },
		DiagnosticSignHint = { fg = "Gray" },
	}
end,

[loctvl842]

Unused variables/imports: Is there a way to gray out the unused variables and imports like in vscode, rather than adding a blue squigly line like in this theme?

If you want to blur unused variable, you can try to install some plugin to do that. Because I can't detect the current color of unused variable, I just want to blur according to the current color of the variable (like the way vscode is doing), not just blur to gray.

Color of export/async/await: In vscode monokai pro these key words are in red, where as in this theme they are blue, is there some way i can change that?

There maybe some differences between vscode and neovim because some highlight groups neovim has while vscode doesn't and vice versa. Trust me, I tried a lot, don't waste your time to figure this out.

[kaykhan]

Unused variables/imports: Is there a way to gray out the unused variables and imports like in vscode, rather than adding a blue squigly line like in this theme?

If you want to blur unused variable, you can try to install some plugin to do that. Because I can't detect the current color of unused variable, I just want to blur according to the current color of the variable (like the way vscode is doing), not just blur to gray.

Color of export/async/await: In vscode monokai pro these key words are in red, where as in this theme they are blue, is there some way i can change that?

There maybe some differences between vscode and neovim because some highlight groups neovim has while vscode doesn't and vice versa. Trust me, I tried a lot, don't waste your time to figure this out.

Hi thanks for your response.

1. Do you know waht i need to override to get it to go gray+italic for unused variables. I'd be happy with that.

e.g

(current sonokai theme)

2. with regards to await/async, i may try to find a way to just target the specific word "async" and "await" and make them red.

[kaykhan]

@octvl842 Any ideas?

[loctvl842]

1. Do you know waht i need to override to get it to go gray+italic for unused variables. I'd be happy with that.

You can change highlight of DiagnosticUnecessary

2. with regards to await/async, i may try to find a way to just target the specific word "async" and "await" and make them red.

You can change highlight of @keyword.coroutine.javascript

[maxpetretta]

adding my own config overrides here, in case it can help other neovim noobs (like myself), make the transition:

note: primarily made for jsx/tsx usage, so ymmv

./nvim/lua/plugins/monokai-pro.lua

return {
  {
    "loctvl842/monokai-pro.nvim",
    opts = {
      override = function(c)
        return {
          Structure = { italic = false }, -- interface identifiers
          ["@keyword.function"] = { bold = false }, -- "function"
          ["@keyword.overrides"] = { fg = c.base.cyan, italic = true }, -- custom capture group for "const", "let", "type"
          ["@keyword.type"] = { fg = c.base.cyan, italic = true }, -- "interface"
          ["@keyword"] = { fg = c.base.red, italic = false }, -- "if", "else", "for", "while"
          ["@lsp.type.enumMember"] = { fg = c.base.white }, -- enums
          ["@lsp.typemod.function.defaultLibrary"] = { fg = c.base.green }, -- global functions
          ["@lsp.typemod.variable.defaultLibrary"] = { fg = c.base.white }, -- global objects
          ["@lsp.typemod.variable.readonly"] = { fg = c.base.white }, -- constant identifiers
          ["@punctuation.bracket"] = { fg = c.base.dimmed2 }, -- brackets
          ["@tag.builtin"] = { fg = c.base.red }, -- HTML tags
          ["@type"] = { fg = c.base.white }, -- imported objects
          ["@variable.member"] = { fg = c.base.white }, -- object properties
        }
      end,
    },
  },
}

./nvim/queries/tsx/highlights.scm

[
  "const"
  "let"
  "type"
] @keyword.overrides
["?"] @operator.overrides

./nvim/lua/plugins/treesitter.lua

return {
  "nvim-treesitter/nvim-treesitter",
  opts = {
    highlight = {
      set_custom_captures = {
        ["@keyword.overrides"] = "@keyword.function",
        ["@operator.overrides"] = "@keyword.conditional",
      }
    }
  }
}