@opensumi/ide-theme 2.21.13 → 2.22.0

package/src/browser/theme-store.ts

@@ -0,0 +1,95 @@
+import { Injectable, Autowired, INJECTOR_TOKEN, Injector } from '@opensumi/di';
+import { URI, getDebugLogger } from '@opensumi/ide-core-common';
+
+import { ThemeContribution, getThemeId } from '../common/theme.service';
+
+import defaultTheme from './default-theme';
+import { ThemeData } from './theme-data';
+
+@Injectable()
+export class ThemeStore {
+  static STORE_THEME_DATA_KEY = 'latestTheme';
+
+  private themes: {
+    [themeId: string]: ThemeData;
+  } = {};
+
+  @Autowired(INJECTOR_TOKEN)
+  injector: Injector;
+
+  protected async initTheme(contribution: ThemeContribution, extPath: URI): Promise<ThemeData> {
+    const themePath = contribution.path.replace(/^\.\//, '');
+    const themeLocation = extPath.resolve(themePath);
+    const themeName = contribution.label;
+    const themeId = getThemeId(contribution);
+    const themeBase = contribution.uiTheme || 'vs-dark';
+    await this.initThemeData(themeId, themeName, themeBase, themeLocation);
+    return this.themes[themeId];
+  }
+
+  private async initThemeData(id: string, themeName: string, themeBase: string, themeLocation: URI) {
+    let themeData = this.themes[id];
+    if (!themeData) {
+      themeData = this.injector.get(ThemeData);
+      await themeData.initializeThemeData(id, themeName, themeBase, themeLocation);
+      this.themes[id] = themeData;
+    }
+  }
+
+  loadDefaultTheme() {
+    getDebugLogger().warn('The default theme extension is not detected, and the default theme style is used.');
+    const theme = this.injector.get(ThemeData);
+    theme.initializeFromData(defaultTheme);
+    return theme;
+  }
+
+  private async tryLoadLatestTheme() {
+    // 尝试使用最近一次缓存的主题信息进行加载
+    const themeData = this.getLatestThemeData();
+    if (themeData) {
+      try {
+        const { contribution, basePath } = themeData;
+        const theme = await this.initTheme(contribution, new URI(basePath));
+        return theme;
+      } catch (e) {
+        // 主题不存在或被卸载时，移除缓存，使用默认样式
+        localStorage.removeItem(ThemeStore.STORE_THEME_DATA_KEY);
+      }
+    }
+    return this.loadDefaultTheme();
+  }
+
+  private storeLatestThemeData(contribution?: ThemeContribution, basePath?: URI) {
+    localStorage.setItem(
+      ThemeStore.STORE_THEME_DATA_KEY,
+      JSON.stringify({ contribution, basePath: basePath?.toString() }),
+    );
+  }
+
+  private getLatestThemeData() {
+    const data = localStorage.getItem(ThemeStore.STORE_THEME_DATA_KEY);
+    if (data) {
+      return JSON.parse(data);
+    }
+  }
+
+  public async getThemeData(contribution?: ThemeContribution, basePath?: URI): Promise<ThemeData> {
+    // 测试情况下传入的contribution为空，尝试加载上次缓存的最新主题
+    if (!contribution || !basePath) {
+      return await this.tryLoadLatestTheme();
+    }
+    const id = getThemeId(contribution);
+    if (!this.themes[id]) {
+      const theme = await this.initTheme(contribution, basePath);
+      if (theme) {
+        // 正常加载主题
+        this.storeLatestThemeData(contribution, basePath);
+        return theme;
+      }
+      // 加载主题出现了未知问题, 使用默认主题配色
+      return this.loadDefaultTheme();
+    }
+    // 主题有缓存
+    return this.themes[id];
+  }
+}

package/src/browser/theme.contribution.ts

@@ -0,0 +1,343 @@
+import { Autowired } from '@opensumi/di';
+import {
+  Domain,
+  CommandContribution,
+  CommandRegistry,
+  Command,
+  localize,
+  PreferenceService,
+  replaceLocalizePlaceholder,
+  PreferenceScope,
+  QuickOpenService,
+  QuickOpenOptions,
+  QuickOpenItem,
+  Mode,
+  ClientAppContribution,
+  GeneralSettingsId,
+} from '@opensumi/ide-core-browser';
+import { MenuContribution, IMenuRegistry, MenuId } from '@opensumi/ide-core-browser/lib/menu/next';
+
+import {
+  IThemeService,
+  IIconService,
+  BuiltinThemeComparator,
+  getThemeTypeName,
+  BuiltinTheme,
+  DEFAULT_THEME_ID,
+} from '../common';
+import { ISemanticTokenRegistry, ProbeScope } from '../common/semantic-tokens-registry';
+
+export const THEME_TOGGLE_COMMAND: Command = {
+  id: 'theme.toggle',
+  label: '%theme.toggle%',
+  alias: 'Color Theme',
+};
+
+export const ICON_THEME_TOGGLE_COMMAND: Command = {
+  id: 'theme.icon.toggle',
+  label: '%theme.icon.toggle%',
+  alias: 'File Icon Theme',
+};
+
+@Domain(MenuContribution, CommandContribution, ClientAppContribution)
+export class ThemeContribution implements MenuContribution, CommandContribution, ClientAppContribution {
+  @Autowired(IThemeService)
+  themeService: IThemeService;
+
+  @Autowired(IIconService)
+  iconService: IIconService;
+
+  @Autowired(QuickOpenService)
+  private quickOpenService: QuickOpenService;
+
+  @Autowired(PreferenceService)
+  private preferenceService: PreferenceService;
+
+  @Autowired(ISemanticTokenRegistry)
+  protected readonly semanticTokenRegistry: ISemanticTokenRegistry;
+
+  async initialize() {
+    this.registerDefaultColorTheme();
+    this.registerDefaultTokenStyles();
+    this.registerDefaultTokenType();
+    this.registerDefaultTokenModifier();
+    await this.themeService.colorThemeLoaded.promise;
+  }
+
+  /**
+   * 如果没有设置默认 theme 或者 设置的 theme 为 dark 类型，为了有体感上的加速，设置默认的 theme
+   */
+  private registerDefaultColorTheme() {
+    const themeId = this.preferenceService.get<string>('general.theme');
+    const shouldApplyDefaultThemeId = !themeId || themeId.includes('dark');
+
+    if (shouldApplyDefaultThemeId) {
+      this.themeService.applyTheme(DEFAULT_THEME_ID);
+    }
+  }
+
+  private registerDefaultTokenModifier() {
+    this.semanticTokenRegistry.registerTokenModifier(
+      'declaration',
+      localize('declaration', 'Style for all symbol declarations.'),
+      undefined,
+    );
+    this.semanticTokenRegistry.registerTokenModifier(
+      'documentation',
+      localize('documentation', 'Style to use for references in documentation.'),
+      undefined,
+    );
+    this.semanticTokenRegistry.registerTokenModifier(
+      'static',
+      localize('static', 'Style to use for symbols that are static.'),
+      undefined,
+    );
+    this.semanticTokenRegistry.registerTokenModifier(
+      'abstract',
+      localize('abstract', 'Style to use for symbols that are abstract.'),
+      undefined,
+    );
+    this.semanticTokenRegistry.registerTokenModifier(
+      'deprecated',
+      localize('deprecated', 'Style to use for symbols that are deprecated.'),
+      undefined,
+    );
+    this.semanticTokenRegistry.registerTokenModifier(
+      'modification',
+      localize('modification', 'Style to use for write accesses.'),
+      undefined,
+    );
+    this.semanticTokenRegistry.registerTokenModifier(
+      'async',
+      localize('async', 'Style to use for symbols that are async.'),
+      undefined,
+    );
+    this.semanticTokenRegistry.registerTokenModifier(
+      'readonly',
+      localize('readonly', 'Style to use for symbols that are readonly.'),
+      undefined,
+    );
+  }
+
+  private registerDefaultTokenType() {
+    this.doRegisterTokenType('comment', localize('comment', 'Style for comments.'), [['comment']]);
+    this.doRegisterTokenType('string', localize('string', 'Style for strings.'), [['string']]);
+    this.doRegisterTokenType('keyword', localize('keyword', 'Style for keywords.'), [['keyword.control']]);
+    this.doRegisterTokenType('number', localize('number', 'Style for numbers.'), [['constant.numeric']]);
+    this.doRegisterTokenType('regexp', localize('regexp', 'Style for expressions.'), [['constant.regexp']]);
+    this.doRegisterTokenType('operator', localize('operator', 'Style for operators.'), [['keyword.operator']]);
+
+    this.doRegisterTokenType('namespace', localize('namespace', 'Style for namespaces.'), [['entity.name.namespace']]);
+
+    this.doRegisterTokenType('type', localize('type', 'Style for types.'), [['entity.name.type'], ['support.type']]);
+    this.doRegisterTokenType('struct', localize('struct', 'Style for structs.'), [['entity.name.type.struct']]);
+    this.doRegisterTokenType('class', localize('class', 'Style for classes.'), [
+      ['entity.name.type.class'],
+      ['support.class'],
+    ]);
+    this.doRegisterTokenType('interface', localize('interface', 'Style for interfaces.'), [
+      ['entity.name.type.interface'],
+    ]);
+    this.doRegisterTokenType('enum', localize('enum', 'Style for enums.'), [['entity.name.type.enum']]);
+    this.doRegisterTokenType('typeParameter', localize('typeParameter', 'Style for type parameters.'), [
+      ['entity.name.type.parameter'],
+    ]);
+
+    this.doRegisterTokenType('function', localize('function', 'Style for functions'), [
+      ['entity.name.function'],
+      ['support.function'],
+    ]);
+    this.doRegisterTokenType(
+      'member',
+      localize('member', 'Style for member functions'),
+      [],
+      'method',
+      'Deprecated use `method` instead',
+    );
+    this.doRegisterTokenType('method', localize('method', 'Style for method (member functions)'), [
+      ['entity.name.function.member'],
+      ['support.function'],
+    ]);
+    this.doRegisterTokenType('macro', localize('macro', 'Style for macros.'), [['entity.name.function.preprocessor']]);
+
+    this.doRegisterTokenType('variable', localize('variable', 'Style for variables.'), [
+      ['variable.other.readwrite'],
+      ['entity.name.variable'],
+    ]);
+    this.doRegisterTokenType('parameter', localize('parameter', 'Style for parameters.'), [['variable.parameter']]);
+    this.doRegisterTokenType('property', localize('property', 'Style for properties.'), [['variable.other.property']]);
+    this.doRegisterTokenType('enumMember', localize('enumMember', 'Style for enum members.'), [
+      ['variable.other.enummember'],
+    ]);
+    this.doRegisterTokenType('event', localize('event', 'Style for events.'), [['variable.other.event']]);
+
+    this.doRegisterTokenType('label', localize('labels', 'Style for labels. '), undefined);
+  }
+
+  private registerDefaultTokenStyles() {
+    this.doRegisterTokenStyleDefault('variable.readonly', [['variable.other.constant']]);
+    this.doRegisterTokenStyleDefault('property.readonly', [['variable.other.constant.property']]);
+    this.doRegisterTokenStyleDefault('type.defaultLibrary', [['support.type']]);
+    this.doRegisterTokenStyleDefault('class.defaultLibrary', [['support.class']]);
+    this.doRegisterTokenStyleDefault('interface.defaultLibrary', [['support.class']]);
+    this.doRegisterTokenStyleDefault('variable.defaultLibrary', [['support.variable'], ['support.other.variable']]);
+    this.doRegisterTokenStyleDefault('variable.defaultLibrary.readonly', [['support.constant']]);
+    this.doRegisterTokenStyleDefault('property.defaultLibrary', [['support.variable.property']]);
+    this.doRegisterTokenStyleDefault('property.defaultLibrary.readonly', [['support.constant.property']]);
+    this.doRegisterTokenStyleDefault('function.defaultLibrary', [['support.function']]);
+    this.doRegisterTokenStyleDefault('member.defaultLibrary', [['support.function']]);
+  }
+
+  private doRegisterTokenStyleDefault(selectorString: string, scopesToProbe: ProbeScope[]) {
+    try {
+      const selector = this.semanticTokenRegistry.parseTokenSelector(selectorString);
+      this.semanticTokenRegistry.registerTokenStyleDefault(selector, { scopesToProbe });
+    } catch (e) {
+      // ignore error
+    }
+  }
+
+  private doRegisterTokenType(
+    id: string,
+    description: string,
+    scopesToProbe: ProbeScope[] = [],
+    superType?: string,
+    deprecationMessage?: string,
+  ): string {
+    this.semanticTokenRegistry.registerTokenType(id, description, superType, deprecationMessage);
+    if (scopesToProbe) {
+      this.doRegisterTokenStyleDefault(id, scopesToProbe);
+    }
+    return id;
+  }
+
+  registerMenus(menus: IMenuRegistry) {
+    menus.registerMenuItem(MenuId.SettingsIconMenu, {
+      command: THEME_TOGGLE_COMMAND.id,
+      group: '4_theme',
+    });
+    menus.registerMenuItem(MenuId.SettingsIconMenu, {
+      command: ICON_THEME_TOGGLE_COMMAND.id,
+      group: '4_theme',
+    });
+  }
+
+  registerCommands(commands: CommandRegistry) {
+    commands.registerCommand(THEME_TOGGLE_COMMAND, {
+      execute: async () => {
+        const themeInfos = this.themeService.getAvailableThemeInfos();
+        themeInfos.sort((a, b) => BuiltinThemeComparator[a.base] - BuiltinThemeComparator[b.base]);
+        let prevBase: BuiltinTheme;
+        const items = themeInfos.map((themeInfo) => {
+          if (prevBase !== themeInfo.base && !prevBase?.startsWith('hc')) {
+            prevBase = themeInfo.base;
+            return {
+              label: replaceLocalizePlaceholder(themeInfo.name)!,
+              value: themeInfo.themeId,
+              groupLabel: localize(getThemeTypeName(prevBase)),
+            };
+          }
+          return {
+            label: replaceLocalizePlaceholder(themeInfo.name)!,
+            value: themeInfo.themeId,
+          };
+        });
+        const defaultSelected = items.findIndex((opt) => opt.value === this.themeService.currentThemeId);
+        const prevThemeId = this.themeService.currentThemeId;
+        const themeId = await this.showPickWithPreview(
+          items,
+          {
+            selectIndex: () => defaultSelected,
+            placeholder: localize('theme.quickopen.plh'),
+          },
+          (value) => {
+            this.updateTopPreference('general.theme', value);
+          },
+        );
+
+        if (themeId && themeId === this.themeService.currentThemeId) {
+          return;
+        }
+        await this.updateTopPreference('general.theme', themeId || prevThemeId);
+      },
+    });
+    commands.registerCommand(ICON_THEME_TOGGLE_COMMAND, {
+      execute: async () => {
+        const themeInfos = this.iconService.getAvailableThemeInfos();
+        const items = themeInfos.map((themeInfo) => ({
+          label: themeInfo.name,
+          value: themeInfo.themeId,
+        }));
+        const defaultSelected = items.findIndex((opt) => opt.value === this.iconService.currentThemeId);
+        const prevThemeId = this.iconService.currentThemeId;
+        const themeId = await this.showPickWithPreview(
+          items,
+          {
+            selectIndex: () => defaultSelected,
+            placeholder: localize('icon.quickopen.plh'),
+          },
+          (value) => {
+            this.updateTopPreference(GeneralSettingsId.Icon, value);
+          },
+        );
+        if (themeId) {
+          await this.updateTopPreference(GeneralSettingsId.Icon, themeId);
+        } else {
+          await this.updateTopPreference(GeneralSettingsId.Icon, prevThemeId);
+        }
+      },
+    });
+  }
+
+  protected async updateTopPreference(key: string, value: string) {
+    const effectiveScope = this.preferenceService.resolve(key).scope;
+    // 最小就更新 User 的值
+    if (typeof effectiveScope === 'undefined' || effectiveScope <= PreferenceScope.User) {
+      await this.preferenceService.set(key, value, PreferenceScope.User);
+    } else {
+      await this.preferenceService.set(key, value, effectiveScope);
+    }
+  }
+
+  protected showPickWithPreview(
+    pickItems: { label: string; value: string; groupLabel?: string }[],
+    options: QuickOpenOptions,
+    onFocusChange: (value: string) => void,
+  ) {
+    return new Promise((resolve: (value: string | undefined) => void) => {
+      const items: QuickOpenItem[] = [];
+      pickItems.forEach((item, index) => {
+        const baseOption = {
+          label: item.label,
+          run: (mode: Mode) => {
+            if (mode === Mode.PREVIEW) {
+              onFocusChange(item.value);
+              return true;
+            }
+            if (mode === Mode.OPEN) {
+              resolve(item.value);
+              return true;
+            }
+            return false;
+          },
+        };
+        items.push(
+          new QuickOpenItem(
+            Object.assign(baseOption, { groupLabel: item.groupLabel, showBorder: !!item.groupLabel && index !== 0 }),
+          ),
+        );
+      });
+      this.quickOpenService.open(
+        {
+          onType: (_, acceptor) => acceptor(items),
+        },
+        {
+          onClose: () => resolve(undefined),
+          fuzzyMatchLabel: true,
+          showItemsWithoutHighlight: false,
+          ...options,
+        },
+      );
+    });
+  }
+}