Vscode: Add workbench/editor colors to our built in themes

[bpasero]

During April we have added a lot more color support for theming:

• Tree/List
• Diff Editor
• Quick open
• Activity bar icon foreground
• Message notification bar
• Scrollbar
• Info/Warning/Error colors (e.g. used in input boxes)
• Splitview header (e.g. debug viewlet)
• Buttons

We should ensure that all our built in themes leverage workbench and editor colors to serve as example for others that write extensions.

See https://github.com/Microsoft/vscode/issues/25328 for instructions.

• [x] Abyss @bpasero
• [ ] Kimbie Dark @aeschli
• [ ] Monokai @cleidigh
• [ ] Monokai Dimmed @cleidigh
• [x] Quiet Light @isidorn
• [x] Red @mjbvz
• [x] Solarized Dark @bpasero
• [ ] Solarized Light @bpasero
• [x] Tomorrow Night Blue @Tyriar

@Microsoft/vscode feel free to sign up if you are interested to own one of the unassigned themes.

Also happy to accept PRs from the community if someone wants to jump in 👍

Blue print with all colors sorted by category:

"colors": {

    // Base
    "foreground": "",
    "focusBorder": "",
    "contrastBorder": "",
    "activeContrastBorder": "",

    "infoBackground": "",
    "infoBorder": "",
    "warningBackground": "",
    "warningBorder": "",
    "errorBackground": "",
    "errorBorder": "",

    "widgetShadow": "",

    "inputBoxBackground": "",
    "inputBoxBorder": "",
    "inputBoxForeground": "",
    "inputBoxActiveOptionBorder": "",

    "dropdownBackground": "",
    "dropdownForeground": "",
    "dropdownBorder": "",

    "buttonBackground": "",
    "buttonHoverBackground": "",
    "buttonForeground": "",

    "listActiveSelectionBackground": "",
    "listActiveSelectionForeground": "",
    "listDropBackground": "",
    "listFocusAndSelectionBackground": "",
    "listFocusAndSelectionForeground": "",
    "listFocusBackground": "",
    "listHoverBackground": "",
    "listInactiveSelectionBackground": "",
    "listHighlightForeground": "",

    "scrollbarShadow": "",
    "scrollbarSliderActiveBackground": "",
    "scrollbarSliderBackground": "",
    "scrollbarSliderHoverBackground": "",

    // Editor
    "editorBackground": "",
    "editorForeground": "",
    "editorWidgetBackground": "",
    "editorCursor": "",
    "editorWhitespaces": "",
    "editorLineHighlight": "",
    "editorSelection": "",
    "editorIndentGuides": "",
    "editorHoverBackground": "",
    "editorHoverBorder": "",
    "editorLineNumbers": "",
    "editorMarkerNavigationBackground": "",
    "editorMarkerNavigationError": "",
    "editorMarkerNavigationWarning": "",
    "editorActiveLinkForeground": "",
    "editorFindMatch": "",
    "editorFindMatchHighlight": "",
    "editorFindRangeHighlight": "",
    "editorHoverHighlight": "",
    "editorInactiveSelection": "",
    "editorLineHighlightBorder": "",
    "editorLinkForeground": "",
    "editorRangeHighlight": "",
    "editorSelectionHighlight": "",
    "editorSuggestMatchHighlight": "",
    "editorSuggestWidgetBackground": "",
    "editorSuggestWidgetBorder": "",
    "editorWordHighlight": "",
    "editorWordHighlightStrong": "",

    // Editor: Peek View
    "peekViewResultsBackground": "",
    "peekViewResultsMatchForeground": "",
    "peekViewResultsSelectionBackground": "",
    "peekViewResultsSelectionForeground": "",
    "peekViewEditorBackground": "",
    "peekViewTitleBackground": "",
    "peekViewBorder": "",
    "peekViewEditorMatchHighlight": "",
    "peekViewResultsFileForeground": "",
    "peekViewResultsMatchHighlight": "",
    "peekViewTitle": "",
    "peekViewTitleInfo": "",

    // Editor: Diff
    "diffInserted": "",
    "diffInsertedOutline": "",
    "diffRemoved": "",
    "diffRemovedOutline": "",

    // Workbench: Title
    "titleBarActiveBackground": "",
    "titleBarActiveForeground": "",
    "titleBarInactiveBackground": "",
    "titleBarInactiveForeground": "",

    // Workbench: Editors
    "editorGroupBackground": "",
    "editorGroupHeaderBackground": "",
    "editorGroupBorder": "",
    "editorDragAndDropBackground": "",
    "editorMasterDetailsBorder": "",

    // Workbench: Tabs
    "tabsContainerBackground": "",
    "tabBorder": "",
    "tabActiveBackground": "",
    "tabInactiveBackground": "",
    "tabActiveEditorGroupActiveForeground": "",
    "tabActiveEditorGroupInactiveForeground": "",
    "tabInactiveEditorGroupActiveForeground": "",
    "tabInactiveEditorGroupInactiveForeground": "",

    // Workbench: Activity Bar
    "activityBarBackground": "",
    "activityBarForeground": "",
    "activityBarDragAndDropBackground": "",
    "activityBarBadgeBackground": "",
    "activityBarBadgeForeground": "",

    // Workbench: Panel
    "panelBackground": "",
    "panelBorder": "",
    "panelActiveTitleBorder": "",
    "panelActiveTitleForeground": "",
    "panelInactiveTitleForeground": "",

    // Workbench: Side Bar
    "sideBarBackground": "",
    "sideBarTitleForeground": "",
    "sideBarSectionHeaderBackground": "",

    // Workbench: Status Bar
    "statusBarBackground": "",
    "statusBarNoFolderBackground": "",
    "statusBarDebuggingBackground": "",
    "statusBarForeground": "",
    "statusBarItemActiveBackground": "",
    "statusBarItemHoverBackground": "",
    "statusBarProminentItemBackground": "",
    "statusBarProminentItemHoverBackground": "",

    // Workbench: Debug
    "debugToolBarBackground": "",
    "debugExceptionWidgetBackground": "",
    "debugExceptionWidgetBorder": "",

    // Workbench: Notifications
    "notificationsBackground": "",
    "notificationsForeground": "",

    // Workbench: Quick Open
    "pickerGroupBorder": "",
    "pickerGroupForeground": "",

    // Workbench: Terminal
    "terminalAnsiBlack": "",
    "terminalAnsiBlue": "",
    "terminalAnsiBrightBlack": "",
    "terminalAnsiBrightBlue": "",
    "terminalAnsiBrightCyan": "",
    "terminalAnsiBrightGreen": "",
    "terminalAnsiBrightMagenta": "",
    "terminalAnsiBrightRed": "",
    "terminalAnsiBrightWhite": "",
    "terminalAnsiBrightYellow": "",
    "terminalAnsiCyan": "",
    "terminalAnsiGreen": "",
    "terminalAnsiMagenta": "",
    "terminalAnsiRed": "",
    "terminalAnsiWhite": "",
    "terminalAnsiYellow": ""
}

