CODEWITHSUNDEEP
pythonvariablesvisual-studio-codesettingssyntax-highlighting
Jannis
Jannis

Reputation: 63

VS Code: Change color of variables?

I use VS Code, and wanted to change the color of the variables in Python code. I read that I have to add

"editor.tokenColorCustomizations": {
        "variables": "#ff0000",
    }

to the settings.json file. I've added it to the settings.json in my open folder, and also tried to append it to the global settings.json file. But none of it worked.

Now I don't know what else to try. Does anyone know how to do it?

EDIT:

Here is the code from the local json file:

{
    "python.pythonPath": "C:\\Users\\JannR\\AppData\\Local\\Programs\\Python\\Python39\\python.exe",
    "workbench.colorCustomizations": {
        "activityBar.background": "#131a29",
        "titleBar.activeBackground": "#A4BD00",
        "titleBar.activeForeground": "#000000",
        "titleBar.inactiveBackground": "#c4d16e",
        "titleBar.inactiveForeground": "#000000",
        "minimapSlider.background": "#a4bd003a",
        "minimapSlider.hoverBackground": "#a4bd004d",
        "minimapSlider.activeBackground": "#a4bd0060",
        "scrollbarSlider.hoverBackground": "#a4bd001f",
        "scrollbarSlider.activeBackground": "#a4bd0033",
        "scrollbarSlider.background": "#a4bd000e",
        "editorGroup.border": "#A4BD00",
        "editorGroup.dropBackground": "#a4bd0060",
        "editorGroupHeader.tabsBorder": "#a4bd0060",
        "tab.activeBackground": "#a4bd002a",
        "tab.activeBorder": "#000000",
        "tab.unfocusedActiveForeground": "#5b6350",
    },
    "editor.tokenColorCustomizations": {
        "variables": "#ff0000",
    }
}

And here from the global:

{
    "workbench.editorAssociations": {
        "*.ipynb": "jupyter-notebook"
    },
    "tabnine.experimentalAutoImports": true,
    "editor.cursorStyle": "block-outline",
    "workbench.iconTheme": "vscode-icons",
    "vsicons.dontShowNewVersionMessage": true,
    "auto-close-tag.fullMode": true,
    "auto-close-tag.SublimeText3Mode": true,
    "liveServer.settings.donotVerifyTags": true,
    "liveServer.settings.donotShowInfoMsg": true,
    "prettier.singleQuote": true,
    "explorer.confirmDelete": false,
    "python.pythonPath": "C:\\Users\\JannR\\AppData\\Local\\Programs\\Python\\Python39\\python.exe",
    "explorer.confirmDragAndDrop": false,
    "workbench.startupEditor": "newUntitledFile",
    "[python]": {
    
        "editor.wordBasedSuggestions": false
    },
    "python.showStartPage": false,
    "workbench.tips.enabled": false,
    "notebook.cellToolbarLocation": {
        "default": "right",
        "jupyter-notebook": "left"
    },
    "python.defaultInterpreterPath": "C:\\Users\\JannR\\AppData\\Local\\Programs\\Python\\Python39\\python.exe",
    "workbench.colorTheme": "FireFly Pro",
    "window.title": "${activeEditorShort} - ${folderName} - ${appName}",
    "workbench.colorCustomizations": {
    

        "titleBar.activeBackground": "#0000ff",
    },
    "editor.tokenColorCustomizations": {
        "variables": "#ff0000",
    },
    "vs-color-picker.autoLaunchDelay": 10,
    "windowColors.🌈 DeleteSettingsFileUponExit": true
}

EDIT V2:

Screenshot of variable description

Upvotes: 3

Views: 4808

Answers (2)

Said Torres
Said Torres

Reputation: 653

Your theme does not support the python highlighter syntaxes, to enable it you have to add the following to your settings.json (Ctrl + , to open it):

settings.json:

{
  "editor.semanticHighlighting.enabled": true
}

Notice that when you open or paste code, it may take a moment to the editor to update the colors, so be patient.

Source: https://code.visualstudio.com/api/language-extensions/semantic-highlight-guide

Upvotes: 2

Steven-MSFT
Steven-MSFT

Reputation: 8411

Could have a check like this? It works well on my computer.

enter image description here

enter image description here

Update:

You are using the theme of FireFly Pro. The "variables": "#ff0000" seems to not work, while it will work when using some other themes. This is because when you are using a different color theme, the variable is under a different scope.

For example:

The theme of Dark+(Open the Command Palette: Inspect Editor Tokens and Scopes):

enter image description here

The theme of FireFly Pro:

enter image description here

So if you want to modify it under FireFly Pro color theme, you can customize it like this:

"editor.tokenColorCustomizations": {
        "textMateRules": [
          {
            "scope":"source.python",
            "settings": {
              "foreground": "#00fff2",
              "fontStyle": "bold"
            }
          }
        ]
      },

Upvotes: 7

Related Questions