diff --git a/packages/shiki/src/highlighter.ts b/packages/shiki/src/highlighter.ts
index 73b5258f2..b93919408 100644
--- a/packages/shiki/src/highlighter.ts
+++ b/packages/shiki/src/highlighter.ts
@@ -64,7 +64,7 @@ export async function getHighlighter(options: HighlighterOptions): Promise<Highl
    * Instead, we work around this by using valid hex color codes as lookups in a
    * final "repair" step which translates those codes to the correct CSS variables.
    */
-  const COLOR_REPLACEMENTS: Record<string, string> = {
+  let COLOR_REPLACEMENTS: Record<string, string> = {
     '#000001': 'var(--shiki-color-text)',
     '#000002': 'var(--shiki-color-background)',
     '#000004': 'var(--shiki-token-constant)',
@@ -77,7 +77,9 @@ export async function getHighlighter(options: HighlighterOptions): Promise<Highl
     '#000011': 'var(--shiki-token-punctuation)',
     '#000012': 'var(--shiki-token-link)'
   }
-
+  function setColorReplacements(map: Record<string, string>) {
+    COLOR_REPLACEMENTS = map
+  }
   function fixCssVariablesTheme(theme: IShikiTheme, colorMap: string[]) {
     theme.bg = COLOR_REPLACEMENTS[theme.bg] || theme.bg
     theme.fg = COLOR_REPLACEMENTS[theme.fg] || theme.fg
@@ -96,7 +98,7 @@ export async function getHighlighter(options: HighlighterOptions): Promise<Highl
       _currentTheme = _theme
     }
     const _colorMap = _registry.getColorMap()
-    if (_theme.name === 'css-variables') {
+    if (_theme.type === 'css') {
       fixCssVariablesTheme(_theme, _colorMap)
     }
     return { _theme, _colorMap }
@@ -200,7 +202,8 @@ export async function getHighlighter(options: HighlighterOptions): Promise<Highl
     getBackgroundColor,
     getForegroundColor,
     getLoadedThemes,
-    getLoadedLanguages
+    getLoadedLanguages,
+    setColorReplacements
   }
 }
 
diff --git a/packages/shiki/src/types.ts b/packages/shiki/src/types.ts
index 494e91c18..d6e9f2df8 100644
--- a/packages/shiki/src/types.ts
+++ b/packages/shiki/src/types.ts
@@ -96,6 +96,8 @@ export interface Highlighter {
    */
   getBackgroundColor(theme?: StringLiteralUnion<Theme>): string
 
+  setColorReplacements(map: Record<string, string>): void
+
   // codeToRawHtml?(code: string): string
   // getRawCSS?(): string
 
@@ -147,7 +149,7 @@ export interface IShikiTheme extends IRawTheme {
   /**
    * @description light/dark theme
    */
-  type: 'light' | 'dark'
+  type: 'light' | 'dark' | 'css'
 
   /**
    * @description tokenColors of the theme file
diff --git a/packages/shiki/themes/css-variables.json b/packages/shiki/themes/css-variables.json
index d46297a38..b6ba2a308 100644
--- a/packages/shiki/themes/css-variables.json
+++ b/packages/shiki/themes/css-variables.json
@@ -1,6 +1,6 @@
 {
   "name": "css-variables",
-  "type": "light",
+  "type": "css",
   "colors": {
     "editor.foreground": "#000001",
     "editor.background": "#000002"