[cleidigh]

@bpasero
I will sign up for can Kimbie dark - Will you accept a Windows 7 test approach only?

[aeschli]

@cleidigh Yes, any platform is fine.

[aeschli]

@cleidigh I started working on Kimbie dark and will push my changes. Feel free to modify as you like.

[cleidigh]

@aeschli
Wow I guess I'm too slow for the draw ;-)
Since you started and I have not how about a take Monokai?

[mjbvz]

I'm taking a quick look at the Red theme

[bpasero]

@cleidigh yes, feel free to start with Monokai, thanks!

[roblourens]

Removed myself, likely won't have time this week as I'm in PHP work.

[bpasero]

I added a JSON snippet to the issue description that can be used as template to fill in colors.

[bpasero]

A few color websites that I find very useful when doing a theme:

• http://paletton.com/
• https://coolors.co/
• http://colormind.io/

[isidorn]

Updated the quite light theme. Thanks @sandy081 for feedback

More feedback is welcome from users that use it every day.

[bpasero]

Nice... quiet green 💚

[cleidigh]

@bpasero
PotentiallyStupidQuestion:
Going element by element but cannot see editorForeground effect using white and red to pop out
I tested abyss since I assume from your comment it's the most tested and everything works
I assume I just don't know where to look, or there's a workbench setting associated with this or a mouse
element?

[bpasero]

@aeschli can you comment on editorForeground, I am not sure where this color applies.

@cleidigh I think Abyss theme is a good candidate for looking which are the main colors. Note though that I did not do all the colors that are possible in the editor area, some tweaking might still be needed.

