feat: use design theme as default theme (#100)

Author: bytemain

packages/core/src/api/createApp.tsx

@@ -30,7 +30,7 @@ import { disposeMode, disposableCollection } from '../core/patch';
 
 import { modules } from '../core/modules';
 import { IconSlim, IDETheme } from '../core/extension/metadata';
-import { mergeConfig, getThemeTypeByPreferenceThemeId } from '../core/utils';
+import { mergeConfig } from '../core/utils';
 import { LayoutComponent, getDefaultLayoutConfig } from '../core/layout';
 import { IConfig, IAppInstance } from './types';
 import { EXT_WORKER_HOST, WEBVIEW_ENDPOINT } from '../core/env';
@@ -119,18 +119,6 @@ export function createApp({ appConfig, runtimeConfig }: IConfig): IAppInstance {
     injector,
   }) as IAppInstance;
 
-  Object.defineProperty(app, 'currentThemeType', {
-    get() {
-      const themeId = getPreferenceThemeId() || opts.defaultPreferences?.['general.theme'];
-      return getThemeTypeByPreferenceThemeId(themeId, opts.extensionMetadata);
-    },
-  });
-
-  const _start = app.start;
-  app.start = async (container: HTMLElement | IAppRenderer) => {
-    await _start.call(app, container);
-  };
-
   let destroyed = false;
   app.destroy = () => {
     if (destroyed) {

packages/core/src/api/createEditor.tsx

@@ -42,7 +42,7 @@ const getDefaultAppConfig = (): IAppOpts => ({
   extWorkerHost: EXT_WORKER_HOST,
   webviewEndpoint: WEBVIEW_ENDPOINT,
   defaultPreferences: {
-    'general.theme': 'opensumi-light',
+    'general.theme': 'opensumi-design-light',
     'application.confirmExit': 'never',
     'editor.autoSave': 'afterDelay',
     'editor.guides.bracketPairs': false,
@@ -98,11 +98,6 @@ export function createEditor({ appConfig, runtimeConfig }: IConfig): IAppInstanc
 
   const app = new ClientApp({ ...opts, injector }) as IAppInstance;
 
-  const _start = app.start;
-  app.start = async (container: HTMLElement | IAppRenderer) => {
-    await _start.call(app, container);
-  };
-
   let destroyed = false;
   app.destroy = () => {
     if (destroyed) {

packages/core/src/api/renderApp.tsx

@@ -1,22 +1,13 @@
-import React, { useState, useEffect, useRef, useMemo } from 'react';
-import { createRoot } from 'react-dom/client';
-import { IReporterService, localize, getDebugLogger } from '@opensumi/ide-core-common';
 import { REPORT_NAME, RuntimeConfig } from '@codeblitzjs/ide-sumi-core';
-import { createApp } from './createApp';
+import { getDebugLogger, IReporterService, localize } from '@opensumi/ide-core-common';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { createRoot } from 'react-dom/client';
+import { useConstant } from '../core/hooks';
 import { Root } from '../core/Root';
-import { RootProps, LandingProps } from '../core/types';
-import {
-  setSingleInjector,
-  singleInjector,
-  useConstant,
-  isRendered,
-  setRendered,
-  setSingleApp,
-  singleApp,
-} from '../core/hooks';
-import { IConfig, IAppInstance } from './types';
 import styles from '../core/style.module.less';
-import { IAppRenderer } from '@opensumi/ide-core-browser';
+import { LandingProps, RootProps } from '../core/types';
+import { createApp } from './createApp';
+import { IAppInstance, IConfig } from './types';
 
 export interface IAppRendererProps extends IConfig {
   onLoad?(app: IAppInstance): void;
@@ -30,15 +21,15 @@ export const renderApp = (domElement: HTMLElement, props: IAppRendererProps) =>
   const className = opts.runtimeConfig.hideEditorTab ? styles['hide-editor-tab'] : '';
   const root = createRoot(domElement);
 
-  root.render(<Root status="loading" theme={themeType} Landing={Landing} className={className} />);
+  root.render(<Root status='loading' theme={themeType} Landing={Landing} className={className} />);
 
   app
     .start((Children) => {
       return new Promise((resolve) => {
         root.render(
-          <Root status="success" theme={themeType} className={className}>
+          <Root status='success' theme={themeType} className={className}>
             <Children />
-          </Root>
+          </Root>,
         );
       });
     })
@@ -47,13 +38,13 @@ export const renderApp = (domElement: HTMLElement, props: IAppRendererProps) =>
     })
     .catch((err: Error) => {
       root.render(
-        <Root status="error" error={err?.message || localize('error.unknown')} theme={themeType} />
+        <Root status='error' error={err?.message || localize('error.unknown')} theme={themeType} />,
       );
 
       (app.injector.get(IReporterService) as IReporterService).point(
         REPORT_NAME.ALEX_APP_START_ERROR,
         err?.message,
-        { error: err }
+        { error: err },
       );
       getDebugLogger().error(err);
       setTimeout(() => {
@@ -99,7 +90,7 @@ export const AppRenderer: React.FC<IAppRendererProps> = ({ onLoad, Landing, ...o
           err?.message,
           {
             error: err,
-          }
+          },
         );
         getDebugLogger().error(err);
         setTimeout(() => {
@@ -114,7 +105,7 @@ export const AppRenderer: React.FC<IAppRendererProps> = ({ onLoad, Landing, ...o
 
   const rootClassName = useMemo(
     () => (opts.runtimeConfig.hideEditorTab ? styles['hide-editor-tab'] : ''),
-    [opts.runtimeConfig.hideEditorTab]
+    [opts.runtimeConfig.hideEditorTab],
   );
 
   return (

packages/core/src/core/utils.ts

@@ -46,23 +46,3 @@ export const mergeConfig = (target: IAppOpts, source: IAppConfig) => {
   });
   return target;
 };
-
-export const getThemeTypeByPreferenceThemeId = (
-  themeId: string,
-  extensionMetadata: IExtensionBasicMetadata[] | undefined
-) => {
-  let uiTheme: BuiltinTheme | undefined;
-  if (themeId && extensionMetadata) {
-    for (const ext of extensionMetadata) {
-      const theme: IThemeContribution | undefined = ext.packageJSON.contributes?.themes?.find(
-        (contrib: IThemeContribution) => contrib && getThemeId(contrib) === themeId
-      );
-
-      if (theme?.uiTheme) {
-        uiTheme = theme.uiTheme;
-        break;
-      }
-    }
-  }
-  return getThemeType(uiTheme || 'vs-dark');
-};

packages/startup/src/editor/index.tsx

@@ -155,7 +155,7 @@ const App = () => {
                 plugins: [editorPlugin],
                 workspaceDir: project,
                 defaultPreferences: {
-                  'general.theme': 'opensumi-light',
+                  'general.theme': 'opensumi-design-light',
                   'editor.scrollBeyondLastLine': false,
                   'lsif.documentScheme': 'file',
                   'lsif.enable': true,

packages/startup/src/filesystem/index.tsx

@@ -166,7 +166,7 @@ const App = () => {
           appConfig={{
             workspaceDir: 'filesystem',
             defaultPreferences: {
-              'general.theme': 'opensumi-light',
+              'general.theme': 'opensumi-design-light',
             },
           }}
           runtimeConfig={{

packages/sumi-core/src/client/index.ts

@@ -7,17 +7,18 @@ import {
   PreferenceScope,
   PreferenceProvider,
   IContextKeyService,
+  getPreferenceThemeId,
 } from '@opensumi/ide-core-browser';
 import { ClientApp as BasicClientApp } from '@opensumi/ide-core-browser/lib/bootstrap/app';
 
-import { Disposable } from '@opensumi/ide-core-common';
+import { Disposable, GeneralSettingsId } from '@opensumi/ide-core-common';
 
 import { OpenSumiExtFsProvider, KtExtFsProviderContribution } from './extension';
 import { TextmateLanguageGrammarContribution } from './textmate-language-grammar/index.contribution';
 import { ILanguageGrammarRegistrationService } from './textmate-language-grammar/base';
 import { LanguageGrammarRegistrationService } from './textmate-language-grammar/language-grammar.service';
 import { injectDebugPreferences } from './debug';
-import { IServerApp, RootFS, RuntimeConfig } from '../common';
+import { IServerApp, RootFS } from '../common';
 import { IServerAppOpts, ServerApp } from '../server/core/app';
 import {
   FileTreeCustomContribution,
@@ -43,14 +44,9 @@ import {
 } from './override/vscodeContributesService';
 
 import {
-  IMonacoCommandServiceProxy,
   monacoCommandServiceProxy,
 } from './override/monacoOverride/commandService';
-import { ICommandServiceToken } from '@opensumi/ide-monaco/lib/browser/contrib/command';
-import { MonacoCommandService } from '@opensumi/ide-editor/lib/browser/monaco-contrib/command/command.service';
 import {
-  IMonacoCodeService,
-  MonacoCodeService,
   monacoCodeServiceProxy,
 } from './override/monacoOverride/codeEditorService';
 import { MonacoContextKeyServiceOverride } from './override/monacoOverride/contextKeyService';
@@ -63,6 +59,7 @@ import { CodeBlitzConnectionHelper } from './override/webConnectionHelper';
 import { WebConnectionHelper } from '@opensumi/ide-core-browser/lib/application/runtime';
 import { CodeBlitzAINativeContribution } from './ai-native';
 import { injectAINativePreferences } from './ai-native/preferences';
+import { getThemeTypeByPreferenceThemeId } from '../common/theme';
 export * from './override/monacoOverride/codeEditorService';
 
 export { ExtensionManagerModule as ExtensionClientManagerModule } from './extension-manager';
@@ -215,6 +212,11 @@ export class ClientApp extends BasicClientApp {
     }
   }
 
+  get currentThemeType() {
+    const themeId = getPreferenceThemeId() || this.opts.defaultPreferences?.[GeneralSettingsId.Theme];
+    return getThemeTypeByPreferenceThemeId(themeId, (this.opts as IAppOpts).extensionMetadata);
+  }
+
   async dispose() {
     super.dispose();
     this.disposer.dispose();

packages/sumi-core/src/common/theme.ts

@@ -0,0 +1,22 @@
+import { IExtensionBasicMetadata } from "@codeblitzjs/ide-common";
+import { BuiltinTheme, IThemeContribution, getThemeId, getThemeType } from "@opensumi/ide-theme";
+
+export const getThemeTypeByPreferenceThemeId = (
+  themeId: string,
+  extensionMetadata: IExtensionBasicMetadata[] | undefined
+) => {
+  let uiTheme: BuiltinTheme | undefined;
+  if (themeId && extensionMetadata) {
+    for (const ext of extensionMetadata) {
+      const theme: IThemeContribution | undefined = ext.packageJSON.contributes?.themes?.find(
+        (contrib: IThemeContribution) => contrib && getThemeId(contrib) === themeId
+      );
+
+      if (theme?.uiTheme) {
+        uiTheme = theme.uiTheme;
+        break;
+      }
+    }
+  }
+  return getThemeType(uiTheme || 'vs-dark');
+};

packages/toolkit/playground/main.tsx

@@ -146,7 +146,7 @@ const App: React.FC = () => {
             layoutComponent: LayoutComponent,
             // 默认偏好设置
             defaultPreferences: {
-              // 主题色 opensumi-light | opensumi-dark
+              // 主题色 opensumi-design-light | opensumi-design-dark
               'general.theme': 'opensumi-design-dark',
               'editor.previewMode': false,
               // 'editor.forceReadOnly': true,