Change:
I played around with to set the background color of the dropdown widget. It works fine in the panel area but e.g. not for the debug dropdown. That makes me wonder if we possibly have code in debug land that overrides this because the debug view is in the side bar. That is probably not a good idea given you can move views around. !
Same for remote explorer, so it is maybe more generic: ! //cc
You are correct we use the sidebar_background for the debug I thought the issue is that we also have a green play button which is part of this and we did not want to custmoise it becuase the Green play might not look good on the customised background. As for the remote explorer I have no clue.
I think the remote one is covered via
That one was probably a copy paste mistake from debug land :)
last milestone and I saw this differentiation and assumed it was intentional that all sidebar dropdowns do not honor the theme color. this meant that if you drag terminal or output to the sidebar (in their own viewlet), they will also skip using the theme color for dropdown
I am opening this for a PR. Code pointer The debug select box should listen to style changes and also style the background of the Green Play button.
Adding lable bug so we get this verified.

Discussion:
import { IDebugService, IDebugSession, IDebugConfiguration, IConfig, ILaunch } from 'vs/workbench/contrib/debug/common/debug'; import { IThemeService } from 'vs/platform/theme/common/themeService'; import { attachSelectBoxStyler, attachStylerCallback } from 'vs/platform/theme/common/styler'; <del> import { SIDE_BAR_BACKGROUND } from 'vs/workbench/common/theme'; import { selectBorder } from 'vs/platform/theme/common/colorRegistry'; </del> <ins> import { selectBorder, selectBackground } from 'vs/platform/theme/common/colorRegistry'; </ins> import { IContextViewService } from 'vs/platform/contextview/browser/contextView'; import { IWorkspaceContextService, WorkbenchState } from 'vs/platform/workspace/common/workspace'; import { IDisposable, dispose } from 'vs/base/common/lifecycle';

this.toDispose = []; this.selectBox = new SelectBox([], -1, contextViewService, undefined, { ariaLabel: nls.localize('debugLaunchConfigurations', 'Debug Launch Configurations') }); this.toDispose.push(this.selectBox); <del> this.toDispose.push(attachSelectBoxStyler(this.selectBox, themeService, { selectBackground: SIDE_BAR_BACKGROUND })); </del> <ins> this.toDispose.push(attachSelectBoxStyler(this.selectBox, themeService)); </ins> this.registerListeners(); }

event.stopPropagation(); } })); <del> this.toDispose.push(attachStylerCallback(this.themeService, { selectBorder }, colors => { </del> <ins> this.toDispose.push(attachStylerCallback(this.themeService, { selectBorder, selectBackground }, colors => { </ins> this.container.style.border = colors.selectBorder ? `1px solid ${colors.selectBorder}` : ''; selectBoxContainer.style.borderLeft = colors.selectBorder ? `1px solid ${colors.selectBorder}` : ''; <ins> this.start.style.backgroundColor = colors.selectBackground ? `${colors.selectBackground}` : ''; </ins> })); this.debugService.getConfigurationManager().getDynamicProviders().then(providers => { this.providers = providers;

.monaco-workbench .part > .title > .title-actions .start-debug-action-item .codicon { line-height: inherit; <del> outline-offset: 0px; </del> flex-shrink: 0; transition: transform 50ms ease; } <del> .monaco-workbench .monaco-action-bar .start-debug-action-item .configuration.select-container { margin-left: 1px; } </del> .monaco-workbench .monaco-action-bar .start-debug-action-item .configuration .monaco-select-box { border: none; margin-top: 0px; cursor: pointer; <del> font-size: inherit; </del> line-height: inherit; <del> outline-offset: 0px; </del> } .monaco-workbench .monaco-action-bar .start-debug-action-item .configuration.disabled .monaco-select-box {