diff --git a/packages/core/src/core/style.module.less b/packages/core/src/core/style.module.less
index 80b74d65..726690a4 100644
--- a/packages/core/src/core/style.module.less
+++ b/packages/core/src/core/style.module.less
@@ -16,17 +16,25 @@ codeblitz-root {
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  color: #4D4D4D;
-  background-color: #FFF;
+  color: var(--codeblitz-landing-foreground);
+  background-color: var(--codeblitz-landing-background);
 }
 
-:global(.codeblitz-dark) .landing {
-  color: #D7DBDE;
-  background-color: #202224;
+:root {
+  --codeblitz-landing-dark-foreground: #D7DBDE;
+  --codeblitz-landing-dark-background: #202224;
+
+  --codeblitz-landing-foreground: #4D4D4D;
+  --codeblitz-landing-background: #FFF;
 }
 
 :global(.codeblitz-dark) {
-  background-color: #202224;
+  background-color: var(--codeblitz-landing-dark-background);
+
+  & .landing {
+    color: var(--codeblitz-landing-dark-foreground);
+    background-color: var(--codeblitz-landing-dark-background);
+  }
 }
 
 .loading {
diff --git a/packages/sumi-core/src/common/theme.ts b/packages/sumi-core/src/common/theme.ts
index 76f73990..e54fb647 100644
--- a/packages/sumi-core/src/common/theme.ts
+++ b/packages/sumi-core/src/common/theme.ts
@@ -1,6 +1,11 @@
 import { IExtensionBasicMetadata } from '@codeblitzjs/ide-common';
 import { BuiltinTheme, getThemeId, getThemeType, IThemeContribution } from '@opensumi/ide-theme';
 
+const builtinTheme = {
+  "opensumi-design-dark-theme": "vs-dark",
+  "opensumi-design-light-theme": "vs",
+} as Record<string, BuiltinTheme>
+
 export const getThemeTypeByPreferenceThemeId = (
   themeId: string,
   extensionMetadata: IExtensionBasicMetadata[] | undefined,
@@ -18,5 +23,9 @@ export const getThemeTypeByPreferenceThemeId = (
       }
     }
   }
+  if (builtinTheme[themeId]) {
+    uiTheme = builtinTheme[themeId];
+  }
+
   return getThemeType(uiTheme || 'vs-dark');
 };