diff --git a/extensions/theme-abyss/themes/abyss-color-theme.json b/extensions/theme-abyss/themes/abyss-color-theme.json index 484e47f3531..7b7bb35b5f4 100644 --- a/extensions/theme-abyss/themes/abyss-color-theme.json +++ b/extensions/theme-abyss/themes/abyss-color-theme.json @@ -253,6 +253,7 @@ // Base Colors "inputBackground": "#181f2f", + "selectBackground": "#181f2f", // Editor Colors "editorBackground": "#000c18", diff --git a/src/vs/base/browser/ui/selectBox/selectBox.css b/src/vs/base/browser/ui/selectBox/selectBox.css index d54fc5b05bf..8132bb2ba2a 100644 --- a/src/vs/base/browser/ui/selectBox/selectBox.css +++ b/src/vs/base/browser/ui/selectBox/selectBox.css @@ -6,21 +6,4 @@ .monaco-workbench .select-box { width: 100%; height: 20px; -} - -.vs .monaco-workbench .select-box { - background-color: white; - border-color: #CECECE; -} - -.vs-dark .monaco-workbench .select-box { - background-color: #3C3C3C; - border-color: #3C3C3C; - color: rgb(204, 204, 204); -} - -.hc-black .monaco-workbench .select-box { - background-color: #3C3C3C; - border-color: #3C3C3C; - color: white; -} +} \ No newline at end of file diff --git a/src/vs/base/browser/ui/selectBox/selectBox.ts b/src/vs/base/browser/ui/selectBox/selectBox.ts index e36cf92fbb6..58881501f3a 100644 --- a/src/vs/base/browser/ui/selectBox/selectBox.ts +++ b/src/vs/base/browser/ui/selectBox/selectBox.ts @@ -15,6 +15,7 @@ import { Color } from "vs/base/common/color"; export interface ISelectBoxStyles { selectBackground?: Color; selectForeground?: Color; + selectBorder?: Color; } export class SelectBox extends Widget { @@ -27,6 +28,7 @@ export class SelectBox extends Widget { private toDispose: IDisposable[]; private selectBackground: Color; private selectForeground: Color; + private selectBorder: Color; constructor(options: string[], selected: number, styles?: ISelectBoxStyles) { super(); @@ -41,6 +43,7 @@ export class SelectBox extends Widget { if (styles) { this.selectBackground = styles.selectBackground; this.selectForeground = styles.selectForeground; + this.selectBorder = styles.selectBorder; } this.toDispose.push(dom.addStandardDisposableListener(this.selectElement, 'change', (e) => { @@ -101,6 +104,7 @@ export class SelectBox extends Widget { public style(styles: ISelectBoxStyles) { this.selectBackground = styles.selectBackground; this.selectForeground = styles.selectForeground; + this.selectBorder = styles.selectBorder; this._applyStyles(); } @@ -109,9 +113,11 @@ export class SelectBox extends Widget { if (this.selectElement) { const background = this.selectBackground ? this.selectBackground.toString() : null; const foreground = this.selectForeground ? this.selectForeground.toString() : null; + const border = this.selectBorder ? this.selectBorder.toString() : null; this.selectElement.style.backgroundColor = background; this.selectElement.style.color = foreground; + this.selectElement.style.borderColor = border; } } diff --git a/src/vs/platform/theme/common/colorRegistry.ts b/src/vs/platform/theme/common/colorRegistry.ts index 88e8477c9e6..50475c763b9 100644 --- a/src/vs/platform/theme/common/colorRegistry.ts +++ b/src/vs/platform/theme/common/colorRegistry.ts @@ -127,6 +127,10 @@ export const highContrastOutline = registerColor('highContrastOutline', { light: export const inputBackground = registerColor('inputBackground', { dark: '#3C3C3C', light: Color.white, hc: Color.black }, nls.localize('inputBackground', 'Input field background')); export const inputForeground = registerColor('inputForeground', { dark: foreground, light: foreground, hc: foreground }, nls.localize('inputForeground', 'Input field foreground')); +export const selectBackground = registerColor('selectBackground', { dark: '#3C3C3C', light: Color.white, hc: '#3C3C3C' }, nls.localize('selectBackground', 'Select field background')); +export const selectForeground = registerColor('selectForeground', { dark: '#F0F0F0', light: null, hc: Color.white }, nls.localize('selectForeground', 'Select field foreground')); +export const selectBorder = registerColor('selectBorder', { dark: selectBackground, light: '#CECECE', hc: selectBackground }, nls.localize('selectBorder', 'Select field border')); + /** * Editor background color. * Because of bug https://monacotools.visualstudio.com/DefaultCollection/Monaco/_workitems/edit/13254 diff --git a/src/vs/platform/theme/common/styler.ts b/src/vs/platform/theme/common/styler.ts index 68dde0a50be..f8da1dc46a1 100644 --- a/src/vs/platform/theme/common/styler.ts +++ b/src/vs/platform/theme/common/styler.ts @@ -6,7 +6,7 @@ 'use strict'; import { ITheme, IThemeService } from 'vs/platform/theme/common/themeService'; -import { inputBackground, inputForeground, ColorIdentifier } from 'vs/platform/theme/common/colorRegistry'; +import { inputBackground, inputForeground, ColorIdentifier, selectForeground, selectBackground, selectBorder } from 'vs/platform/theme/common/colorRegistry'; import { IDisposable } from "vs/base/common/lifecycle"; export interface IThemable { @@ -33,5 +33,5 @@ export function attachInputBoxStyler(widget: IThemable, themeService: IThemeServ } export function attachSelectBoxStyler(widget: IThemable, themeService: IThemeService): IDisposable { - return attachStyler(themeService, widget, { selectBackground: inputBackground, selectForeground: inputForeground }); + return attachStyler(themeService, widget, { selectBackground, selectForeground, selectBorder }); } \ No newline at end of file diff --git a/src/vs/workbench/browser/parts/editor/editorGroupsControl.ts b/src/vs/workbench/browser/parts/editor/editorGroupsControl.ts index f3ddf420be8..4d4c0934564 100644 --- a/src/vs/workbench/browser/parts/editor/editorGroupsControl.ts +++ b/src/vs/workbench/browser/parts/editor/editorGroupsControl.ts @@ -1486,7 +1486,7 @@ export class EditorGroupsControl extends Themable implements IEditorGroupsContro element.style.outlineColor = useOutline ? this.getColor(highContrastOutline) : null; element.style.outlineStyle = useOutline ? 'dashed' : null; element.style.outlineWidth = useOutline ? '2px' : null; - (element).style.outlineOffset = useOutline ? '-2px' : null; // TODO@theme TS fail (gulp watch) + (element).style.outlineOffset = useOutline ? '-2px' : null; // TS fail (gulp watch) } private posSilo(pos: number, leftTop: string | number, rightBottom?: string | number, borderLeftTopWidth?: string | number): void { diff --git a/src/vs/workbench/browser/parts/editor/tabsTitleControl.ts b/src/vs/workbench/browser/parts/editor/tabsTitleControl.ts index f9350df0bdb..ca8b92f44ac 100644 --- a/src/vs/workbench/browser/parts/editor/tabsTitleControl.ts +++ b/src/vs/workbench/browser/parts/editor/tabsTitleControl.ts @@ -225,12 +225,12 @@ export class TabsTitleControl extends TitleControl { element.style.outlineWidth = '2px'; element.style.outlineStyle = 'dashed'; element.style.outlineColor = this.getColor(highContrastOutline); - (element).style.outlineOffset = isTab ? '-5px' : '-3px'; // TODO@theme TS fail (gulp watch) + (element).style.outlineOffset = isTab ? '-5px' : '-3px'; // TS fail (gulp watch) } else { element.style.outlineWidth = null; element.style.outlineStyle = null; element.style.outlineColor = this.isHighContrastTheme ? this.getColor(highContrastOutline) : null; - (element).style.outlineOffset = null; // TODO@theme TS fail (gulp watch) + (element).style.outlineOffset = null; // TS fail (gulp watch) } } diff --git a/src/vs/workbench/browser/parts/editor/textEditor.ts b/src/vs/workbench/browser/parts/editor/textEditor.ts index f43adaab05a..e94d91f3685 100644 --- a/src/vs/workbench/browser/parts/editor/textEditor.ts +++ b/src/vs/workbench/browser/parts/editor/textEditor.ts @@ -67,7 +67,6 @@ export abstract class BaseTextEditor extends BaseEditor { this.toUnbind.push(this.configurationService.onDidUpdateConfiguration(e => this.handleConfigurationChangeEvent(e.config))); this.toUnbind.push(themeService.onDidColorThemeChange(e => this.handleConfigurationChangeEvent())); // TODO@theme this should be done from the editor itself and not from the outside - } protected get instantiationService(): IInstantiationService { diff --git a/src/vs/workbench/parts/debug/browser/media/debugActionsWidget.css b/src/vs/workbench/parts/debug/browser/media/debugActionsWidget.css index 8d8ee8f2476..c7cd4e40771 100644 --- a/src/vs/workbench/parts/debug/browser/media/debugActionsWidget.css +++ b/src/vs/workbench/parts/debug/browser/media/debugActionsWidget.css @@ -20,7 +20,6 @@ } .monaco-workbench .debug-actions-widget .monaco-action-bar .action-item .select-box { - background-color: initial; margin-top: 6px; } diff --git a/src/vs/workbench/parts/debug/browser/media/debugViewlet.css b/src/vs/workbench/parts/debug/browser/media/debugViewlet.css index bbd50c48788..b7795a29c78 100644 --- a/src/vs/workbench/parts/debug/browser/media/debugViewlet.css +++ b/src/vs/workbench/parts/debug/browser/media/debugViewlet.css @@ -94,18 +94,18 @@ } .monaco-workbench .monaco-action-bar .start-debug-action-item .configuration .select-box { - background-color: #f3f3f3; + background-color: #f3f3f3 !important; border: none; margin-top: 0px; cursor: pointer; } .vs-dark .monaco-workbench .monaco-action-bar .start-debug-action-item .configuration .select-box { - background-color: #252526; + background-color: #252526 !important; } .hc-black .monaco-workbench .monaco-action-bar .start-debug-action-item .configuration .select-box { - background-color: #000; + background-color: #000 !important; } .monaco-workbench .monaco-action-bar .start-debug-action-item .configuration.disabled .select-box { diff --git a/src/vs/workbench/parts/files/browser/media/explorerviewlet.css b/src/vs/workbench/parts/files/browser/media/explorerviewlet.css index 1287332d2af..8821f341b6f 100644 --- a/src/vs/workbench/parts/files/browser/media/explorerviewlet.css +++ b/src/vs/workbench/parts/files/browser/media/explorerviewlet.css @@ -182,21 +182,4 @@ .hc-black .monaco-workbench .explorer-viewlet .open-editor, .hc-black .monaco-workbench .explorer-viewlet .editor-group { line-height: 20px; -} - -.hc-black .monaco-workbench .explorer-viewlet .explorer-item .monaco-inputbox > .wrapper > .input:focus { - outline-offset: -2px !important; - outline: 1px solid !important; - padding-left: 2px; /* push text by the width of the outline offset to prevent overlaying */ -} - -.hc-black .monaco-workbench .explorer-viewlet .explorer-item .monaco-inputbox.synthetic-focus { - outline: none !important; - border: none; -} - -/* TODO@theme */ - -.hc-black .monaco-workbench .explorer-viewlet .explorer-item .monaco-inputbox > .wrapper > .input:focus { - outline-color: #f38518 !important; } \ No newline at end of file