Fix microsoft#53908 - make settings tree themeable, add default colors

sliker · Jul 12, 2018 · 888bd53 · 888bd53
1 parent b60c434
commit 888bd53
Show file tree

Hide file tree

Showing 5 changed files with 68 additions and 20 deletions.
diff --git a/extensions/theme-defaults/themes/dark_defaults.json b/extensions/theme-defaults/themes/dark_defaults.json
@@ -10,6 +10,8 @@
 		"editor.selectionHighlightBackground": "#ADD6FF26",
 		"list.dropBackground": "#383B3D",
 		"activityBarBadge.background": "#007ACC",
-		"sideBarTitle.foreground": "#BBBBBB"
+		"sideBarTitle.foreground": "#BBBBBB",
+		"settings.textInputBackground": "#292929",
+		"settings.numberInputBackground": "#292929"
 	}
 }
diff --git a/extensions/theme-defaults/themes/light_defaults.json b/extensions/theme-defaults/themes/light_defaults.json
@@ -12,6 +12,8 @@
 		"activityBarBadge.background": "#007ACC",
 		"sideBarTitle.foreground": "#6F6F6F",
 		"list.hoverBackground": "#E8E8E8",
-		"input.placeholderForeground": "#ADADAD"
+		"input.placeholderForeground": "#ADADAD",
+		"settings.textInputBorder": "#CECECE",
+		"settings.numberInputBorder": "#CECECE"
 	}
 }
diff --git a/extensions/theme-kimbie-dark/themes/kimbie-dark-color-theme.json b/extensions/theme-kimbie-dark/themes/kimbie-dark-color-theme.json
@@ -3,6 +3,7 @@
 	"type": "dark",
 	"colors": {
 		"input.background": "#51412c",
+		"dropdown.background": "#51412c",
 		"editor.background": "#221a0f",
 		"editor.foreground": "#d3af86",
 		"focusBorder": "#a57a4c",

diff --git a/extensions/theme-monokai/themes/monokai-color-theme.json b/extensions/theme-monokai/themes/monokai-color-theme.json
@@ -11,6 +11,8 @@
 		"list.activeSelectionBackground": "#75715E",
 		"list.focusBackground": "#414339",
 		"dropdown.listBackground": "#1e1f1c",
+		"settings.textInputBackground": "#32342d",
+		"settings.numberInputBackground": "#32342d",
 		"list.inactiveSelectionBackground": "#414339",
 		"list.hoverBackground": "#3e3d32",
 		"list.dropBackground": "#414339",

diff --git a/src/vs/workbench/parts/preferences/browser/settingsTree.ts b/src/vs/workbench/parts/preferences/browser/settingsTree.ts
@@ -27,7 +27,7 @@ import { ConfigurationTarget, IConfigurationService } from 'vs/platform/configur
 import { IContextViewService } from 'vs/platform/contextview/browser/contextView';
 import { WorkbenchTree, WorkbenchTreeController } from 'vs/platform/list/browser/listService';
 import { IOpenerService } from 'vs/platform/opener/common/opener';
-import { registerColor, selectBackground, selectBorder, textLinkForeground } from 'vs/platform/theme/common/colorRegistry';
+import { inputBackground, inputBorder, inputForeground, registerColor, selectBackground, selectBorder, selectForeground, textLinkForeground } from 'vs/platform/theme/common/colorRegistry';
 import { attachButtonStyler, attachInputBoxStyler, attachSelectBoxStyler } from 'vs/platform/theme/common/styler';
 import { ICssStyleCollector, ITheme, IThemeService, registerThemingParticipant } from 'vs/platform/theme/common/themeService';
 import { SettingsTarget } from 'vs/workbench/parts/preferences/browser/preferencesWidgets';
@@ -42,23 +42,40 @@ export const modifiedItemForeground = registerColor('settings.modifiedItemForegr
 	hc: '#73C991'
 }, localize('modifiedItemForeground', "(For settings editor preview) The foreground color for a modified setting."));
 
