web: API to prevent initial theme flickering (also fixes #101226)

src/vs/code/electron-browser/workbench/workbench.js

@@ -79,7 +79,6 @@ bootstrapWindow.load([
  * @param {{
  *	partsSplashPath?: string,
  *	highContrast?: boolean,
- *	defaultThemeType?: string,
  *	extensionDevelopmentPath?: string[],
  *	folderUri?: object,
  *	workspace?: object
@@ -113,14 +112,10 @@ function showPartsSplash(configuration) {
 		baseTheme = data.baseTheme;
 		shellBackground = data.colorInfo.editorBackground;
 		shellForeground = data.colorInfo.foreground;
-	} else if (configuration.highContrast || configuration.defaultThemeType === 'hc') {
+	} else if (configuration.highContrast) {
 		baseTheme = 'hc-black';
 		shellBackground = '#000000';
 		shellForeground = '#FFFFFF';
-	} else if (configuration.defaultThemeType === 'vs') {
-		baseTheme = 'vs';
-		shellBackground = '#FFFFFF';
-		shellForeground = '#000000';
 	} else {
 		baseTheme = 'vs-dark';
 		shellBackground = '#1E1E1E';

src/vs/platform/windows/common/windows.ts

@@ -7,7 +7,6 @@ import { isMacintosh, isLinux, isWeb } from 'vs/base/common/platform';
 import { IEnvironmentService } from 'vs/platform/environment/common/environment';
 import { URI, UriComponents } from 'vs/base/common/uri';
 import { IConfigurationService } from 'vs/platform/configuration/common/configuration';
-import { ThemeType } from 'vs/platform/theme/common/themeService';
 import { IWorkspaceIdentifier, ISingleFolderWorkspaceIdentifier } from 'vs/platform/workspaces/common/workspaces';
 
 export interface IBaseOpenWindowsOptions {
@@ -182,7 +181,6 @@ export interface IWindowConfiguration {
 	remoteAuthority?: string;
 
 	highContrast?: boolean;
-	defaultThemeType?: ThemeType;
 
 	filesToOpenOrCreate?: IPath[];
 	filesToDiff?: IPath[];

src/vs/workbench/services/environment/browser/environmentService.ts

@@ -14,7 +14,6 @@ import { IWorkbenchConstructionOptions } from 'vs/workbench/workbench.web.api';
 import product from 'vs/platform/product/common/product';
 import { memoize } from 'vs/base/common/decorators';
 import { onUnexpectedError } from 'vs/base/common/errors';
-import { LIGHT } from 'vs/platform/theme/common/themeService';
 import { parseLineAndColumnAware } from 'vs/base/common/extpath';
 
 export class BrowserEnvironmentConfiguration implements IEnvironmentConfiguration {
@@ -78,10 +77,6 @@ export class BrowserEnvironmentConfiguration implements IEnvironmentConfiguratio
 	get highContrast() {
 		return false; // could investigate to detect high contrast theme automatically
 	}
-
-	get defaultThemeType() {
-		return LIGHT;
-	}
 }
 
 interface IBrowserWorkbenchEnvironmentConstructionOptions extends IWorkbenchConstructionOptions {

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

@@ -33,6 +33,7 @@ import { updateColorThemeConfigurationSchemas, updateFileIconThemeConfigurationS
 import { ProductIconThemeData, DEFAULT_PRODUCT_ICON_THEME_ID } from 'vs/workbench/services/themes/browser/productIconThemeData';
 import { registerProductIconThemeSchemas } from 'vs/workbench/services/themes/common/productIconThemeSchema';
 import { ILogService } from 'vs/platform/log/common/log';
+import { isWeb } from 'vs/base/common/platform';
 
 // implementation
 
@@ -102,8 +103,7 @@ export class WorkbenchThemeService implements IWorkbenchThemeService {
 		@ILogService private readonly logService: ILogService
 	) {
 		this.container = layoutService.container;
-		const defaultThemeType = environmentService.configuration.defaultThemeType || DARK;
-		this.settings = new ThemeConfiguration(configurationService, defaultThemeType);
+		this.settings = new ThemeConfiguration(configurationService);
 
 		this.colorThemeRegistry = new ThemeRegistry(extensionService, colorThemesExtPoint, ColorThemeData.fromExtensionTheme);
 		this.colorThemeWatcher = new ThemeFileWatcher(fileService, environmentService, this.reloadCurrentColorTheme.bind(this));
@@ -128,7 +128,13 @@ export class WorkbenchThemeService implements IWorkbenchThemeService {
 			themeData = ColorThemeData.createUnloadedThemeForThemeType(HIGH_CONTRAST);
 		}
 		if (!themeData) {
-			themeData = ColorThemeData.createUnloadedThemeForThemeType(defaultThemeType);
+			const initialColorTheme = environmentService.options?.initialColorTheme;
+			if (initialColorTheme) {
+				themeData = ColorThemeData.createUnloadedThemeForThemeType(initialColorTheme.themeType, initialColorTheme.colors);
+			}
+		}
+		if (!themeData) {
+			themeData = ColorThemeData.createUnloadedThemeForThemeType(isWeb ? LIGHT : DARK);
 		}
 		themeData.setCustomizations(this.settings);
 		this.applyTheme(themeData, undefined, true);

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

@@ -550,15 +550,20 @@ export class ColorThemeData implements IWorkbenchColorTheme {
 
 	// constructors
 
-	static createUnloadedThemeForThemeType(themeType: ThemeType): ColorThemeData {
-		return ColorThemeData.createUnloadedTheme(getThemeTypeSelector(themeType));
+	static createUnloadedThemeForThemeType(themeType: ThemeType, colorMap?: { [id: string]: string }): ColorThemeData {
+		return ColorThemeData.createUnloadedTheme(getThemeTypeSelector(themeType), colorMap);
 	}
 
-	static createUnloadedTheme(id: string): ColorThemeData {
+	static createUnloadedTheme(id: string, colorMap?: { [id: string]: string }): ColorThemeData {
 		let themeData = new ColorThemeData(id, '', '__' + id);
 		themeData.isLoaded = false;
 		themeData.themeTokenColors = [];
 		themeData.watch = false;
+		if (colorMap) {
+			for (let id in colorMap) {
+				themeData.colorMap[id] = Color.fromHex(colorMap[id]);
+			}
+		}
 		return themeData;
 	}
 

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

@@ -14,7 +14,7 @@ import { workbenchColorsSchemaId } from 'vs/platform/theme/common/colorRegistry'
 import { tokenStylingSchemaId } from 'vs/platform/theme/common/tokenClassificationRegistry';
 import { ThemeSettings, IWorkbenchColorTheme, IWorkbenchFileIconTheme, IColorCustomizations, ITokenColorCustomizations, IWorkbenchProductIconTheme, ISemanticTokenColorCustomizations, IExperimentalSemanticTokenColorCustomizations } from 'vs/workbench/services/themes/common/workbenchThemeService';
 import { IConfigurationService, ConfigurationTarget } from 'vs/platform/configuration/common/configuration';
-import { ThemeType, HIGH_CONTRAST, LIGHT } from 'vs/platform/theme/common/themeService';
+import { isWeb } from 'vs/base/common/platform';
 
 const DEFAULT_THEME_DARK_SETTING_VALUE = 'Default Dark+';
 const DEFAULT_THEME_LIGHT_SETTING_VALUE = 'Default Light+';
@@ -33,7 +33,7 @@ const colorThemeSettingEnumDescriptions: string[] = [];
 const colorThemeSettingSchema: IConfigurationPropertySchema = {
 	type: 'string',
 	description: nls.localize('colorTheme', "Specifies the color theme used in the workbench."),
-	default: DEFAULT_THEME_DARK_SETTING_VALUE,
+	default: isWeb ? DEFAULT_THEME_LIGHT_SETTING_VALUE : DEFAULT_THEME_DARK_SETTING_VALUE,
 	enum: colorThemeSettingEnum,
 	enumDescriptions: colorThemeSettingEnumDescriptions,
 	errorMessage: nls.localize('colorThemeError', "Theme is unknown or not installed."),
@@ -110,6 +110,7 @@ const themeSettingsConfiguration: IConfigurationNode = {
 		[ThemeSettings.PRODUCT_ICON_THEME]: productIconThemeSettingSchema
 	}
 };
+configurationRegistry.registerConfiguration(themeSettingsConfiguration);
 
 function tokenGroupSettings(description: string): IJSONSchema {
 	return {
@@ -231,19 +232,7 @@ export function updateProductIconThemeConfigurationSchemas(themes: IWorkbenchPro
 
 
 export class ThemeConfiguration {
-	constructor(private configurationService: IConfigurationService, themeType: ThemeType) {
-		switch (themeType) {
-			case LIGHT:
-				colorThemeSettingSchema.default = DEFAULT_THEME_LIGHT_SETTING_VALUE;
-				break;
-			case HIGH_CONTRAST:
-				colorThemeSettingSchema.default = DEFAULT_THEME_HC_SETTING_VALUE;
-				break;
-			default:
-				colorThemeSettingSchema.default = DEFAULT_THEME_DARK_SETTING_VALUE;
-				break;
-		}
-		configurationRegistry.registerConfiguration(themeSettingsConfiguration);
+	constructor(private configurationService: IConfigurationService) {
 	}
 
 	public get colorTheme(): string {

src/vs/workbench/workbench.web.api.ts

@@ -147,6 +147,15 @@ interface IWindowIndicator {
 	command?: string;
 }
 
+interface IInitialColorTheme {
+	themeType: 'light' | 'dark' | 'hc';
+
+	/**
+	 * a list of workbench colors
+	 */
+	colors?: { [colorId: string]: string };
+}
+
 interface IDefaultSideBarLayout {
 	visible?: boolean;
 	containers?: ({
@@ -381,6 +390,15 @@ interface IWorkbenchConstructionOptions {
 	 */
 	readonly windowIndicator?: IWindowIndicator;
 
+	/**
+	 * Specifies the default theme type (LIGHT, DARK..) and allows to provide initial colors that are shown
+	 * until the color theme that is specified in the settings (`editor.colorTheme`) is loaded and applied.
+	 * Once there are persisted colors from a last run these will be used.
+	 *
+	 * The idea is that the colors match the main colors from the theme defined in the `configurationDefaults`.
+	 */
+	readonly initialColorTheme?: IInitialColorTheme;
+
 	//#endregion