Are there workbench.colorCustomizations variables available for components in Positron that aren't in Vscode?

[ddanieltan]

I'm currently playing around with colour customisations and for common visual elements that exist both in Vscode and Positron, I can easily find the colorCustomization variable name. For example, activityBar.background or editor.foreground.

But I can't seem to find the variable names for elements that only exist in Positron. For example, say I wanted to change the background of the "Console" tab in the SecondarySideBar.

[softwarenerd]

Hello. You can find all the Positron colors that can be customized by using:

Developer: Generate Color Theme From Current Settings

This will result in an untitled file being opened which lists all the colors that can be customized, including Positron-specific colors. Currently, the Positron-specific colors are:

"positronConsole.ansiBlack": "#000000",
"positronConsole.ansiBlue": "#0451a5",
"positronConsole.ansiBrightBlack": "#666666",
"positronConsole.ansiBrightBlue": "#0451a5",
"positronConsole.ansiBrightCyan": "#0598bc",
"positronConsole.ansiBrightGreen": "#14ce14",
"positronConsole.ansiBrightMagenta": "#bc05bc",
"positronConsole.ansiBrightRed": "#cd3131",
"positronConsole.ansiBrightWhite": "#a5a5a5",
"positronConsole.ansiBrightYellow": "#b5ba00",
"positronConsole.ansiCyan": "#0598bc",
"positronConsole.ansiGreen": "#107c10",
"positronConsole.ansiMagenta": "#bc05bc",
"positronConsole.ansiRed": "#cd3131",
"positronConsole.ansiWhite": "#555555",
"positronConsole.ansiYellow": "#949800",
"positronConsole.errorBackground": "#cd31310d",
"positronConsole.errorForeground": "#f85149",
"positronConsole.foreground": "#3b3b3b",
"positronConsole.traceBackground": "#e5e5e5",
"positronContextMenu.actionHoverBackground": "#dadada",
"positronContextMenu.background": "#ffffff",
"positronContextMenu.foreground": "#3b3b3b",
"positronContextMenu.hoverBackground": "#f2f2f2",
"positronContextMenu.separatorBackground": "#cecece",
"positronDataExplorer.background": "#ffffff",
"positronDataExplorer.border": "#61616120",
"positronDataExplorer.columnNullPercentGraphBackgroundFill": "#ea3d3d",
"positronDataExplorer.columnNullPercentGraphBackgroundStroke": "#7e94a5",
"positronDataExplorer.columnNullPercentGraphIndicatorFill": "#e5edf3",
"positronDataExplorer.contrastBackground": "#fafafa",
"positronDataExplorer.foreground": "#3b3b3b",
"positronDataExplorer.invalidFilterBackground": "#e95b5b",
"positronDataExplorer.selectionBackground": "#ececec",
"positronDataExplorer.sparklineAxis": "#b5b5b5",
"positronDataExplorer.sparklineFill": "#56a2dd",
"positronDataExplorer.sparklineStroke": "#0066b6",
"positronDataExplorer.statusIndicatorComputing": "#f6e8b1",
"positronDataExplorer.statusIndicatorDisconnected": "#b0b0b0",
"positronDataGrid.background": "#ffffff",
"positronDataGrid.border": "#61616120",
"positronDataGrid.contrastBackground": "#fafafa",
"positronDataGrid.cursorBorder": "#4891d7",
"positronDataGrid.foreground": "#3b3b3b",
"positronDataGrid.selectionBackground": "#accdf380",
"positronDataGrid.selectionBorder": "#70a6e0",
"positronDataGrid.selectionInnerBorder": "#a1c5ef",
"positronDataGrid.sortIndexForeground": "#3a78b1",
"positronDropDownListBox.actionHoverBackground": "#dadada",
"positronDropDownListBox.background": "#ffffff",
"positronDropDownListBox.border": "#cecece",
"positronDropDownListBox.foreground": "#3b3b3b",
"positronDropDownListBox.hoverBackground": "#f2f2f2",
"positronDropDownListBox.separatorBackground": "#cecece",
"positronError.foreground": "#e51400",
"positronModalDialog.background": "#ffffff",
"positronModalDialog.border": "#cecece",
"positronModalDialog.buttonActiveBackground": "#c3c3c3",
"positronModalDialog.buttonBackground": "#e5e5e5",
"positronModalDialog.buttonDestructiveBackground": "#e5e5e5",
"positronModalDialog.buttonDestructiveForeground": "#3b3b3b",
"positronModalDialog.buttonDisabledBorder": "#61616180",
"positronModalDialog.buttonDisabledForeground": "#61616180",
"positronModalDialog.buttonForeground": "#3b3b3b",
"positronModalDialog.buttonHoverBackground": "#c3c3c3",
"positronModalDialog.checkboxBackground": "#ffffff",
"positronModalDialog.checkboxBorder": "#a6a6a6",
"positronModalDialog.checkboxForeground": "#000000",
"positronModalDialog.contrastBackground": "#cccccc",
"positronModalDialog.defaultButtonBackground": "#3a78b1",
"positronModalDialog.defaultButtonForeground": "#ffffff",
"positronModalDialog.defaultButtonHoverBackground": "#316697",
"positronModalDialog.foreground": "#3b3b3b",
"positronModalDialog.preformattedTextForeground": "#3b3b3b",
"positronModalDialog.projectTypeBackground": "#f2f2f2",
"positronModalDialog.projectTypeBackgroundHover": "#e4e6f1",
"positronModalDialog.projectTypeBackgroundSelected": "#e4e6f1",
"positronModalDialog.projectTypeBorder": "#f2f2f2",
"positronModalDialog.projectTypeBorderHover": "#3a78b1",
"positronModalDialog.projectTypeBorderSelected": "#3a78b1",
"positronModalDialog.projectTypeForeground": "#3b3b3b",
"positronModalDialog.radioButtonBackground": "#ffffff",
"positronModalDialog.radioButtonBorder": "#cecece",
"positronModalDialog.radioButtonForeground": "#3b3b3b",
"positronModalDialog.separator": "#cccccc",
"positronModalDialog.textInputBackground": "#ffffff",
"positronModalDialog.textInputBorder": "#a6a6a6",
"positronModalDialog.textInputSelectionBackground": "#007acc",
"positronModalDialog.textInputSelectionForeground": "#ffffff",
"positronModalDialog.titleBarBackground": "#3a78b1",
"positronModalDialog.titleBarForeground": "#ffffff",
"positronPlots.background": "#ffffff",
"positronRuntimesManager.actionHoverBackground": "#dadada",
"positronRuntimesManager.background": "#f8f8f8",
"positronRuntimesManager.hoverBackground": "#f2f2f2",
"positronScrollBar.border": "#ffffff",
"positronSideActionBar.background": "#ffffff",
"positronSideActionBar.border": "#d9dee2",
"positronSideActionBar.disabledForeground": "#b9c0c6",
"positronSideActionBar.foreground": "#3b3b3b",
"positronSideActionBar.hoverBackground": "#dae1ea",
"positronSideActionBar.separator": "#dfe3e6",
"positronSideActionBar.textInputBackground": "#ffffff",
"positronSideActionBar.textInputBorder": "#cbd0d5",
"positronSideActionBar.textInputSelectionBackground": "#007acc",
"positronSideActionBar.textInputSelectionForeground": "#ffffff",
"positronSplitterExpandCollapseButton.background": "#fafafa",
"positronSplitterExpandCollapseButton.foreground": "#3b79b3",
"positronToolTip.background": "#f3f3f3",
"positronToolTip.border": "#c8c8c8",
"positronTopActionBar.background": "#f8f8f8",
"positronTopActionBar.border": "#cbd0d5",
"positronTopActionBar.disabledForeground": "#61616180",
"positronTopActionBar.foreground": "#3b3b3b",
"positronTopActionBar.hoverBackground": "#dae1ea",
"positronTopActionBar.logoBackground": "#316697",
"positronTopActionBar.selectBorder": "#cecece",
"positronTopActionBar.selectBoxBackground": "#ffffff",
"positronTopActionBar.separator": "#dfe3e6",
"positronTopActionBar.textInputBackground": "#ffffff",
"positronTopActionBar.textInputBorder": "#5f6a79",
"positronTopActionBar.textInputSelectionBackground": "#007acc",
"positronTopActionBar.textInputSelectionForeground": "#ffffff",
"positronVariables.activeSelectionBackground": "#e8e8e8",
"positronVariables.activeSelectionForeground": "#000000",
"positronVariables.background": "#ffffff",
"positronVariables.border": "#61616120",
"positronVariables.foreground": "#3b3b3b",
"positronVariables.headerBackground": "#f2f2f2",
"positronVariables.inactiveSelectionBackground": "#e4e6f1",
"positronVariables.rowHoverBackground": "#e6e6e6",
"positronWelcome.background": "#ffffff",
"positronWelcome.foreground": "#1371a0",
"positronWelcome.hoverBackground": "#f2f2f2",
"positronWelcome.secondaryForeground": "#cbd0d4",

From this point, you can either create your own custom color theme, or, you can override certain colors in your settings file. For example, to override the positronConsole.background color, you can add it to your settings file thusly:

{
    "python.defaultInterpreterPath": "/Users/brian/.pyenv/versions/3.11.9/bin/python",
    "positron.interpreters.showSessions": true,
    "workbench.editor.pinnedTabsOnSeparateRow": true,
    "editor.experimental.actionBar.enabled": true,
    "positron.connections": true,
    "workbench.reduceMotion": "off",
    "editor.actionBar.enabled": true,
    "workbench.colorCustomizations": {
        // Will apply to all color themes:
        "positronConsole.background": "#ff0000",
        // Will apply to dark color themes:
        "[dark]": {
            "positronConsole.background": "#ff0000",
        },
    }
}

Which will result in:

Please let me know whether this adequately addresses your questions.

[ddanieltan]

Thank you, this is exactly what I was looking for

[ntluong95]

That's so helpful with the command to generate all of the possible color