[bpasero]

Abyss theme:

[bpasero]

Taking Solarized Dark

[Tyriar]

Tomorrow night blue:

[rebornix]

@bpasero @isidorn even though I'm very likely the only Insider user who is using Quite Light theme, I don't know if it's a good idea to change from purple to green. To me it's a total new theme instead of update. The decent Light Green may deserve a new theme option and then we can keep Quite Light.

[cleidigh]

@bpasero
Picking colors without a mouse is painful ;-)
I'm working through the Monokai theme but I wanted to report right away an issue with lists:

focus and selection color override works
keyboard focus only uses the default color

first screenshot: (ignore the crazy testing colors) Extensions list focus arrow into first item
select item with Enter - correct focus and selected color

second screenshot: arrow to another item

• correct ListActiveSelectionBackground
• default focus color
• mouse hovered over Color Picker - ListHoverBackground correct

I have verified this for extensions, SCM, Explore and keybindings
I assume anywhere focus and mouse over are treated differently

I personally think keyboard focus and mouse over should be the same in most cases
my current list PR touches on this also

I will continue working on real colors...

[cleidigh]

buttonForeground

if this should be the background text on drop-down message buttons it does not have an effect
screenshot below with modified button background color - correct - buttonforeground should be red

[cleidigh]

I would like to suggest changing the naming convention for the following button items:

    "buttonBackground": "#5088a3",
    "buttonHoverBackground": "#6099a3",
    "buttonForeground": "",

the first two appear only to affect the notification buttons but the foreground color is defined below
specifically referring to the notification. with the current naming convention there is no UI
Association of the button location so if you want to make them different for extensions for instance
or anything else in the sidebar the names are two in specific. it is still not clear where button foreground
applies.

perhaps: notificationButtonBackground ... etc

    // Workbench: Notifications
    "notificationsBackground": "",
    "notificationsForeground": "#ffe0ff",

I should be able to post my Monokai tomorrow

[mjbvz]

Not sure how many users it has, but I've updated the red theme:

Very red.

Please let me know if you notice any bugs or have any suggestions. PRs are also always very welcome

[bpasero]

@mjbvz thanks!

@rebornix @isidorn my initial reaction was also that the green makes the Quite Light theme very different from before. I think one goal with that theme is to use as little colors as possible, then maybe it should not have a strong primary color like it has now?

@cleidigh thanks for picking this up. There are a number of issues reported already around the fact that some theme color names are hard to understand, also the buttons. The button color is not only used for notifications, also for the large buttons inside the views when you open an empty workspace:

[aeschli]

To see the editorForeground, open a text file. I created #25519 as the color is not updated if changed in the settings.

[bpasero]

