Set new default theme (#179812)

extensions/theme-defaults/package.nls.json

@@ -1,10 +1,10 @@
 {
  "displayName": "Default Themes",
  "description": "The default Visual Studio light and dark themes",
- "darkPlusColorThemeLabel": "Dark+ (default dark)",
- "darkPlusExperimentalColorThemeLabel": "Dark+ V2 (Experimental)",
- "lightPlusColorThemeLabel": "Light+ (default light)",
- "lightPlusExperimentalColorThemeLabel": "Light+ V2 (Experimental)",
+ "darkPlusColorThemeLabel": "Dark+",
+ "darkPlusExperimentalColorThemeLabel": "Dark+ Experimental",
+ "lightPlusColorThemeLabel": "Light+",
+ "lightPlusExperimentalColorThemeLabel": "Light+ Experimental",
  "darkColorThemeLabel": "Dark (Visual Studio)",
  "lightColorThemeLabel": "Light (Visual Studio)",
  "hcColorThemeLabel": "Dark High Contrast",

extensions/theme-defaults/themes/dark_plus.json

@@ -1,6 +1,6 @@
 {
  "$schema": "vscode://schemas/color-theme",
- "name": "Dark+ (default dark)",
+ "name": "Dark+",
  "include": "./dark_vs.json",
  "tokenColors": [
  {

extensions/theme-defaults/themes/dark_plus_experimental.json

@@ -134,6 +134,6 @@
  "titleBar.inactiveForeground": "#8b949e",
  "welcomePage.tileBackground": "#ffffff0f",
  "welcomePage.progress.foreground": "#0078d4",
- "widgetBorder": "#ffffff15",
+ "widget.border": "#ffffff15",
  },
 }

extensions/theme-defaults/themes/light_plus.json

@@ -1,6 +1,6 @@
 {
  "$schema": "vscode://schemas/color-theme",
- "name": "Light+ (default light)",
+ "name": "Light+",
  "include": "./light_vs.json",
  "tokenColors": [ // adds rules to the light vs rules
  {

extensions/theme-defaults/themes/light_plus_experimental.json

@@ -147,6 +147,6 @@
  "titleBar.inactiveBackground": "#f8f8f8",
  "titleBar.inactiveForeground": "#8b949e",
  "welcomePage.tileBackground": "#f3f3f3",
- "widgetBorder": "#0000001a",
+ "widget.border": "#0000001a",
  },
 }

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

@@ -9,7 +9,7 @@ import { MenuRegistry, MenuId, Action2, registerAction2, ISubmenuItem } from 'vs
 import { equalsIgnoreCase } from 'vs/base/common/strings';
 import { Registry } from 'vs/platform/registry/common/platform';
 import { Categories } from 'vs/platform/action/common/actionCommonCategories';
-import { IWorkbenchThemeService, IWorkbenchTheme, ThemeSettingTarget, IWorkbenchColorTheme, IWorkbenchFileIconTheme, IWorkbenchProductIconTheme, ThemeSettings } from 'vs/workbench/services/themes/common/workbenchThemeService';
+import { IWorkbenchThemeService, IWorkbenchTheme, ThemeSettingTarget, IWorkbenchColorTheme, IWorkbenchFileIconTheme, IWorkbenchProductIconTheme, ThemeSettings, ThemeSettingDefaults } from 'vs/workbench/services/themes/common/workbenchThemeService';
 import { VIEWLET_ID, IExtensionsViewPaneContainer } from 'vs/workbench/contrib/extensions/common/extensions';
 import { IExtensionGalleryService, IExtensionManagementService, IGalleryExtension } from 'vs/platform/extensionManagement/common/extensionManagement';
 import { IColorRegistry, Extensions as ColorRegistryExtensions } from 'vs/platform/theme/common/colorRegistry';
@@ -33,10 +33,16 @@ import { Emitter } from 'vs/base/common/event';
 import { IExtensionResourceLoaderService } from 'vs/platform/extensionResourceLoader/common/extensionResourceLoader';
 import { IInstantiationService, ServicesAccessor } from 'vs/platform/instantiation/common/instantiation';
 import { KeybindingWeight } from 'vs/platform/keybinding/common/keybindingsRegistry';
-import { CommandsRegistry } from 'vs/platform/commands/common/commands';
+import { CommandsRegistry, ICommandService } from 'vs/platform/commands/common/commands';
 import { FileIconThemeData } from 'vs/workbench/services/themes/browser/fileIconThemeData';
 import { IConfigurationService } from 'vs/platform/configuration/common/configuration';
 import { IDialogService } from 'vs/platform/dialogs/common/dialogs';
+import { IWorkbenchContribution, IWorkbenchContributionsRegistry, Extensions } from 'vs/workbench/common/contributions';
+import { LifecyclePhase } from 'vs/workbench/services/lifecycle/common/lifecycle';
+import { INotificationService, Severity } from 'vs/platform/notification/common/notification';
+import { IStorageService, StorageScope, StorageTarget } from 'vs/platform/storage/common/storage';
+import { toAction } from 'vs/base/common/actions';
+import { isWeb } from 'vs/base/common/platform';
 
 export const manageExtensionIcon = registerIcon('theme-selection-manage-extension', Codicon.gear, localize('manageExtensionIcon', 'Icon for the \'Manage\' action in the theme selection quick pick.'));
 
@@ -693,3 +699,49 @@ MenuRegistry.appendMenuItem(ThemesSubMenu, {
  order: 3
 });
 
+class DefaultThemeUpdatedNotificationContribution implements IWorkbenchContribution {
+
+ static STORAGE_KEY = 'themeUpdatedNotificationShown';
+
+ constructor(
+ @INotificationService private readonly _notificationService: INotificationService,
+ @IWorkbenchThemeService private readonly _workbenchThemeService: IWorkbenchThemeService,
+ @IStorageService private readonly _storageService: IStorageService,
+ @ICommandService private readonly _commandService: ICommandService,
+ ) {
+ if (!this._workbenchThemeService.hasUpdatedDefaultThemes()) {
+ return;
+ }
+ if (_storageService.getBoolean(DefaultThemeUpdatedNotificationContribution.STORAGE_KEY, StorageScope.APPLICATION)) {
+ return;
+ }
+ setTimeout(() => {
+ this._showNotification();
+ }, 6000);
+ }
+
+ private async _showNotification(): Promise<void> {
+ this._storageService.store(DefaultThemeUpdatedNotificationContribution.STORAGE_KEY, true, StorageScope.APPLICATION, StorageTarget.USER);
+ await this._notificationService.notify({
+ id: 'themeUpdatedNotification',
+ severity: Severity.Info,
+ message: localize({ key: 'themeUpdatedNotification', comment: ['{0} is the name of the new default theme'] }, "VS Code now ships with a new default theme '{0}'. We hope you like it. If not, you can switch back to the old theme or try one of the many other color themes available.", this._workbenchThemeService.getColorTheme().label),
+ actions: {
+ primary: [
+ toAction({ id: 'themeUpdated.browseThemes', label: localize('browseThemes', "Browse Themes"), run: () => this._commandService.executeCommand(SelectColorThemeCommandId) }),
+ toAction({
+ id: 'themeUpdated.revert', label: localize('revert', "Revert"), run: async () => {
+ const oldSettingsId = isWeb ? ThemeSettingDefaults.COLOR_THEME_LIGHT_OLD : ThemeSettingDefaults.COLOR_THEME_DARK_OLD;
+ const oldTheme = (await this._workbenchThemeService.getColorThemes()).find(theme => theme.settingsId === oldSettingsId);
+ if (oldTheme) {
+ this._workbenchThemeService.setColorTheme(oldTheme, 'auto');
+ }
+ }
+ })
+ ]
+ }
+ });
+ }
+}
+const workbenchRegistry = Registry.as<IWorkbenchContributionsRegistry>(Extensions.Workbench);
+workbenchRegistry.registerWorkbenchContribution(DefaultThemeUpdatedNotificationContribution, LifecyclePhase.Ready);

src/vs/workbench/contrib/welcomeGettingStarted/common/media/theme_picker.ts

@@ -5,25 +5,26 @@
 
 import { escape } from 'vs/base/common/strings';
 import { localize } from 'vs/nls';
+import { ThemeSettingDefaults } from 'vs/workbench/services/themes/common/workbenchThemeService';
 
 export default () => `
 <checklist>
  <div class="theme-picker-row">
- <checkbox when-checked="setTheme:Default Dark+" checked-on="config.workbench.colorTheme == 'Default Dark+'">
+ <checkbox when-checked="setTheme:${ThemeSettingDefaults.COLOR_THEME_DARK}" checked-on="config.workbench.colorTheme == '${ThemeSettingDefaults.COLOR_THEME_DARK}'">
  <img width="200" src="./dark.png"/>
  ${escape(localize('dark', "Dark"))}
  </checkbox>
- <checkbox when-checked="setTheme:Default Light+" checked-on="config.workbench.colorTheme == 'Default Light+'">
+ <checkbox when-checked="setTheme:${ThemeSettingDefaults.COLOR_THEME_LIGHT}" checked-on="config.workbench.colorTheme == '${ThemeSettingDefaults.COLOR_THEME_LIGHT}'">
  <img width="200" src="./light.png"/>
  ${escape(localize('light', "Light"))}
  </checkbox>
  </div>
  <div class="theme-picker-row">
- <checkbox when-checked="setTheme:Default High Contrast" checked-on="config.workbench.colorTheme == 'Default High Contrast'">
+ <checkbox when-checked="setTheme:${ThemeSettingDefaults.COLOR_THEME_HC_DARK}" checked-on="config.workbench.colorTheme == '${ThemeSettingDefaults.COLOR_THEME_HC_DARK}'">
  <img width="200" src="./dark-hc.png"/>
  ${escape(localize('HighContrast', "Dark High Contrast"))}
  </checkbox>
- <checkbox when-checked="setTheme:Default High Contrast Light" checked-on="config.workbench.colorTheme == 'Default High Contrast Light'">
+ <checkbox when-checked="setTheme:${ThemeSettingDefaults.COLOR_THEME_HC_LIGHT}" checked-on="config.workbench.colorTheme == '${ThemeSettingDefaults.COLOR_THEME_HC_LIGHT}'">
  <img width="200" src="./light-hc.png"/>
  ${escape(localize('HighContrastLight', "Light High Contrast"))}
  </checkbox>

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

@@ -8,10 +8,9 @@ import * as nls from 'vs/nls';
 import * as Paths from 'vs/base/common/path';
 import * as resources from 'vs/base/common/resources';
 import * as Json from 'vs/base/common/json';
-import { ExtensionData, IThemeExtensionPoint, IWorkbenchProductIconTheme } from 'vs/workbench/services/themes/common/workbenchThemeService';
+import { ExtensionData, IThemeExtensionPoint, IWorkbenchProductIconTheme, ThemeSettingDefaults } from 'vs/workbench/services/themes/common/workbenchThemeService';
 import { getParseErrorMessage } from 'vs/base/common/jsonErrorMessages';
 import { IStorageService, StorageScope, StorageTarget } from 'vs/platform/storage/common/storage';
-import { DEFAULT_PRODUCT_ICON_THEME_SETTING_VALUE } from 'vs/workbench/services/themes/common/themeConfiguration';
 import { fontIdRegex, fontWeightRegex, fontStyleRegex, fontFormatRegex } from 'vs/workbench/services/themes/common/productIconThemeSchema';
 import { isObject, isString } from 'vs/base/common/types';
 import { ILogService } from 'vs/platform/log/common/log';
@@ -98,7 +97,7 @@ export class ProductIconThemeData implements IWorkbenchProductIconTheme {
  static get defaultTheme(): ProductIconThemeData {
  let themeData = ProductIconThemeData._defaultProductIconTheme;
  if (!themeData) {
- themeData = ProductIconThemeData._defaultProductIconTheme = new ProductIconThemeData(DEFAULT_PRODUCT_ICON_THEME_ID, nls.localize('defaultTheme', 'Default'), DEFAULT_PRODUCT_ICON_THEME_SETTING_VALUE);
+ themeData = ProductIconThemeData._defaultProductIconTheme = new ProductIconThemeData(DEFAULT_PRODUCT_ICON_THEME_ID, nls.localize('defaultTheme', 'Default'), ThemeSettingDefaults.PRODUCT_ICON_THEME);
  themeData.isLoaded = true;
  themeData.extensionData = undefined;
  themeData.watch = false;

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

@@ -6,7 +6,7 @@
 import * as nls from 'vs/nls';
 import * as types from 'vs/base/common/types';
 import { IExtensionService } from 'vs/workbench/services/extensions/common/extensions';
-import { IWorkbenchThemeService, IWorkbenchColorTheme, IWorkbenchFileIconTheme, ExtensionData, VS_LIGHT_THEME, VS_DARK_THEME, VS_HC_THEME, VS_HC_LIGHT_THEME, ThemeSettings, IWorkbenchProductIconTheme, ThemeSettingTarget } from 'vs/workbench/services/themes/common/workbenchThemeService';
+import { IWorkbenchThemeService, IWorkbenchColorTheme, IWorkbenchFileIconTheme, ExtensionData, VS_LIGHT_THEME, VS_DARK_THEME, VS_HC_THEME, VS_HC_LIGHT_THEME, ThemeSettings, IWorkbenchProductIconTheme, ThemeSettingTarget, ThemeSettingDefaults } from 'vs/workbench/services/themes/common/workbenchThemeService';
 import { IStorageService, StorageScope, StorageTarget } from 'vs/platform/storage/common/storage';
 import { ITelemetryService } from 'vs/platform/telemetry/common/telemetry';
 import { Registry } from 'vs/platform/registry/common/platform';
@@ -44,9 +44,6 @@ import { ILanguageService } from 'vs/editor/common/languages/language';
 
 // implementation
 
-const DEFAULT_COLOR_THEME_ID = 'vs-dark vscode-theme-defaults-themes-dark_plus-json';
-const DEFAULT_LIGHT_COLOR_THEME_ID = 'vs vscode-theme-defaults-themes-light_plus-json';
-
 const PERSISTED_OS_COLOR_SCHEME = 'osColorScheme';
 const PERSISTED_OS_COLOR_SCHEME_SCOPE = StorageScope.APPLICATION; // the OS scheme depends on settings in the OS
 
@@ -104,6 +101,8 @@ export class WorkbenchThemeService implements IWorkbenchThemeService {
 
  private themeSettingIdBeforeSchemeSwitch: string | undefined;
 
+ private hasDefaultUpdated: boolean = false;
+
  constructor(
  @IExtensionService extensionService: IExtensionService,
  @IStorageService private readonly storageService: IStorageService,
@@ -145,6 +144,8 @@ export class WorkbenchThemeService implements IWorkbenchThemeService {
  // a color theme document with good defaults until the theme is loaded
  let themeData: ColorThemeData | undefined = ColorThemeData.fromStorageData(this.storageService);
  if (themeData && this.settings.colorTheme !== themeData.settingsId && this.settings.isDefaultColorTheme()) {
+ this.hasDefaultUpdated = themeData.settingsId === ThemeSettingDefaults.COLOR_THEME_DARK_OLD || themeData.settingsId === ThemeSettingDefaults.COLOR_THEME_LIGHT_OLD;
+
  // the web has different defaults than the desktop, therefore do not restore when the setting is the default theme and the storage doesn't match that.
  themeData = undefined;
  }
@@ -206,7 +207,7 @@ export class WorkbenchThemeService implements IWorkbenchThemeService {
  if (devThemes.length) {
  return this.setColorTheme(devThemes[0].id, ConfigurationTarget.MEMORY);
  }
- const fallbackTheme = this.currentColorTheme.type === ColorScheme.LIGHT ? DEFAULT_LIGHT_COLOR_THEME_ID : DEFAULT_COLOR_THEME_ID;
+ const fallbackTheme = this.currentColorTheme.type === ColorScheme.LIGHT ? ThemeSettingDefaults.COLOR_THEME_LIGHT : ThemeSettingDefaults.COLOR_THEME_DARK;
  const theme = this.colorThemeRegistry.findThemeBySettingsId(this.settings.colorTheme, fallbackTheme);
 
  const preferredColorScheme = this.getPreferredColorScheme();
@@ -307,7 +308,7 @@ export class WorkbenchThemeService implements IWorkbenchThemeService {
  updateColorThemeConfigurationSchemas(event.themes);
  if (await this.restoreColorTheme()) { // checks if theme from settings exists and is set
  // restore theme
- if (this.currentColorTheme.id === DEFAULT_COLOR_THEME_ID && !types.isUndefined(prevColorId) && await this.colorThemeRegistry.findThemeById(prevColorId)) {
+ if (this.currentColorTheme.settingsId === ThemeSettingDefaults.COLOR_THEME_DARK && !types.isUndefined(prevColorId) && await this.colorThemeRegistry.findThemeById(prevColorId)) {
  await this.setColorTheme(prevColorId, 'auto');
  prevColorId = undefined;
  } else if (event.added.some(t => t.settingsId === this.currentColorTheme.settingsId)) {
@@ -316,7 +317,8 @@ export class WorkbenchThemeService implements IWorkbenchThemeService {
  } else if (event.removed.some(t => t.settingsId === this.currentColorTheme.settingsId)) {
  // current theme is no longer available
  prevColorId = this.currentColorTheme.id;
- await this.setColorTheme(DEFAULT_COLOR_THEME_ID, 'auto');
+ const defaultTheme = this.colorThemeRegistry.findThemeBySettingsId(ThemeSettingDefaults.COLOR_THEME_DARK);
+ await this.setColorTheme(defaultTheme, 'auto');
  }
  });
 
@@ -423,6 +425,10 @@ export class WorkbenchThemeService implements IWorkbenchThemeService {
  return null;
  }
 
+ public hasUpdatedDefaultThemes(): boolean {
+ return this.hasDefaultUpdated;
+ }
+
  public getColorTheme(): IWorkbenchColorTheme {
  return this.currentColorTheme;
  }

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

@@ -587,6 +587,22 @@ export class ColorThemeData implements IWorkbenchColorTheme {
  // constructors
 
  static createUnloadedThemeForThemeType(themeType: ColorScheme, colorMap?: { [id: string]: string }): ColorThemeData {
+ if (!colorMap) {
+ if (themeType === ColorScheme.LIGHT) {
+ colorMap = {
+ 'activityBar.background': '#f8f8f8',
+ 'statusBar.background': '#f8f8f8',
+ 'statusBar.noFolderBackground': '#f8f8f8'
+ };
+ } else {
+ colorMap = {
+ 'activityBar.background': '#181818',
+ 'statusBar.background': '#181818',
+ 'statusBar.noFolderBackground': '#1f1f1f',
+ };
+ }
+
+ }
  return ColorThemeData.createUnloadedTheme(getThemeTypeSelector(themeType), colorMap);
  }