Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Set new default theme #179812

Merged
merged 1 commit into from
Apr 12, 2023
Merged

Set new default theme #179812

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions extensions/theme-defaults/package.nls.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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",
Expand Down
2 changes: 1 addition & 1 deletion extensions/theme-defaults/themes/dark_plus.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"$schema": "vscode://schemas/color-theme",
"name": "Dark+ (default dark)",
"name": "Dark+",
"include": "./dark_vs.json",
"tokenColors": [
{
Expand Down
2 changes: 1 addition & 1 deletion extensions/theme-defaults/themes/dark_plus_experimental.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -134,6 +134,6 @@
"titleBar.inactiveForeground": "#8b949e",
"welcomePage.tileBackground": "#ffffff0f",
"welcomePage.progress.foreground": "#0078d4",
"widgetBorder": "#ffffff15",
"widget.border": "#ffffff15",
},
}
2 changes: 1 addition & 1 deletion extensions/theme-defaults/themes/light_plus.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
{
Expand Down
2 changes: 1 addition & 1 deletion extensions/theme-defaults/themes/light_plus_experimental.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -147,6 +147,6 @@
"titleBar.inactiveBackground": "#f8f8f8",
"titleBar.inactiveForeground": "#8b949e",
"welcomePage.tileBackground": "#f3f3f3",
"widgetBorder": "#0000001a",
"widget.border": "#0000001a",
},
}
56 changes: 54 additions & 2 deletions src/vs/workbench/contrib/themes/browser/themes.contribution.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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.'));

Expand Down Expand Up @@ -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),
Copy link
Contributor

@sean-mcmanus sean-mcmanus Apr 13, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@aeschli Wrong backtick...actually, that's fine it's the " should be `

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

All is correct, right? No backtick needed here, localize does the substitution.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oops, you're right. Maybe this._workbenchThemeService.getColorTheme().label empty for some reason.

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);
9 changes: 5 additions & 4 deletions src/vs/workbench/contrib/welcomeGettingStarted/common/media/theme_picker.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
5 changes: 2 additions & 3 deletions src/vs/workbench/services/themes/browser/productIconThemeData.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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;
Expand Down
20 changes: 13 additions & 7 deletions src/vs/workbench/services/themes/browser/workbenchThemeService.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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

Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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;
rzhao271 marked this conversation as resolved.
Show resolved Hide resolved

// 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;
}
Expand Down Expand Up @@ -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();
Expand Down Expand Up @@ -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)) {
Expand All @@ -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');
}
});

Expand Down Expand Up @@ -423,6 +425,10 @@ export class WorkbenchThemeService implements IWorkbenchThemeService {
return null;
}

public hasUpdatedDefaultThemes(): boolean {
return this.hasDefaultUpdated;
}

public getColorTheme(): IWorkbenchColorTheme {
return this.currentColorTheme;
}
Expand Down
16 changes: 16 additions & 0 deletions src/vs/workbench/services/themes/common/colorThemeData.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
rzhao271 marked this conversation as resolved.
Show resolved Hide resolved
'statusBar.background': '#f8f8f8',
'statusBar.noFolderBackground': '#f8f8f8'
};
} else {
colorMap = {
'activityBar.background': '#181818',
'statusBar.background': '#181818',
'statusBar.noFolderBackground': '#1f1f1f',
};
}

}
return ColorThemeData.createUnloadedTheme(getThemeTypeSelector(themeType), colorMap);
}

Expand Down
Loading