There were several changes to names of colors today and we are in the process of introducing a dot notation for colors probably tomorrow (see discussion in https://github.com/Microsoft/vscode/issues/25428).

I pushed these color changes and adopted them in the themes we have checked in:

• editorMasterDetailsBorder (was editorSideBySideBorder)
• statusBarProminentItemBackground (was statusBarInfoItemBackground)
• statusBarProminentItemHoverBackground (was statusBarInfoItemHoverBackground)
• activityBarBadgeBackground (was activityBarBackground)
• activityBarBadgeForeground (was activtyBarForeground)
• editorGroupHeaderBackground (was editorHeaderBackground)
• tabActiveBackground (was activeTabBackground),
• tabInactiveBackground (was inactiveTabBackground),
• tabActiveEditorGroupActiveForeground (was activeTabActiveGroupForeground),
• tabActiveEditorGroupInactiveForeground (was activeTabInactiveGroupForeground),
• tabInactiveEditorGroupActiveForeground (was inactiveTabActiveGroupForeground),
• tabInactiveEditorGroupInactiveForeground (was inactiveTabInactiveGroupForeground)
• panelBorder (was panelTopBorder)
• focusBorder (was focusedElementOutline)
• contrastBorder (was highContrastBorder)
• activeContrastBorder (was highContrastOutline)
• info/warning/error[border|background]

[cleidigh]

@bpasero

IMHO

I would think the buttons on the notification messages might deserve their own category given
it's such a specific UI element and can have its own background and button forms
Also the foreground color is used for all notification elements, I don't think you can
differentiate the color of the information text from the button foreground text
still would also have to differentiate button decoration on sidebar elements

what about the default focused list item coloration that cannot be changed? this really stands out
with anything but a blue appropriate theme - were you able to reproduce and see this?

[cleidigh]

@bpasero
do you have a template list with the new color names?
it sounds like you are far enough I should change my theme to incorporate these changes or should I just submit with the prior names - I can post in about an hour or two - won't pretend changed everything but the main elements

Also where do you want to collect comments on items that are not currently themable?

[thecodechef]

would it be possible to mimic gitGutter by any chance like so?

"gutterInsertedBackground": ""
"gutterChangedBackground" : ""
"gutterDeletedBackground" : ""
"gutterIgnoredBackground" : ""
"gutterUntrackedBackground" : ""

[cleidigh]

Monokai (Battleship)

PR #25599

[bpasero]

what about the default focused list item coloration that cannot be changed? this really stands out
with anything but a blue appropriate theme - were you able to reproduce and see this?

What do you mean @cleidigh ?

[cleidigh]

@bpasero
the problem was that settings hints pop-up did not have the color name
I found it looking at another file so I did the correct this

[isidorn]

This issue is not blocking our smoke test

[kurtextrem]

What happened to "tabsContainerBackground"? What name has it now?

[bpasero]

@kurtextrem we did a lot of changes yesterday but the list that we now consider complete for May release is this:

{
        // --- base
        "foreground": "",
        "focusBorder": "",
        "contrastBorder": "",
        "contrastActiveBorder": "",

        "widget.shadow": "",

        "input.background": "",
        "input.foreground": "",
        "input.border": "",

        "inputOption.activeBorder": "",

        "inputValidation.infoBackground": "",
        "inputValidation.infoBorder": "",
        "inputValidation.warningBackground": "",
        "inputValidation.warningBorder": "",
        "inputValidation.errorBackground": "",
        "inputValidation.errorBorder": "",

        "dropdown.background": "",
        "dropdown.foreground": "",
        "dropdown.border": "",

        "list.activeSelectionBackground": "",
        "list.activeSelectionForeground": "",
        "list.inactiveSelectionBackground": "",
        "list.focusBackground": "",
        "list.hoverBackground": "",
        "list.dropBackground": "",
        "list.highlightForeground": "",

        "pickerGroup.foreground": "",
        "pickerGroup.border": "",

        "button.foreground": "",
        "button.background": "",
        "button.hoverBackground": "",

        "scrollbar.shadow": "",
        "scrollbarSlider.background": "",
        "scrollbarSlider.hoverBackground": "",
        "scrollbarSlider.activeBackground": "",

        // --- editor
        "editor.background": "",
        "editor.foreground": "",
        "editor.selectionBackground": "",
        "editor.inactiveSelectionBackground": "",
        "editor.selectionHighlightBackground": "",
        "editor.findMatchBackground": "",
        "editor.findMatchHighlightBackground": "",
        "editor.findRangeHighlightBackground": "",
        "editorLink.activeForeground": "",
        "editorLink.foreground": "",
        "editorWidget.background": "",
        "editor.lineHighlightBackground": "",
        "editor.lineHighlightBorder": "",
        "editor.rangeHighlightBackground": "",
        "editor.wordHighlightBackground": "",
        "editor.wordHighlightStrongBackground": "",
        "editorCursor.foreground": "",
        "editorWhitespace.foreground": "",
        "editorIndentGuide.background": "",
        "editorLineNumber.foreground": "",
        "editorMarkerNavigationError.background": "",
        "editorMarkerNavigationWarning.background": "",
        "editorMarkerNavigation.background": "",
        "editor.hoverHighlightBackground": "",
        "editorHoverWidget.background": "",
        "editorHoverWidget.border": "",

        // --- editor suggest
        "editorSuggestWidget.background": "",
        "editorSuggestWidget.border": "",
        "editorSuggestWidget.foreground": "",
        "editorSuggestWidget.selectedBackground": "",
        "editorSuggestWidget.highlightForeground": "",

        // --- peek view editor
        "peekView.border": "",
        "peekViewEditor.background": "",
        "peekViewEditor.matchHighlightBackground": "",
        "peekViewTitle.background": "",
        "peekViewTitleLabel.foreground": "",
        "peekViewTitleDescription.foreground": "",
        "peekViewResult.background": "",
        "peekViewResult.selectionBackground": "",
        "peekViewResult.selectionForeground": "",
        "peekViewResult.matchHighlightBackground": "",
        "peekViewResult.fileForeground": "",
        "peekViewResult.lineForeground": "",

        // --- diff editor
        "diffEditor.insertedTextBackground": "",
        "diffEditor.removedTextBackground": "",
        "diffEditor.insertedTextBorder": "",
        "diffEditor.removedTextBorder": "",

        // --- workbench: editor group
        "editorGroup.background": "",
        "editorGroup.border": "",
        "editorGroup.dropBackground": "",
        "editorGroupHeader.tabsBackground": "",
        "editorGroupHeader.noTabsBackground": "",

        // --- workbench: tabs
        "tab.activeBackground": "",
        "tab.inactiveBackground": "",
        "tab.activeForeground": "",
        "tab.inactiveForeground": "",
        "tab.border": "",

        // --- workbench: panel
        "panel.background": "",
        "panel.border": "",
        "panelTitle.activeForeground": "",
        "panelTitle.inactiveForeground": "",
        "panelTitle.activeBorder": "",

        // --- workbench: status bar
        "statusBar.foreground": "",
        "statusBar.background": "",
        "statusBar.noFolderBackground": "",
        "statusBar.debuggingBackground": "",
        "statusBarItem.activeBackground": "",
        "statusBarItem.hoverBackground": "",
        "statusBarItem.prominentBackground": "",
        "statusBarItem.prominentHoverBackground": "",

        // --- workbench: activity bar
        "activityBar.background": "",
        "activityBar.foreground": "",
        "activityBar.dropBackground": "",
        "activityBarBadge.background": "",
        "activityBarBadge.foreground": "",

        // --- workbench: side bar
        "sideBar.background": "",
        "sideBarTitle.foreground": "",
        "sideBarSectionHeader.background": "",

        // --- workbench: title bar
        "titleBar.activeForeground": "",
        "titleBar.inactiveForeground": "",
        "titleBar.activeBackground": "",
        "titleBar.inactiveBackground": "",

        // --- workbench: notifications
        "notification.foreground": "",
        "notification.background": "",

        // --- workbench: debug
        "debugExceptionWidget.border": "",
        "debugExceptionWidget.background": "",
        "debugToolBar.background": "",

        // --- workbench: terminal
        "terminal.ansiBlack": "",
        "terminal.ansiRed": "",
        "terminal.ansiGreen": "",
        "terminal.ansiYellow": "",
        "terminal.ansiBlue": "",
        "terminal.ansiMagenta": "",
        "terminal.ansiCyan": "",
        "terminal.ansiWhite": "",
        "terminal.ansiBrightBlack": "",
        "terminal.ansiBrightRed": "",
        "terminal.ansiBrightGreen": "",
        "terminal.ansiBrightYellow": "",
        "terminal.ansiBrightBlue": "",
        "terminal.ansiBrightMagenta": "",
        "terminal.ansiBrightCyan": "",
        "terminal.ansiBrightWhite": ""
}

Former tabsContainerBackground is now editorGroupHeader.tabsBackground (via https://github.com/Microsoft/vscode/commit/ff9f7b3baa6052863b55e8b6ef7c7c94d07beddf)

[EbXpJ6bp]

How can I debug "inputValidation."?

[bpasero]

I made a pass over all built ins and made some adjustments. I would not say all themes are done done, but reasonably well supported.

@EbXpJ6bp you can see an error when you type an invalid regex in the search box and a warning when getting too many results on a search. the info shows up when you click the glob pattern support in the search controls:

[EbXpJ6bp]

@bpasero Thanks!

[technoiswatchingyou]

Hi. Could someone helps me please to understand how named setting for changing color of selection in Terminal? Best, Andrey.

[jens1o]

@iamandreymarchenko

"workbench.colorCustomizations": {
        "terminal.selectionBackground": "#0078CD"
}

[technoiswatchingyou]

@jens1o thank you, mate, but no any effect after i added this setting :/

[jens1o]

@iamandreymarchenko
Well, it works for me:

[technoiswatchingyou]

@jens1o hmm... very strange thing. Maybe it is not work for macOS version of VSCode. Thanks for help anyway!