catppuccin / vscode

🦌 Soothing pastel theme for VSCode & Azure Data Studio

Home Page:https://marketplace.visualstudio.com/items?itemName=Catppuccin.catppuccin-vsc-pack

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Improve JS keyword highlight

LatenPath opened this issue · comments

Some keyword as null, NaN, undefined,.. are special syntaxs. It's also possible that I'm missing a few special keywords
Currently:
image

As you can see, they are same color with switch case, class,... keywords.
So I suggest we change their colors:
image

    "textMateRules": [
      {
        "scope": "constant.language.null.js",
        "settings": {
          "foreground": "#d3b28d"
        }
      },
      {
        "scope": "constant.language.undefined.js",
        "settings": {
          "foreground": "#d3b28d"
        }
      },
      {
        "scope": "constant.language.nan.js",
        "settings": {
          "foreground": "#d3b28d"
        }
      },

And another thing for improve JSDoc and this keyword:
Currently:
image

As you can see, parameter and in-method parameter have red color, so I think JSDoc variable should match color too. Also, this will better if use keyword color:
image

      {
        "scope": "variable.language.this.js",
        "settings": {
          "foreground": "#cba6f7"
        }
      },
    {
        "scope": "variable.other.jsdoc",
        "settings": {
          "foreground": "#EBA0AC"
        }
      },
      ```
Before After
image image
Settings
 {
 "editor.semanticTokenColorCustomizations": {
    "[Catppuccin Mocha]": {
      "rules": {
        "variable.defaultLibrary": {
          "foreground": "#00fab7",
          "fontStyle": "italic"
        }
      }
    }
  }
 }
 {
   "editor.tokenColorCustomizations": {
    "textMateRules": [
      {
        "name": "One Dark italic",
        "scope": [
          "variable.other.jsdoc",
          "storage.modifier.async.js",
          "storage.type.js",
          "storage.type.class.js",
          "storage.modifier.js",
          "keyword.control.flow.js",
          "keyword.control.export.js",
          "keyword.control.import.js",
          "keyword.control.from.js",
          "keyword.control.loop.js"
        ],
        "settings": {
          "fontStyle": "italic"
        }
      },
      {
        "scope": ["keyword.operator.new.js"],
        "settings": {
          "fontStyle": "italic bold"
        }
      },
      //
      {
        "scope": [
          "constant.language.null.js",
          "constant.language.undefined.js",
          "constant.language.nan.js"
        ],
        "settings": {
          "foreground": "#d3b28d"
        }
      },
      {
        "scope": [
          "variable.language.this.js",
          "keyword.operator.expression.typeof.js"
        ],
        "settings": {
          "foreground": "#cba6f7",
          "fontStyle": "italic"
        }
      },
      {
        "scope": ["variable.other.object.property.js"],
        "settings": {
          "foreground": "#f9e2af"
        }
      },
      {
        "scope": ["variable.other.property.js", "support.variable.property.js"],
        "settings": {
          "foreground": "#dedede"
        }
      },
      {
        "scope": ["constant.language.boolean.true.js"],
        "settings": {
          "foreground": "#00FAB7"
        }
      },
      {
        "scope": ["constant.language.boolean.false.js"],
        "settings": {
          "foreground": "#EBA0AC"
        }
      }
    ]
  }
 }