VS Code: Change Menu bar color

Question

I'm using VS Code, and wanted to change the color of the menu bar. With menu bar I mean the bar that contains Items like the Explorer, the search function, extensions etc. I read through the hole documentation, and only found this. But this describes another menu bar, the bar that you unfold with the Manage option.

My local settings.json file contains this:

{
    "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.selectionBackground": "#a4bd0086",
        "editor.selectionHighlightBackground": "#b8a01950",
        "editorWidget.border": "#a4bd00",
        "panelTitle.activeBorder": "#a4bd00",
    },
    "editor.tokenColorCustomizations": {
        "textMateRules": [
            {
                "scope":"source.python",
                "settings": {
                    "foreground": "#06ade0",
                    "fontStyle": "bold"
                }
            }
        ]
    },
}

and the global settings.json file this:

{
    "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",
    "window.title": "${activeEditorShort} - ${folderName} - ${appName}",
    "workbench.colorCustomizations": {
    },
    "editor.tokenColorCustomizations": {
        "textMateRules": [
            {
            "scope":"source.python",
            "settings": {
                "foreground": "#06ade0",
                "fontStyle": "bold"
            }
            }
        ]
    },
    "vs-color-picker.autoLaunchDelay": 10,
    "windowColors.🌈 DeleteSettingsFileUponExit": true,
    "workbench.colorTheme": "FireFly Pro",
    "editor.codeActionsOnSave": null
}

I'm using the FireFly Pro theme.

Now I don't know how to get the single items and the menu bar itself colored.

Thank you!

Answer 1

That is the Activity Bar. There are a few customizations for it like:

"activityBar.background": "#647c64",

and more. Just search in the colorCustomizations for activityBar.