diff --git a/packages/roosterjs-content-model-core/lib/editor/core/DarkColorHandlerImpl.ts b/packages/roosterjs-content-model-core/lib/editor/core/DarkColorHandlerImpl.ts
index da0425e1f77..79973ab8c39 100644
--- a/packages/roosterjs-content-model-core/lib/editor/core/DarkColorHandlerImpl.ts
+++ b/packages/roosterjs-content-model-core/lib/editor/core/DarkColorHandlerImpl.ts
@@ -1,3 +1,4 @@
+import { defaultGenerateColorKey } from 'roosterjs-content-model-dom';
 import type {
     DarkColorHandler,
     ColorTransformFunction,
@@ -50,7 +51,7 @@ export function createDarkColorHandler(
     root: HTMLElement,
     getDarkColor: ColorTransformFunction,
     knownColors: Record<string, Colors> = {},
-    generateColorKey: ColorTransformFunction
+    generateColorKey: ColorTransformFunction = defaultGenerateColorKey
 ): DarkColorHandler {
     return new DarkColorHandlerImpl(root, getDarkColor, knownColors, generateColorKey);
 }
diff --git a/packages/roosterjs-content-model-core/lib/editor/core/createEditorCore.ts b/packages/roosterjs-content-model-core/lib/editor/core/createEditorCore.ts
index 58e8aa60ccb..7dbea590e45 100644
--- a/packages/roosterjs-content-model-core/lib/editor/core/createEditorCore.ts
+++ b/packages/roosterjs-content-model-core/lib/editor/core/createEditorCore.ts
@@ -3,7 +3,6 @@ import { createDarkColorHandler } from './DarkColorHandlerImpl';
 import { createDOMHelper } from './DOMHelperImpl';
 import { createDomToModelSettings, createModelToDomSettings } from './createEditorDefaultSettings';
 import { createEditorCorePlugins } from '../../corePlugin/createEditorCorePlugins';
-import { generateColorKey } from 'roosterjs-content-model-dom';
 import type {
     EditorEnvironment,
     PluginState,
@@ -42,7 +41,7 @@ export function createEditorCore(contentDiv: HTMLDivElement, options: EditorOpti
             contentDiv,
             options.getDarkColor ?? getDarkColorFallback,
             options.knownColors,
-            options.generateColorKey ?? generateColorKey
+            options.generateColorKey
         ),
         trustedHTMLHandler: options.trustedHTMLHandler || defaultTrustHtmlHandler,
         domHelper: createDOMHelper(contentDiv),
diff --git a/packages/roosterjs-content-model-core/test/editor/core/createEditorCoreTest.ts b/packages/roosterjs-content-model-core/test/editor/core/createEditorCoreTest.ts
index 24a82bd0f19..b63dfb846a9 100644
--- a/packages/roosterjs-content-model-core/test/editor/core/createEditorCoreTest.ts
+++ b/packages/roosterjs-content-model-core/test/editor/core/createEditorCoreTest.ts
@@ -130,6 +130,7 @@ describe('createEditorCore', () => {
         expect(DarkColorHandlerImpl.createDarkColorHandler).toHaveBeenCalledWith(
             mockedDiv,
             getDarkColorFallback,
+            undefined,
             undefined
         );
     });
@@ -181,6 +182,7 @@ describe('createEditorCore', () => {
         expect(DarkColorHandlerImpl.createDarkColorHandler).toHaveBeenCalledWith(
             mockedDiv,
             mockedGetDarkColor,
+            undefined,
             undefined
         );
     });
@@ -214,6 +216,7 @@ describe('createEditorCore', () => {
         expect(DarkColorHandlerImpl.createDarkColorHandler).toHaveBeenCalledWith(
             mockedDiv,
             getDarkColorFallback,
+            undefined,
             undefined
         );
     });
@@ -247,6 +250,7 @@ describe('createEditorCore', () => {
         expect(DarkColorHandlerImpl.createDarkColorHandler).toHaveBeenCalledWith(
             mockedDiv,
             getDarkColorFallback,
+            undefined,
             undefined
         );
     });
@@ -280,6 +284,7 @@ describe('createEditorCore', () => {
         expect(DarkColorHandlerImpl.createDarkColorHandler).toHaveBeenCalledWith(
             mockedDiv,
             getDarkColorFallback,
+            undefined,
             undefined
         );
     });
@@ -313,6 +318,7 @@ describe('createEditorCore', () => {
         expect(DarkColorHandlerImpl.createDarkColorHandler).toHaveBeenCalledWith(
             mockedDiv,
             getDarkColorFallback,
+            undefined,
             undefined
         );
     });
@@ -346,6 +352,7 @@ describe('createEditorCore', () => {
         expect(DarkColorHandlerImpl.createDarkColorHandler).toHaveBeenCalledWith(
             mockedDiv,
             getDarkColorFallback,
+            undefined,
             undefined
         );
     });
diff --git a/packages/roosterjs-content-model-dom/lib/formatHandlers/utils/color.ts b/packages/roosterjs-content-model-dom/lib/formatHandlers/utils/color.ts
index 3731f6e0858..bd3e117634d 100644
--- a/packages/roosterjs-content-model-dom/lib/formatHandlers/utils/color.ts
+++ b/packages/roosterjs-content-model-dom/lib/formatHandlers/utils/color.ts
@@ -126,7 +126,7 @@ export function setColor(
  * @param lightColor The input light color
  * @returns Key of the color
  */
-export const generateColorKey: ColorTransformFunction = lightColor => {
+export const defaultGenerateColorKey: ColorTransformFunction = lightColor => {
     return `${COLOR_VAR_PREFIX}_${lightColor.replace(/[^\d\w]/g, '_')}`;
 };
 
diff --git a/packages/roosterjs-content-model-dom/lib/index.ts b/packages/roosterjs-content-model-dom/lib/index.ts
index 55c0f0658c0..c8bdc50dbd0 100644
--- a/packages/roosterjs-content-model-dom/lib/index.ts
+++ b/packages/roosterjs-content-model-dom/lib/index.ts
@@ -82,7 +82,7 @@ export {
     getColor,
     setColor,
     parseColor,
-    generateColorKey,
+    defaultGenerateColorKey,
 } from './formatHandlers/utils/color';
 
 export {
diff --git a/packages/roosterjs-content-model-dom/test/formatHandlers/common/backgroundColorFormatHandlerTest.ts b/packages/roosterjs-content-model-dom/test/formatHandlers/common/backgroundColorFormatHandlerTest.ts
index 8b2fff7bd78..3e5f24ccc61 100644
--- a/packages/roosterjs-content-model-dom/test/formatHandlers/common/backgroundColorFormatHandlerTest.ts
+++ b/packages/roosterjs-content-model-dom/test/formatHandlers/common/backgroundColorFormatHandlerTest.ts
@@ -1,7 +1,7 @@
 import { backgroundColorFormatHandler } from '../../../lib/formatHandlers/common/backgroundColorFormatHandler';
 import { createDomToModelContext } from '../../../lib/domToModel/context/createDomToModelContext';
 import { createModelToDomContext } from '../../../lib/modelToDom/context/createModelToDomContext';
-import { DeprecatedColors } from '../../../lib/formatHandlers/utils/color';
+import { defaultGenerateColorKey, DeprecatedColors } from '../../../lib/formatHandlers/utils/color';
 import { expectHtml } from '../../testUtils';
 import {
     BackgroundColorFormat,
@@ -113,6 +113,7 @@ describe('backgroundColorFormatHandler.apply', () => {
         context.darkColorHandler = {
             updateKnownColor: () => {},
             getDarkColor: (lightColor: string) => `var(--darkColor_${lightColor}, ${lightColor})`,
+            generateColorKey: defaultGenerateColorKey,
         } as any;
 
         backgroundColorFormatHandler.apply(format, div, context);
diff --git a/packages/roosterjs-content-model-dom/test/formatHandlers/segment/textColorFormatHandlerTest.ts b/packages/roosterjs-content-model-dom/test/formatHandlers/segment/textColorFormatHandlerTest.ts
index 379dab76eab..96978de9563 100644
--- a/packages/roosterjs-content-model-dom/test/formatHandlers/segment/textColorFormatHandlerTest.ts
+++ b/packages/roosterjs-content-model-dom/test/formatHandlers/segment/textColorFormatHandlerTest.ts
@@ -1,7 +1,7 @@
 import { createDomToModelContext } from '../../../lib/domToModel/context/createDomToModelContext';
 import { createModelToDomContext } from '../../../lib/modelToDom/context/createModelToDomContext';
+import { defaultGenerateColorKey, DeprecatedColors } from '../../../lib';
 import { defaultHTMLStyleMap } from '../../../lib/config/defaultHTMLStyleMap';
-import { DeprecatedColors } from '../../../lib';
 import { expectHtml } from '../../testUtils';
 import { textColorFormatHandler } from '../../../lib/formatHandlers/segment/textColorFormatHandler';
 import {
@@ -110,6 +110,7 @@ describe('textColorFormatHandler.apply', () => {
         context.darkColorHandler = {
             updateKnownColor: () => {},
             getDarkColor: (lightColor: string) => `var(--darkColor_${lightColor}, ${lightColor})`,
+            generateColorKey: defaultGenerateColorKey,
         } as any;
 
         format = {};
diff --git a/packages/roosterjs-content-model-dom/test/formatHandlers/utils/colorTest.ts b/packages/roosterjs-content-model-dom/test/formatHandlers/utils/colorTest.ts
index baeaf39c4de..82451f0838c 100644
--- a/packages/roosterjs-content-model-dom/test/formatHandlers/utils/colorTest.ts
+++ b/packages/roosterjs-content-model-dom/test/formatHandlers/utils/colorTest.ts
@@ -1,5 +1,10 @@
 import { Colors, DarkColorHandler } from 'roosterjs-content-model-types';
-import { getColor, parseColor, setColor } from '../../../lib/formatHandlers/utils/color';
+import {
+    defaultGenerateColorKey,
+    getColor,
+    parseColor,
+    setColor,
+} from '../../../lib/formatHandlers/utils/color';
 
 describe('getColor without darkColorHandler', () => {
     it('no color', () => {
@@ -122,6 +127,7 @@ describe('getColor with darkColorHandler', () => {
             getDarkColor: getDarkColorSpy,
             updateKnownColor: updateKnownColorSpy,
             reset: null!,
+            generateColorKey: defaultGenerateColorKey,
         };
     });
 
@@ -351,6 +357,7 @@ describe('setColor with darkColorHandler', () => {
             getDarkColor: getDarkColorSpy,
             updateKnownColor: updateKnownColorSpy,
             reset: null!,
+            generateColorKey: defaultGenerateColorKey,
         };
     });