ignore window.systemColorTheme when window.autoDetectColorScheme is enabled (microsoft#211265)

* ignore window.systemColorTheme when window.autoDetectColorScheme is enabled

* remove import

Author: aeschli

src/vs/platform/theme/electron-main/themeMainService.ts

@@ -22,7 +22,10 @@ const THEME_STORAGE_KEY = 'theme';
 const THEME_BG_STORAGE_KEY = 'themeBackground';
 const THEME_WINDOW_SPLASH = 'windowSplash';
 
-const SYSTEM_COLOR_THEME = 'window.systemColorTheme';
+namespace ThemeSettings {
+	export const DETECT_COLOR_SCHEME = 'window.autoDetectColorScheme';
+	export const SYSTEM_COLOR_THEME = 'window.systemColorTheme';
+}
 
 export const IThemeMainService = createDecorator<IThemeMainService>('themeMainService');
 
@@ -51,35 +54,43 @@ export class ThemeMainService extends Disposable implements IThemeMainService {
 		super();
 
 		// System Theme
-		this._register(this.configurationService.onDidChangeConfiguration(e => {
-			if (e.affectsConfiguration(SYSTEM_COLOR_THEME)) {
-				this.updateSystemColorTheme();
-			}
-		}));
+		if (!isLinux) {
+			this._register(this.configurationService.onDidChangeConfiguration(e => {
+				if (e.affectsConfiguration(ThemeSettings.SYSTEM_COLOR_THEME) || e.affectsConfiguration(ThemeSettings.DETECT_COLOR_SCHEME)) {
+					this.updateSystemColorTheme();
+				}
+			}));
+		}
 		this.updateSystemColorTheme();
 
 		// Color Scheme changes
 		this._register(Event.fromNodeEventEmitter(nativeTheme, 'updated')(() => this._onDidChangeColorScheme.fire(this.getColorScheme())));
 	}
 
 	private updateSystemColorTheme(): void {
-		switch (this.configurationService.getValue<'default' | 'matchColorTheme' | 'light' | 'dark'>(SYSTEM_COLOR_THEME)) {
-			case 'dark':
-				nativeTheme.themeSource = 'dark';
-				break;
-			case 'light':
-				nativeTheme.themeSource = 'light';
-				break;
-			case 'matchColorTheme':
-				switch (this.getBaseTheme()) {
-					case 'vs': nativeTheme.themeSource = 'light'; break;
-					case 'vs-dark': nativeTheme.themeSource = 'dark'; break;
-					default: nativeTheme.themeSource = 'system';
-				}
-				break;
-			default:
-				nativeTheme.themeSource = 'system';
-				break;
+		if (isLinux || this.configurationService.getValue(ThemeSettings.DETECT_COLOR_SCHEME)) {
+			// only with `system` we can detect the system color scheme
+			nativeTheme.themeSource = 'system';
+		} else {
+			switch (this.configurationService.getValue<'default' | 'auto' | 'light' | 'dark'>(ThemeSettings.SYSTEM_COLOR_THEME)) {
+				case 'dark':
+					nativeTheme.themeSource = 'dark';
+					break;
+				case 'light':
+					nativeTheme.themeSource = 'light';
+					break;
+				case 'auto':
+					switch (this.getBaseTheme()) {
+						case 'vs': nativeTheme.themeSource = 'light'; break;
+						case 'vs-dark': nativeTheme.themeSource = 'dark'; break;
+						default: nativeTheme.themeSource = 'system';
+					}
+					break;
+				default:
+					nativeTheme.themeSource = 'system';
+					break;
+			}
+
 		}
 	}
 

src/vs/workbench/contrib/themes/browser/themes.contribution.ts

@@ -49,7 +49,6 @@ import { IPreferencesService } from 'vs/workbench/services/preferences/common/pr
 import { Toggle } from 'vs/base/browser/ui/toggle/toggle';
 import { defaultToggleStyles } from 'vs/platform/theme/browser/defaultStyles';
 import { DisposableStore } from 'vs/base/common/lifecycle';
-import { COLOR_THEME_CONFIGURATION_SETTINGS_TAG } from 'vs/workbench/services/themes/common/themeConfiguration';
 
 export const manageExtensionIcon = registerIcon('theme-selection-manage-extension', Codicon.gear, localize('manageExtensionIcon', 'Icon for the \'Manage\' action in the theme selection quick pick.'));
 
@@ -425,12 +424,12 @@ registerAction2(class extends Action2 {
 
 	private getTitle(colorScheme: ColorScheme | undefined): string {
 		switch (colorScheme) {
-			case ColorScheme.DARK: return localize('themes.selectTheme.darkScheme', "Select Color Theme for Dark OS System Theme");
-			case ColorScheme.LIGHT: return localize('themes.selectTheme.lightScheme', "Select Color Theme for Light OS System Theme");
-			case ColorScheme.HIGH_CONTRAST_DARK: return localize('themes.selectTheme.darkHC', "Select Color Theme for Dark High Contrast Mode");
-			case ColorScheme.HIGH_CONTRAST_LIGHT: return localize('themes.selectTheme.lightHC', "Select Color Theme for Light High Contrast Mode");
+			case ColorScheme.DARK: return localize('themes.selectTheme.darkScheme', "Select Color Theme for System Dark Mode");
+			case ColorScheme.LIGHT: return localize('themes.selectTheme.lightScheme', "Select Color Theme for System Light Mode");
+			case ColorScheme.HIGH_CONTRAST_DARK: return localize('themes.selectTheme.darkHC', "Select Color Theme for High Contrast Dark Mode");
+			case ColorScheme.HIGH_CONTRAST_LIGHT: return localize('themes.selectTheme.lightHC', "Select Color Theme for High Contrast Light Mode");
 			default:
-				return localize('themes.selectTheme.default', "Select Color Theme for all OS System Themes");
+				return localize('themes.selectTheme.default', "Select Color Theme (detect system color mode disabled)");
 		}
 	}
 
@@ -443,14 +442,14 @@ registerAction2(class extends Action2 {
 		let modeConfigureToggle;
 		if (preferredColorScheme) {
 			modeConfigureToggle = new Toggle({
-				title: localize('themes.configure.switchingEnabled', 'Configure themes for other OS system themes.'),
+				title: localize('themes.configure.switchingEnabled', 'Detect system color mode enabled. Click to configure.'),
 				icon: Codicon.colorMode,
 				isChecked: false,
 				...defaultToggleStyles
 			});
 		} else {
 			modeConfigureToggle = new Toggle({
-				title: localize('themes.configure.switchingDisabled', 'Configure themes switching based on the OS system theme.'),
+				title: localize('themes.configure.switchingDisabled', 'Detect system color mode disabled. Click to configure.'),
 				icon: Codicon.colorMode,
 				isChecked: false,
 				...defaultToggleStyles
@@ -465,7 +464,7 @@ registerAction2(class extends Action2 {
 			toggles: [modeConfigureToggle],
 			onToggle: async (toggle, picker) => {
 				picker.hide();
-				await preferencesService.openSettings({ query: `@tag:${COLOR_THEME_CONFIGURATION_SETTINGS_TAG}` });
+				await preferencesService.openSettings({ query: ThemeSettings.DETECT_COLOR_SCHEME });
 			}
 		} satisfies InstalledThemesPickerOptions;
 		const setTheme = (theme: IWorkbenchTheme | undefined, settingsTarget: ThemeSettingTarget) => themeService.setColorTheme(theme as IWorkbenchColorTheme, settingsTarget);
@@ -722,6 +721,21 @@ registerAction2(class extends Action2 {
 	override async run(accessor: ServicesAccessor) {
 		const themeService = accessor.get(IWorkbenchThemeService);
 		const configurationService = accessor.get(IConfigurationService);
+		const notificationService = accessor.get(INotificationService);
+		const preferencesService = accessor.get(IPreferencesService);
+
+		if (configurationService.getValue(ThemeSettings.DETECT_COLOR_SCHEME)) {
+			const message = localize({ key: 'cannotToggle', comment: ['{0} is a setting name'] }, "Cannot toggle between light and dark themes when `{0}` is enabled in settings.", ThemeSettings.DETECT_COLOR_SCHEME);
+			notificationService.prompt(Severity.Info, message, [
+				{
+					label: localize('goToSetting', "Open Settings"),
+					run: () => {
+						return preferencesService.openUserSettings({ query: ThemeSettings.DETECT_COLOR_SCHEME });
+					}
+				}
+			]);
+			return;
+		}
 
 		const currentTheme = themeService.getColorTheme();
 		let newSettingsId: string = ThemeSettings.PREFERRED_DARK_THEME;

src/vs/workbench/services/themes/common/themeConfiguration.ts

@@ -12,7 +12,7 @@ import { IJSONSchema } from 'vs/base/common/jsonSchema';
 import { textmateColorsSchemaId, textmateColorGroupSchemaId } from 'vs/workbench/services/themes/common/colorThemeSchema';
 import { workbenchColorsSchemaId } from 'vs/platform/theme/common/colorRegistry';
 import { tokenStylingSchemaId } from 'vs/platform/theme/common/tokenClassificationRegistry';
-import { ThemeSettings, IWorkbenchColorTheme, IWorkbenchFileIconTheme, IColorCustomizations, ITokenColorCustomizations, IWorkbenchProductIconTheme, ISemanticTokenColorCustomizations, ThemeSettingTarget, ThemeSettingDefaults, ENABLE_SYSTEM_COLOR_SCHEME_SETTING } from 'vs/workbench/services/themes/common/workbenchThemeService';
+import { ThemeSettings, IWorkbenchColorTheme, IWorkbenchFileIconTheme, IColorCustomizations, ITokenColorCustomizations, IWorkbenchProductIconTheme, ISemanticTokenColorCustomizations, ThemeSettingTarget, ThemeSettingDefaults } from 'vs/workbench/services/themes/common/workbenchThemeService';
 import { IConfigurationService, ConfigurationTarget } from 'vs/platform/configuration/common/configuration';
 import { isWeb } from 'vs/base/common/platform';
 import { ColorScheme } from 'vs/platform/theme/common/theme';
@@ -43,7 +43,7 @@ const colorThemeSettingSchema: IConfigurationPropertySchema = {
 };
 const preferredDarkThemeSettingSchema: IConfigurationPropertySchema = {
 	type: 'string', //
-	markdownDescription: nls.localize({ key: 'preferredDarkColorTheme', comment: ['{0} will become a link to another setting.'] }, 'Specifies the color theme when the system color is dark and {0} is enabled.', formatSettingAsLink(ThemeSettings.DETECT_COLOR_SCHEME)),
+	markdownDescription: nls.localize({ key: 'preferredDarkColorTheme', comment: ['{0} will become a link to another setting.'] }, 'Specifies the color theme when system color mode is dark and {0} is enabled.', formatSettingAsLink(ThemeSettings.DETECT_COLOR_SCHEME)),
 	default: ThemeSettingDefaults.COLOR_THEME_DARK,
 	tags: [COLOR_THEME_CONFIGURATION_SETTINGS_TAG],
 	enum: colorThemeSettingEnum,
@@ -53,7 +53,7 @@ const preferredDarkThemeSettingSchema: IConfigurationPropertySchema = {
 };
 const preferredLightThemeSettingSchema: IConfigurationPropertySchema = {
 	type: 'string',
-	markdownDescription: nls.localize({ key: 'preferredLightColorTheme', comment: ['{0} will become a link to another setting.'] }, 'Specifies the color theme when the system color is light and {0} is enabled.', formatSettingAsLink(ThemeSettings.DETECT_COLOR_SCHEME)),
+	markdownDescription: nls.localize({ key: 'preferredLightColorTheme', comment: ['{0} will become a link to another setting.'] }, 'Specifies the color theme when system color mode is light and {0} is enabled.', formatSettingAsLink(ThemeSettings.DETECT_COLOR_SCHEME)),
 	default: ThemeSettingDefaults.COLOR_THEME_LIGHT,
 	tags: [COLOR_THEME_CONFIGURATION_SETTINGS_TAG],
 	enum: colorThemeSettingEnum,
@@ -83,10 +83,7 @@ const preferredHCLightThemeSettingSchema: IConfigurationPropertySchema = {
 };
 const detectColorSchemeSettingSchema: IConfigurationPropertySchema = {
 	type: 'boolean',
-	markdownDescription:
-		nls.localize({ key: 'detectColorScheme', comment: ['{0} and {1} will become links to other settings.'] }, 'If enabled, will automatically select a color theme based on the OS system color. If the OS system color is dark, the theme specified at {0} is used, else {1}.', formatSettingAsLink(ThemeSettings.PREFERRED_DARK_THEME), formatSettingAsLink(ThemeSettings.PREFERRED_LIGHT_THEME))
-		+ (ENABLE_SYSTEM_COLOR_SCHEME_SETTING ? nls.localize({ key: 'detectColorSchemeSys', comment: ['{0} will become a link to another setting.'] }, '\n\nThis setting is ignored if {0} is configured.', formatSettingAsLink(ThemeSettings.SYSTEM_COLOR_THEME)) : ''),
-
+	markdownDescription: nls.localize({ key: 'detectColorScheme', comment: ['{0} and {1} will become links to other settings.'] }, 'If enabled, will automatically select a color theme based on the system color mode. If the system color mode is dark, {0} is used, else {1}.', formatSettingAsLink(ThemeSettings.PREFERRED_DARK_THEME), formatSettingAsLink(ThemeSettings.PREFERRED_LIGHT_THEME)),
 	default: false,
 	tags: [COLOR_THEME_CONFIGURATION_SETTINGS_TAG],
 };
@@ -316,7 +313,7 @@ export class ThemeConfiguration {
 		if (this.configurationService.getValue(ThemeSettings.DETECT_HC) && this.hostColorService.highContrast) {
 			return this.hostColorService.dark ? ColorScheme.HIGH_CONTRAST_DARK : ColorScheme.HIGH_CONTRAST_LIGHT;
 		}
-		if (this.configurationService.getValue(ThemeSettings.DETECT_COLOR_SCHEME) && (!ENABLE_SYSTEM_COLOR_SCHEME_SETTING || this.configurationService.getValue(ThemeSettings.SYSTEM_COLOR_THEME) === 'default')) {
+		if (this.configurationService.getValue(ThemeSettings.DETECT_COLOR_SCHEME)) {
 			return this.hostColorService.dark ? ColorScheme.DARK : ColorScheme.LIGHT;
 		}
 		return undefined;

src/vs/workbench/services/themes/common/workbenchThemeService.ts

@@ -11,7 +11,6 @@ import { ConfigurationTarget } from 'vs/platform/configuration/common/configurat
 import { isBoolean, isString } from 'vs/base/common/types';
 import { IconContribution, IconDefinition } from 'vs/platform/theme/common/iconRegistry';
 import { ColorScheme } from 'vs/platform/theme/common/theme';
-import { isLinux } from 'vs/base/common/platform';
 
 export const IWorkbenchThemeService = refineServiceDecorator<IThemeService, IWorkbenchThemeService>(IThemeService);
 
@@ -44,8 +43,6 @@ export enum ThemeSettings {
 	SYSTEM_COLOR_THEME = 'window.systemColorTheme'
 }
 
-export const ENABLE_SYSTEM_COLOR_SCHEME_SETTING = !isLinux;
-
 export enum ThemeSettingDefaults {
 	COLOR_THEME_DARK = 'Default Dark Modern',
 	COLOR_THEME_LIGHT = 'Default Light Modern',

src/vs/workbench/services/themes/electron-sandbox/themes.contribution.ts

@@ -6,24 +6,25 @@
 import { localize } from 'vs/nls';
 import { Registry } from 'vs/platform/registry/common/platform';
 import { IConfigurationRegistry, Extensions as ConfigurationExtensions, ConfigurationScope } from 'vs/platform/configuration/common/configurationRegistry';
-import { ENABLE_SYSTEM_COLOR_SCHEME_SETTING, ThemeSettings } from 'vs/workbench/services/themes/common/workbenchThemeService';
+import { ThemeSettings } from 'vs/workbench/services/themes/common/workbenchThemeService';
 import { COLOR_THEME_CONFIGURATION_SETTINGS_TAG, formatSettingAsLink } from 'vs/workbench/services/themes/common/themeConfiguration';
+import { isLinux } from 'vs/base/common/platform';
 
 const configurationRegistry = Registry.as<IConfigurationRegistry>(ConfigurationExtensions.Configuration);
 configurationRegistry.registerConfiguration({
 	properties: {
 		[ThemeSettings.SYSTEM_COLOR_THEME]: {
 			type: 'string',
-			enum: ['default', 'matchColorTheme', 'light', 'dark'],
+			enum: ['default', 'auto', 'light', 'dark'],
 			enumDescriptions: [
-				localize('window.systemColorTheme.default', "System color theme matches the configured OS theme."),
-				localize('window.systemColorTheme.matchColorTheme', "Enforce a light system color theme when a light workbench color theme is configured and the same for configured dark workbench color themes."),
-				localize('window.systemColorTheme.light', "Enforce a light system color theme."),
-				localize('window.systemColorTheme.dark', "Enforce a dark system color theme."),
+				localize('window.systemColorTheme.default', "Native widget colors match the system colors."),
+				localize('window.systemColorTheme.auto', "Use light native widget colors for light color themes and dark for dark color themes."),
+				localize('window.systemColorTheme.light', "Use light native widget colors."),
+				localize('window.systemColorTheme.dark', "Use dark native widget colors."),
 			],
-			markdownDescription: localize({ key: 'window.systemColorTheme', comment: ['{0} and {1} will become links to other settings.'] }, "Overrides the system color theme that is used for native UI elements such as native dialogs, menus and title bar. Even if your OS is configured in light appearance mode, you can select a dark system color theme for the window. You can also configure to automatically adjust based on the {0} setting. Note: Using this setting will disable {1}.", formatSettingAsLink(ThemeSettings.COLOR_THEME), formatSettingAsLink(ThemeSettings.DETECT_COLOR_SCHEME)),
+			markdownDescription: localize({ key: 'window.systemColorTheme', comment: ['{0} and {1} will become links to other settings.'] }, "Set the color mode for native UI elements such as native dialogs, menus and title bar. Even if your OS is configured in light color mode, you can select a dark system color theme for the window. You can also configure to automatically adjust based on the {0} setting.\n\nNote: This setting is ignored when {1} is enabled.", formatSettingAsLink(ThemeSettings.COLOR_THEME), formatSettingAsLink(ThemeSettings.DETECT_COLOR_SCHEME)),
 			default: 'default',
-			included: ENABLE_SYSTEM_COLOR_SCHEME_SETTING,
+			included: !isLinux,
 			scope: ConfigurationScope.APPLICATION,
 			tags: [COLOR_THEME_CONFIGURATION_SETTINGS_TAG],
 		}