+// Enum control colors
+export const settingsSelectBackground = registerColor('settings.dropdownBackground', { dark: selectBackground, light: selectBackground, hc: selectBackground }, localize('settingsDropdownBackground', "Settings editor dropdown background."));
+export const settingsSelectForeground = registerColor('settings.dropdownForeground', { dark: selectForeground, light: selectForeground, hc: selectForeground }, localize('settingsDropdownForeground', "Settings editor dropdown foreground."));
+export const settingsSelectBorder = registerColor('settings.dropdownBorder', { dark: selectBorder, light: selectBorder, hc: selectBorder }, localize('settingsDropdownBorder', "Settings editor dropdown border."));
+
+// Bool control colors
+export const settingsCheckboxBackground = registerColor('settings.checkboxBackground', { dark: selectBackground, light: selectBackground, hc: selectBackground }, localize('settingsCheckboxBackground', "Settings editor checkbox background."));
+export const settingsCheckboxForeground = registerColor('settings.checkboxForeground', { dark: selectForeground, light: selectForeground, hc: selectForeground }, localize('settingsCheckboxForeground', "Settings editor checkbox foreground."));
+export const settingsCheckboxBorder = registerColor('settings.checkboxBorder', { dark: selectBorder, light: selectBorder, hc: selectBorder }, localize('settingsCheckboxBorder', "Settings editor checkbox border."));
+
+// Text control colors
+export const settingsTextInputBackground = registerColor('settings.textInputBackground', { dark: inputBackground, light: inputBackground, hc: inputBackground }, localize('textInputBoxBackground', "Settings editor text input box background."));
+export const settingsTextInputForeground = registerColor('settings.textInputForeground', { dark: inputForeground, light: inputForeground, hc: inputForeground }, localize('textInputBoxForeground', "Settings editor text input box foreground."));
+export const settingsTextInputBorder = registerColor('settings.textInputBorder', { dark: inputBorder, light: inputBorder, hc: inputBorder }, localize('textInputBoxBorder', "Settings editor text input box border."));
+
+// Number control colors
+export const settingsNumberInputBackground = registerColor('settings.numberInputBackground', { dark: inputBackground, light: inputBackground, hc: inputBackground }, localize('numberInputBoxBackground', "Settings editor number input box background."));
+export const settingsNumberInputForeground = registerColor('settings.numberInputForeground', { dark: inputForeground, light: inputForeground, hc: inputForeground }, localize('numberInputBoxForeground', "Settings editor number input box foreground."));
+export const settingsNumberInputBorder = registerColor('settings.numberInputBorder', { dark: inputBorder, light: inputBorder, hc: inputBorder }, localize('numberInputBoxBorder', "Settings editor number input box border."));
+
 registerThemingParticipant((theme: ITheme, collector: ICssStyleCollector) => {
 	const modifiedItemForegroundColor = theme.getColor(modifiedItemForeground);
 	if (modifiedItemForegroundColor) {
 		collector.addRule(`.settings-editor > .settings-body > .settings-tree-container .setting-item.is-configured .setting-item-is-configured-label { color: ${modifiedItemForegroundColor}; }`);
 	}
 
-	// TODO@roblou Hacks! Make checkbox background themeable
-	const selectBackgroundColor = theme.getColor(selectBackground);
-	if (selectBackgroundColor) {
-		collector.addRule(`.settings-editor > .settings-body > .settings-tree-container .setting-item-bool .setting-value-checkbox { background-color: ${selectBackgroundColor} !important; }`);
+	const checkboxBackgroundColor = theme.getColor(settingsCheckboxBackground);
+	if (checkboxBackgroundColor) {
+		collector.addRule(`.settings-editor > .settings-body > .settings-tree-container .setting-item-bool .setting-value-checkbox { background-color: ${checkboxBackgroundColor} !important; }`);
 	}
 
-	// TODO@roblou Hacks! Use proper inputbox theming instead of !important
-	const selectBorderColor = theme.getColor(selectBorder);
-	if (selectBorderColor) {
-		collector.addRule(`.settings-editor > .settings-body > .settings-tree-container .setting-item-bool .setting-value-checkbox { border-color: ${selectBorderColor} !important; }`);
-		collector.addRule(`.settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-control > .monaco-inputbox { border: solid 1px ${selectBorderColor} !important; }`);
+	const checkboxBorderColor = theme.getColor(settingsCheckboxBorder);
+	if (checkboxBorderColor) {
+		collector.addRule(`.settings-editor > .settings-body > .settings-tree-container .setting-item-bool .setting-value-checkbox { border-color: ${checkboxBorderColor} !important; }`);
 	}
 
 	const link = theme.getColor(textLinkForeground);
@@ -749,17 +766,12 @@ export class SettingsRenderer implements IRenderer {
 
 		valueControlElement.setAttribute('class', 'setting-item-control');
 		if (element.enum && (element.valueType === 'string' || !element.valueType)) {
-			valueControlElement.classList.add('setting-type-enum');
 			this.renderEnum(element, isSelected, template, valueControlElement, onChange);
 		} else if (element.valueType === 'string') {
-			valueControlElement.classList.add('setting-type-string');
 			this.renderText(element, isSelected, template, valueControlElement, onChange);
 		} else if (element.valueType === 'number' || element.valueType === 'integer') {
-			valueControlElement.classList.add('setting-type-number');
-			const parseFn = element.valueType === 'integer' ? parseInt : parseFloat;
-			this.renderText(element, isSelected, template, valueControlElement, value => onChange(parseFn(value)));
+			this.renderNumber(element, isSelected, template, valueControlElement, onChange);
 		} else {
-			valueControlElement.classList.add('setting-type-complex');
 			this.renderEditInSettingsJson(element, isSelected, template, valueControlElement);
 		}
 	}
@@ -773,10 +785,15 @@ export class SettingsRenderer implements IRenderer {
 	}
 
 	private renderEnum(dataElement: SettingsTreeSettingElement, isSelected: boolean, template: ISettingItemTemplate, element: HTMLElement, onChange: (value: string) => void): void {
+		element.classList.add('setting-type-enum');
 		const idx = dataElement.enum.indexOf(dataElement.value);
 		const displayOptions = dataElement.enum.map(escapeInvisibleChars);
 		const selectBox = new SelectBox(displayOptions, idx, this.contextViewService);
-		template.toDispose.push(attachSelectBoxStyler(selectBox, this.themeService));
+		template.toDispose.push(attachSelectBoxStyler(selectBox, this.themeService, {
+			selectBackground: settingsSelectBackground,
+			selectForeground: settingsSelectForeground,
+			selectBorder: settingsSelectBorder
+		}));
 		selectBox.render(element);
 		if (element.firstElementChild) {
 			element.firstElementChild.setAttribute('tabindex', isSelected ? '0' : '-1');
@@ -787,8 +804,13 @@ export class SettingsRenderer implements IRenderer {
 	}
 
 	private renderText(dataElement: SettingsTreeSettingElement, isSelected: boolean, template: ISettingItemTemplate, element: HTMLElement, onChange: (value: string) => void): void {
+		element.classList.add('setting-type-string');
 		const inputBox = new InputBox(element, this.contextViewService);
-		template.toDispose.push(attachInputBoxStyler(inputBox, this.themeService));
+		template.toDispose.push(attachInputBoxStyler(inputBox, this.themeService, {
+			inputBackground: settingsTextInputBackground,
+			inputForeground: settingsTextInputForeground,
+			inputBorder: settingsTextInputBorder
+		}));
 		template.toDispose.push(inputBox);
 		inputBox.value = dataElement.value;
 		inputBox.inputElement.tabIndex = isSelected ? 0 : -1;
@@ -797,7 +819,26 @@ export class SettingsRenderer implements IRenderer {
 			inputBox.onDidChange(e => onChange(e)));
 	}
 
+	private renderNumber(dataElement: SettingsTreeSettingElement, isSelected: boolean, template: ISettingItemTemplate, element: HTMLElement, onChange: (value: number) => void): void {
+		element.classList.add('setting-type-number');
+		const parseFn = dataElement.valueType === 'integer' ? parseInt : parseFloat;
+
+		const inputBox = new InputBox(element, this.contextViewService);
+		template.toDispose.push(attachInputBoxStyler(inputBox, this.themeService, {
+			inputBackground: settingsNumberInputBackground,
+			inputForeground: settingsNumberInputForeground,
+			inputBorder: settingsNumberInputBorder
+		}));
+		template.toDispose.push(inputBox);
+		inputBox.value = dataElement.value;
+		inputBox.inputElement.tabIndex = isSelected ? 0 : -1;
+
+		template.toDispose.push(
+			inputBox.onDidChange(value => onChange(parseFn(value))));
+	}
+
 	private renderEditInSettingsJson(dataElement: SettingsTreeSettingElement, isSelected: boolean, template: ISettingItemTemplate, element: HTMLElement): void {
+		element.classList.add('setting-type-complex');
 		const openSettingsButton = new Button(element, { title: true, buttonBackground: null, buttonHoverBackground: null });
 		openSettingsButton.onDidClick(() => this._onDidOpenSettings.fire());
 		openSettingsButton.label = localize('editInSettingsJson', "Edit in settings.json");