Home > OS >  How do you generically change the colour of the text output within files in VS Code?
How do you generically change the colour of the text output within files in VS Code?

Time:04-12

This is a specific question about controlling the simple text OUTPUT in files within VS Code. For example, if you run a Jupyter Notebook file any text that is output below the cell. Another example (since it seems to default to the same colour) is the text colour that is diplayed when opening a text file in VS Code.

Here is an example. Note I am not talking about the already coloured syntax from the code, but rather the output text colour below the cell:

enter image description here

If you need further information, please let me know. Thanks!


Update:

In the settings.json file it is possible to change the background color of the Jupyter Notebook output cell by entering this setting:

"workbench.colorCustomizations": {"notebook.cellEditorBackground": ""#ffffff"}

However, there does not appear to be a notebook. style setting for the foreground text. I feel like this must be covered elsewhere in a more generic text setting.

CodePudding user response:

There are a lot of settings to do this.

Basically, each valuable "word" in VSCode are intepreted as a token. Those tokens can be classified as part of a context that in many ways we developers already know, like: "keywords", "comments", "variables", etc. Each of those have a particular setting to define it's color. The fastest and easiest way to do this change is to try finding a marketplace theme (you can find here using @category:"themes" on the search box).

With a chosen theme, or if you want to do it by yourself, you can start customizing your settings by your own way on your settings.json file. You can reach it by pressing CTRL P and writting >settings.

Here is an example configuration of customizing color for a specific theme:

"editor.tokenColorCustomizations": {
    "[Monokai]": {
        "comments": "#229977"
    },
    "[*Dark*]": {
        "variables": "#229977"
    },
    "[Abyss][Red]": {
        "keywords": "#f00"
    }
}

And here is an example of "do it by yourself" using .tmTheme file.

{
  "type": "dark",
  "colors": {
    "editor.background": "#1e1e1e",
    "editor.foreground": "#d4d4d4",
    "editorIndentGuide.background": "#404040",
    "editorRuler.foreground": "#333333",
    "activityBarBadge.background": "#007acc",
    "sideBarTitle.foreground": "#bbbbbb"
  },
  "tokenColors": "./Diner.tmTheme"
}

Note: Those examples were taken from the VSCode docs. It explains this in detail. You can find it here and if you look to do it your own, here

Also, themes aren't limitted to the tokens. You can change almost any colors in your VSCode.

CodePudding user response:

You use ANSI Color Escape codes

This will print the word Example in blue

print('An \x1b[34mExample\x1b[0m')
print('An \x1b[94mExample\x1b[0m')

CodePudding user response:

The setting that can be edited in the settings.json file is:

"workbench.colorCustomizations": {"editor.foreground": "#ffffff"}

This is the solution that I was looking for and finally found, so just updating. Thanks!

As a side note, I am suprised that there does not appear to be a specific Jupyter Notebook output cell foreground colour setting (or indeed a generic output foreground colour setting at least that I have found). Thanks!

  • Related