diff --git a/packages/roosterjs-content-model-core/test/editor/core/DarkColorHandlerImplTest.ts b/packages/roosterjs-content-model-core/test/editor/core/DarkColorHandlerImplTest.ts
index fc495d755fc..ee878574e32 100644
--- a/packages/roosterjs-content-model-core/test/editor/core/DarkColorHandlerImplTest.ts
+++ b/packages/roosterjs-content-model-core/test/editor/core/DarkColorHandlerImplTest.ts
@@ -28,14 +28,21 @@ describe('DarkColorHandlerImpl.ctor', () => {
         );
     });
 
-    it('with knownColors', () => {
+    it('with knownColors and generateColorKey', () => {
         const div = document.createElement('div');
         const mockedGetDarkColor = jasmine.createSpy('getDarkColor');
         const mockedKnownColors = 'KNOWN' as any;
-        const handler = createDarkColorHandler(div, mockedGetDarkColor, mockedKnownColors);
+        const mockedGenerateColorKey = 'KEY' as any;
+        const handler = createDarkColorHandler(
+            div,
+            mockedGetDarkColor,
+            mockedKnownColors,
+            mockedGenerateColorKey
+        );
 
         expect(handler.knownColors).toEqual(mockedKnownColors);
         expect(handler.getDarkColor).toBe(mockedGetDarkColor);
+        expect(handler.generateColorKey).toBe(mockedGenerateColorKey);
     });
 });
 
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 b63dfb846a9..b4af3645965 100644
--- a/packages/roosterjs-content-model-core/test/editor/core/createEditorCoreTest.ts
+++ b/packages/roosterjs-content-model-core/test/editor/core/createEditorCoreTest.ts
@@ -147,6 +147,8 @@ describe('createEditorCore', () => {
         const mockedGetDarkColor = 'DARK' as any;
         const mockedTrustHtmlHandler = 'TRUST' as any;
         const mockedDisposeErrorHandler = 'DISPOSE' as any;
+        const mockedGenerateColorKey = 'KEY' as any;
+        const mockedKnownColors = 'COLORS' as any;
         const mockedOptions = {
             coreApiOverride: {
                 a: 'b',
@@ -155,6 +157,8 @@ describe('createEditorCore', () => {
             getDarkColor: mockedGetDarkColor,
             trustedHTMLHandler: mockedTrustHtmlHandler,
             disposeErrorHandler: mockedDisposeErrorHandler,
+            generateColorKey: mockedGenerateColorKey,
+            knownColors: mockedKnownColors,
         } as any;
 
         runTest(mockedDiv, mockedOptions, {
@@ -182,8 +186,8 @@ describe('createEditorCore', () => {
         expect(DarkColorHandlerImpl.createDarkColorHandler).toHaveBeenCalledWith(
             mockedDiv,
             mockedGetDarkColor,
-            undefined,
-            undefined
+            mockedKnownColors,
+            mockedGenerateColorKey
         );
     });
 
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 82451f0838c..bdbd4560018 100644
--- a/packages/roosterjs-content-model-dom/test/formatHandlers/utils/colorTest.ts
+++ b/packages/roosterjs-content-model-dom/test/formatHandlers/utils/colorTest.ts
@@ -496,6 +496,49 @@ describe('setColor with darkColorHandler', () => {
             darkModeColor: '--dark_green',
         });
     });
+
+    it('with customized generateColorKey', () => {
+        const generateColorKeySpy = jasmine
+            .createSpy('generateColorKey')
+            .and.callFake((color: string) => '--' + color + '_key');
+
+        const lightDiv = document.createElement('div');
+        const darkDiv = document.createElement('div');
+
+        darkColorHandler.generateColorKey = generateColorKeySpy;
+
+        setColor(lightDiv, 'red', true, false, darkColorHandler);
+        setColor(lightDiv, 'green', false, false, darkColorHandler);
+        setColor(darkDiv, 'red', true, true, darkColorHandler);
+        setColor(darkDiv, 'green', false, true, darkColorHandler);
+
+        expect(lightDiv.outerHTML).toBe('<div style="background-color: red; color: green;"></div>');
+        expect(darkDiv.outerHTML).toBe(
+            '<div style="background-color: var(--red_key, red); color: var(--green_key, green);"></div>'
+        );
+        expect(getDarkColorSpy).toHaveBeenCalledTimes(4);
+        expect(getDarkColorSpy).toHaveBeenCalledWith('green', undefined, 'text', lightDiv);
+        expect(getDarkColorSpy).toHaveBeenCalledWith('red', undefined, 'background', lightDiv);
+        expect(getDarkColorSpy).toHaveBeenCalledWith('green', undefined, 'text', darkDiv);
+        expect(getDarkColorSpy).toHaveBeenCalledWith('red', undefined, 'background', darkDiv);
+        expect(updateKnownColorSpy).toHaveBeenCalledTimes(4);
+        expect(updateKnownColorSpy).toHaveBeenCalledWith(false, '--red_key', {
+            lightModeColor: 'red',
+            darkModeColor: '--dark_red',
+        });
+        expect(updateKnownColorSpy).toHaveBeenCalledWith(false, '--green_key', {
+            lightModeColor: 'green',
+            darkModeColor: '--dark_green',
+        });
+        expect(updateKnownColorSpy).toHaveBeenCalledWith(true, '--red_key', {
+            lightModeColor: 'red',
+            darkModeColor: '--dark_red',
+        });
+        expect(updateKnownColorSpy).toHaveBeenCalledWith(true, '--green_key', {
+            lightModeColor: 'green',
+            darkModeColor: '--dark_green',
+        });
+    });
 });
 
 describe('parseColor', () => {
diff --git a/packages/roosterjs-content-model-types/lib/editor/EditorOptions.ts b/packages/roosterjs-content-model-types/lib/editor/EditorOptions.ts
index ae0d2212630..a1aa222999f 100644
--- a/packages/roosterjs-content-model-types/lib/editor/EditorOptions.ts
+++ b/packages/roosterjs-content-model-types/lib/editor/EditorOptions.ts
@@ -24,9 +24,10 @@ export interface ColorOptions {
     /**
      * A util function to generate color key for dark mode color.
      * By default, the color key is generated from the light mode color. For example,
-     * color "#123456" will have the key "_123456", and
-     * color "rgb(0,0,0)" will have key "rgb_0_0_0_".
+     * color "#123456" will have the key "--darkColor__123456", and
+     * color "rgb(0,0,0)" will have key "--darkColor_rgb_0_0_0_".
      * Pass in this function to customize this behavior.
+     * The return value must be a valid CSS variable, starts with "--"
      */
     generateColorKey?: ColorTransformFunction;