diff --git a/blocksuite/affine/model/src/elements/brush/brush.ts b/blocksuite/affine/model/src/elements/brush/brush.ts
index 0048a514c9..557fe398a2 100644
--- a/blocksuite/affine/model/src/elements/brush/brush.ts
+++ b/blocksuite/affine/model/src/elements/brush/brush.ts
@@ -28,7 +28,7 @@ import {
   Vec,
 } from '@blocksuite/global/utils';
 
-import type { Color } from '../../themes/index.js';
+import { type Color, DefaultTheme } from '../../themes/index';
 
 export type BrushProps = BaseElementProps & {
   /**
@@ -131,7 +131,7 @@ export class BrushElementModel extends GfxPrimitiveElementModel<BrushProps> {
   }
 
   @field()
-  accessor color: Color = '#000000';
+  accessor color: Color = DefaultTheme.black;
 
   @watch((_, instance) => {
     instance['_local'].delete('commands');
diff --git a/blocksuite/affine/model/src/elements/connector/connector.ts b/blocksuite/affine/model/src/elements/connector/connector.ts
index 6b31a62ddc..6e33a27e69 100644
--- a/blocksuite/affine/model/src/elements/connector/connector.ts
+++ b/blocksuite/affine/model/src/elements/connector/connector.ts
@@ -37,8 +37,8 @@ import {
   StrokeStyle,
   TextAlign,
   type TextStyleProps,
-} from '../../consts/index.js';
-import type { Color } from '../../themes/index.ts';
+} from '../../consts/index';
+import { type Color, DefaultTheme } from '../../themes/index';
 
 export type SerializedConnection = {
   id?: string;
@@ -433,7 +433,7 @@ export class ConnectorElementModel extends GfxPrimitiveElementModel<ConnectorEle
    * Defines the style of the label.
    */
   @field({
-    color: '#000000',
+    color: DefaultTheme.black,
     fontFamily: FontFamily.Inter,
     fontSize: 16,
     fontStyle: FontStyle.Normal,
@@ -486,7 +486,7 @@ export class ConnectorElementModel extends GfxPrimitiveElementModel<ConnectorEle
   };
 
   @field()
-  accessor stroke: Color = '#000000';
+  accessor stroke: Color = DefaultTheme.connectorColor;
 
   @field()
   accessor strokeStyle: StrokeStyle = StrokeStyle.Solid;
diff --git a/blocksuite/affine/model/src/elements/connector/local-connector.ts b/blocksuite/affine/model/src/elements/connector/local-connector.ts
index 497ea43d6e..09ed1b6642 100644
--- a/blocksuite/affine/model/src/elements/connector/local-connector.ts
+++ b/blocksuite/affine/model/src/elements/connector/local-connector.ts
@@ -6,8 +6,8 @@ import {
   DEFAULT_ROUGHNESS,
   type PointStyle,
   StrokeStyle,
-} from '../../consts/index.js';
-import type { Color } from '../../themes/index.ts';
+} from '../../consts/index';
+import { type Color, DefaultTheme } from '../../themes/index';
 import type { Connection } from './connector.js';
 
 export class LocalConnectorElementModel extends GfxLocalElementModel {
@@ -29,7 +29,7 @@ export class LocalConnectorElementModel extends GfxLocalElementModel {
     position: [0, 0],
   };
 
-  stroke: Color = '#000000';
+  stroke: Color = DefaultTheme.connectorColor;
 
   strokeStyle: StrokeStyle = StrokeStyle.Solid;
 
diff --git a/blocksuite/affine/model/src/elements/shape/shape.ts b/blocksuite/affine/model/src/elements/shape/shape.ts
index b4e7762ebd..f320ca0019 100644
--- a/blocksuite/affine/model/src/elements/shape/shape.ts
+++ b/blocksuite/affine/model/src/elements/shape/shape.ts
@@ -98,7 +98,7 @@ export class ShapeElementModel extends GfxPrimitiveElementModel<ShapeProps> {
     });
   }
 
-  @field('#000000' as Color)
+  @field(DefaultTheme.shapeTextColor)
   accessor color!: Color;
 
   @field()
@@ -200,7 +200,7 @@ export class LocalShapeElementModel extends GfxLocalElementModel {
   }
 
   @prop()
-  accessor color: Color = '#000000';
+  accessor color: Color = DefaultTheme.shapeTextColor;
 
   @prop()
   accessor fillColor: Color = DefaultTheme.shapeFillColor;
diff --git a/blocksuite/affine/model/src/elements/text/text.ts b/blocksuite/affine/model/src/elements/text/text.ts
index 945a4d202f..548fd551eb 100644
--- a/blocksuite/affine/model/src/elements/text/text.ts
+++ b/blocksuite/affine/model/src/elements/text/text.ts
@@ -16,8 +16,8 @@ import {
   FontWeight,
   TextAlign,
   type TextStyleProps,
-} from '../../consts/index.js';
-import type { Color } from '../../themes/index.js';
+} from '../../consts/index';
+import { type Color, DefaultTheme } from '../../themes/index';
 
 export type TextElementProps = BaseElementProps & {
   text: Y.Text;
@@ -61,7 +61,7 @@ export class TextElementModel extends GfxPrimitiveElementModel<TextElementProps>
   }
 
   @field()
-  accessor color: Color = '#000000';
+  accessor color: Color = DefaultTheme.black;
 
   @field()
   accessor fontFamily: FontFamily = FontFamily.Inter;