diff --git a/blocksuite/affine/blocks/edgeless-text/src/edgeless-text-block.ts b/blocksuite/affine/blocks/edgeless-text/src/edgeless-text-block.ts
index 580a33db6..e6b0a467a 100644
--- a/blocksuite/affine/blocks/edgeless-text/src/edgeless-text-block.ts
+++ b/blocksuite/affine/blocks/edgeless-text/src/edgeless-text-block.ts
@@ -26,6 +26,7 @@ import {
   GfxViewInteractionExtension,
   type SelectedContext,
 } from '@blocksuite/std/gfx';
+import { computed } from '@preact/signals-core';
 import { css, html } from 'lit';
 import { query, state } from 'lit/decorators.js';
 import { type StyleInfo, styleMap } from 'lit/directives/style-map.js';
@@ -82,6 +83,23 @@ export class EdgelessTextBlockComponent extends GfxBlockComponent<EdgelessTextBl
     });
   }
 
+  private readonly _style$ = computed(() => {
+    const {
+      color$: { value: color },
+      fontFamily$: { value: fontFamily },
+      fontStyle$: { value: fontStyle },
+      fontWeight$: { value: fontWeight },
+      textAlign$: { value: textAlign },
+    } = this.model.props;
+    return {
+      color,
+      fontFamily,
+      fontStyle,
+      fontWeight,
+      textAlign,
+    };
+  });
+
   checkWidthOverflow(width: number) {
     let wValid = true;
 
@@ -365,7 +383,7 @@ export class EdgelessTextBlockComponent extends GfxBlockComponent<EdgelessTextBl
 
   override renderPageContent() {
     const { color, fontFamily, fontStyle, fontWeight, textAlign } =
-      this.model.props;
+      this._style$.value;
     const themeProvider = this.std.get(ThemeProvider);
     const textColor = themeProvider.generateColorProperty(
       color,
diff --git a/blocksuite/affine/gfx/text/src/edgeless-text-editor.ts b/blocksuite/affine/gfx/text/src/edgeless-text-editor.ts
index 6b15451f1..620076bc4 100644
--- a/blocksuite/affine/gfx/text/src/edgeless-text-editor.ts
+++ b/blocksuite/affine/gfx/text/src/edgeless-text-editor.ts
@@ -6,7 +6,7 @@ import {
   type IModelCoord,
   TextUtils,
 } from '@blocksuite/affine-block-surface';
-import { TextElementModel } from '@blocksuite/affine-model';
+import { DefaultTheme, TextElementModel } from '@blocksuite/affine-model';
 import type { RichText } from '@blocksuite/affine-rich-text';
 import { ThemeProvider } from '@blocksuite/affine-shared/services';
 import { getSelectedRect } from '@blocksuite/affine-shared/utils';
@@ -432,7 +432,7 @@ export class EdgelessTextEditor extends WithDisposable(ShadowlessElement) {
     const isEmpty = !text.length && !this._isComposition;
     const color = this.std
       .get(ThemeProvider)
-      .generateColorProperty(this.element.color, '#000000');
+      .generateColorProperty(this.element.color, DefaultTheme.textColor);
 
     return html`<div
       style=${styleMap({
diff --git a/blocksuite/affine/model/src/themes/default.ts b/blocksuite/affine/model/src/themes/default.ts
index a736fe2fc..3b358521a 100644
--- a/blocksuite/affine/model/src/themes/default.ts
+++ b/blocksuite/affine/model/src/themes/default.ts
@@ -115,7 +115,7 @@ export const DefaultTheme: Theme = {
   black: Black,
   white: White,
   transparent: Transparent,
-  textColor: Medium.Blue,
+  textColor: Black,
   shapeTextColor: pureBlack,
   shapeStrokeColor: Medium.Yellow,
   shapeFillColor: Medium.Yellow,
diff --git a/blocksuite/integration-test/src/__tests__/edgeless/last-props.spec.ts b/blocksuite/integration-test/src/__tests__/edgeless/last-props.spec.ts
index dedc3c6d1..9aaba8963 100644
--- a/blocksuite/integration-test/src/__tests__/edgeless/last-props.spec.ts
+++ b/blocksuite/integration-test/src/__tests__/edgeless/last-props.spec.ts
@@ -232,7 +232,7 @@ describe('apply last props', () => {
       throw new Error('id is not found');
     }
     const text = service.crud.getElementById(id) as EdgelessTextBlockModel;
-    expect(text.props.color).toBe(DefaultTheme.textColor);
+    expect(text.props.color).toStrictEqual(DefaultTheme.textColor);
     expect(text.props.fontFamily).toBe(FontFamily.Inter);
     service.crud.updateElement(id, {
       color: DefaultTheme.StrokeColorShortMap.Green,
diff --git a/tests/affine-local/e2e/blocksuite/edgeless/text.spec.ts b/tests/affine-local/e2e/blocksuite/edgeless/text.spec.ts
index de1d29a46..fd2062587 100644
--- a/tests/affine-local/e2e/blocksuite/edgeless/text.spec.ts
+++ b/tests/affine-local/e2e/blocksuite/edgeless/text.spec.ts
@@ -61,7 +61,7 @@ test('should update color of edgeless text when switching theme', async ({
   let pickedColor = await pickedColorButton.locator('svg').getAttribute('fill');
   let textColor = await getEdgelessTextColor(text);
 
-  await expect(pickedColorButton.getByLabel('MediumBlue')).toHaveCount(1);
+  await expect(pickedColorButton.getByLabel('Black')).toHaveCount(1);
   expect(pickedColor).toBe(textColor);
 
   const blackColorButton = colorPicker
diff --git a/tests/blocksuite/snapshots/edgeless/edgeless-text.spec.ts/min-width-limit-for-embed-block-add-linked-doc.json b/tests/blocksuite/snapshots/edgeless/edgeless-text.spec.ts/min-width-limit-for-embed-block-add-linked-doc.json
index d99f447b3..0c898f42a 100644
--- a/tests/blocksuite/snapshots/edgeless/edgeless-text.spec.ts/min-width-limit-for-embed-block-add-linked-doc.json
+++ b/tests/blocksuite/snapshots/edgeless/edgeless-text.spec.ts/min-width-limit-for-embed-block-add-linked-doc.json
@@ -34,7 +34,10 @@
           "flavour": "affine:edgeless-text",
           "id": "4",
           "props": {
-            "color": "#84cfff",
+            "color": {
+              "dark": "#ffffff",
+              "light": "#000000"
+            },
             "fontFamily": "blocksuite:surface:Inter",
             "fontStyle": "normal",
             "fontWeight": "400",
diff --git a/tests/blocksuite/snapshots/edgeless/edgeless-text.spec.ts/min-width-limit-for-embed-block-drag.json b/tests/blocksuite/snapshots/edgeless/edgeless-text.spec.ts/min-width-limit-for-embed-block-drag.json
index 79859b4ba..33c9c5880 100644
--- a/tests/blocksuite/snapshots/edgeless/edgeless-text.spec.ts/min-width-limit-for-embed-block-drag.json
+++ b/tests/blocksuite/snapshots/edgeless/edgeless-text.spec.ts/min-width-limit-for-embed-block-drag.json
@@ -26,7 +26,10 @@
           "flavour": "affine:edgeless-text",
           "id": "4",
           "props": {
-            "color": "#84cfff",
+            "color": {
+              "dark": "#ffffff",
+              "light": "#000000"
+            },
             "fontFamily": "blocksuite:surface:Inter",
             "fontStyle": "normal",
             "fontWeight": "400",
diff --git a/tests/blocksuite/snapshots/edgeless/edgeless-text.spec.ts/min-width-limit-for-embed-block-init.json b/tests/blocksuite/snapshots/edgeless/edgeless-text.spec.ts/min-width-limit-for-embed-block-init.json
index 35da32c92..81fcf59e5 100644
--- a/tests/blocksuite/snapshots/edgeless/edgeless-text.spec.ts/min-width-limit-for-embed-block-init.json
+++ b/tests/blocksuite/snapshots/edgeless/edgeless-text.spec.ts/min-width-limit-for-embed-block-init.json
@@ -25,7 +25,10 @@
           "flavour": "affine:edgeless-text",
           "id": "4",
           "props": {
-            "color": "#84cfff",
+            "color": {
+              "dark": "#ffffff",
+              "light": "#000000"
+            },
             "fontFamily": "blocksuite:surface:Inter",
             "fontStyle": "normal",
             "fontWeight": "400",
diff --git a/tests/blocksuite/snapshots/edgeless/edgeless-text.spec.ts/min-width-limit-for-embed-block-link-to-card-min-width.json b/tests/blocksuite/snapshots/edgeless/edgeless-text.spec.ts/min-width-limit-for-embed-block-link-to-card-min-width.json
index fff7c7a1a..36de1f9d7 100644
--- a/tests/blocksuite/snapshots/edgeless/edgeless-text.spec.ts/min-width-limit-for-embed-block-link-to-card-min-width.json
+++ b/tests/blocksuite/snapshots/edgeless/edgeless-text.spec.ts/min-width-limit-for-embed-block-link-to-card-min-width.json
@@ -26,7 +26,10 @@
           "flavour": "affine:edgeless-text",
           "id": "4",
           "props": {
-            "color": "#84cfff",
+            "color": {
+              "dark": "#ffffff",
+              "light": "#000000"
+            },
             "fontFamily": "blocksuite:surface:Inter",
             "fontStyle": "normal",
             "fontWeight": "400",
diff --git a/tests/blocksuite/snapshots/edgeless/edgeless-text.spec.ts/min-width-limit-for-embed-block-link-to-card.json b/tests/blocksuite/snapshots/edgeless/edgeless-text.spec.ts/min-width-limit-for-embed-block-link-to-card.json
index 687c3b243..4e63ac4d1 100644
--- a/tests/blocksuite/snapshots/edgeless/edgeless-text.spec.ts/min-width-limit-for-embed-block-link-to-card.json
+++ b/tests/blocksuite/snapshots/edgeless/edgeless-text.spec.ts/min-width-limit-for-embed-block-link-to-card.json
@@ -26,7 +26,10 @@
           "flavour": "affine:edgeless-text",
           "id": "4",
           "props": {
-            "color": "#84cfff",
+            "color": {
+              "dark": "#ffffff",
+              "light": "#000000"
+            },
             "fontFamily": "blocksuite:surface:Inter",
             "fontStyle": "normal",
             "fontWeight": "400",
diff --git a/tests/blocksuite/snapshots/edgeless/edgeless-text.spec.ts/press-backspace-at-the-start-of-first-line-when-edgeless-text-exist-finial.json b/tests/blocksuite/snapshots/edgeless/edgeless-text.spec.ts/press-backspace-at-the-start-of-first-line-when-edgeless-text-exist-finial.json
index 1b12cbd30..eb59356f8 100644
--- a/tests/blocksuite/snapshots/edgeless/edgeless-text.spec.ts/press-backspace-at-the-start-of-first-line-when-edgeless-text-exist-finial.json
+++ b/tests/blocksuite/snapshots/edgeless/edgeless-text.spec.ts/press-backspace-at-the-start-of-first-line-when-edgeless-text-exist-finial.json
@@ -28,7 +28,10 @@
           "flavour": "affine:edgeless-text",
           "id": "3",
           "props": {
-            "color": "#84cfff",
+            "color": {
+              "dark": "#ffffff",
+              "light": "#000000"
+            },
             "fontFamily": "blocksuite:surface:Inter",
             "fontStyle": "normal",
             "fontWeight": "400",
diff --git a/tests/blocksuite/snapshots/edgeless/edgeless-text.spec.ts/press-backspace-at-the-start-of-first-line-when-edgeless-text-exist-note-empty.json b/tests/blocksuite/snapshots/edgeless/edgeless-text.spec.ts/press-backspace-at-the-start-of-first-line-when-edgeless-text-exist-note-empty.json
index 0b1c65a10..f025ab2fd 100644
--- a/tests/blocksuite/snapshots/edgeless/edgeless-text.spec.ts/press-backspace-at-the-start-of-first-line-when-edgeless-text-exist-note-empty.json
+++ b/tests/blocksuite/snapshots/edgeless/edgeless-text.spec.ts/press-backspace-at-the-start-of-first-line-when-edgeless-text-exist-note-empty.json
@@ -28,7 +28,10 @@
           "flavour": "affine:edgeless-text",
           "id": "3",
           "props": {
-            "color": "#84cfff",
+            "color": {
+              "dark": "#ffffff",
+              "light": "#000000"
+            },
             "fontFamily": "blocksuite:surface:Inter",
             "fontStyle": "normal",
             "fontWeight": "400",
diff --git a/tests/blocksuite/snapshots/edgeless/edgeless-text.spec.ts/press-backspace-at-the-start-of-first-line-when-edgeless-text-exist-note-not-empty.json b/tests/blocksuite/snapshots/edgeless/edgeless-text.spec.ts/press-backspace-at-the-start-of-first-line-when-edgeless-text-exist-note-not-empty.json
index c9c85985d..c2e6089a7 100644
--- a/tests/blocksuite/snapshots/edgeless/edgeless-text.spec.ts/press-backspace-at-the-start-of-first-line-when-edgeless-text-exist-note-not-empty.json
+++ b/tests/blocksuite/snapshots/edgeless/edgeless-text.spec.ts/press-backspace-at-the-start-of-first-line-when-edgeless-text-exist-note-not-empty.json
@@ -28,7 +28,10 @@
           "flavour": "affine:edgeless-text",
           "id": "3",
           "props": {
-            "color": "#84cfff",
+            "color": {
+              "dark": "#ffffff",
+              "light": "#000000"
+            },
             "fontFamily": "blocksuite:surface:Inter",
             "fontStyle": "normal",
             "fontWeight": "400",