CODEWITHSUNDEEP
visual-studio-codevscode-extensionsvs-color-theme-editor
LukasA
LukasA

Reputation: 109

VS Code color theme debugging

The VS Code editor is not displaying the correct theme. Sometimes it is working and sometimes not, I could not figure out how to reproduce it. I uninstalled VS Code and installed it again but still I can not debug my own theme.

I have created a new color theme with

$ yo code

I selected new color theme and selected the blank dark one.

Now when i start the debugger, it loads a new editor with my theme. I can select it in the menu at preferences and color theme.

Then sometimes it does not apply the selected changes.

But when I delete everything from the tokenColors: [...] then it let me select the color theme again, but when I type some new themes in the tokenColors and reload it it does not apply the new styles.

My guess is that VS Code is caching the styles somewhere and does not overwrite it.

The problem is how can I develop a new color theme if I can not debug it?

How can I reload the theme? 

{
  "name": "T",
  "type": "dark",
  "colors": {
    "editorGroup.background": "#2b303b",
    "editorGroup.border": "#c0c5ce",
    "editor.background": "#2b303b",
    "editor.foreground": "#c0c5ce",
    "activityBarBadge.background": "#2b303b",
    "sideBar.background": "#1c1f26",
    "sideBar.foreground": "#c0c5ce",
    "list.hoverBackground": "#2b303b",
    "list.hoverForeground": "#c0c5ce",
    "list.activeSelectionForeground": "#c0c5ce",
    "list.inactiveSelectionForeground": "#c0c5ce",
    "list.activeSelectionBackground": "#2b303b",
    "list.inactiveSelectionBackground": "#2b303b",
    "sideBarTitle.foreground": "#c0c5ce",
    "sideBarSectionHeader.background": "#2b303b",
    "statusBar.background": "#1c1f26",
    "statusBar.foreground": "#c0c5ce",
    "tab.activeBackground": "#2b303b",
    "tab.inactiveBackground": "#1c1f26",
    "terminal.background": "#2b303b",
    "activityBar.border": "#1c1f26",
    "activityBar.background": "#2b303b",
    "sideBar.border": "#1c1f26",
    "tab.activeForeground": "#c0c5ce"
  },
  "tokenColors": [
    {
      // const, let, if, else, async, await, try, catch
      "name": "j",
      "scope": [
        "storage.type.js.jsx",
        "storage.modifier.async.js.jsx",
        "keyword.control.flow.js.jsx",
        "keyword.control.conditional.js.jsx",
        "keyword.control.trycatch.js.jsx"
      ],
      "settings": {
        "foreground": "#b48ead",
        "fontStyle": "italic"
      }
    }
  ]
}

Upvotes: 3

Views: 3833

Answers (1)

Jeff Hykin
Jeff Hykin

Reputation: 2627

You can actually use the VS Code debugger.

  1. Open up the project folder in vs code.
  2. Create the .vscode/ folder if it doesn't exist
  3. Create a launch.json file inside that folder, with this inside the file
{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "extensionHost",
            "request": "launch",
            "name": "Launch Extension",
            "runtimeExecutable": "${execPath}",
            "args": [
                "--extensionDevelopmentPath=${workspaceFolder}"
            ],
            "outFiles": [
                "${workspaceFolder}/out/**/*.js"
            ],
        },
    ]
}
  1. Start the debugger (CMD/CTRL + D)
  2. Make sure to select your theme in the new window that opens up
  3. Reload the debugger after every change to the theme

Separate Issue

While the above is how to debug in general, this problem in particular might be that the new scopes being added in tokenColors are just being overridden (by higher priority scopes) and don't show up. Its hard to tell without knowing more about the situation. I do not think that VS Code is caching the changes anywhere, a full window reload should always pull from scratch.

Upvotes: 4

Related Questions