feat(editor): store real color values in edgeless (#9254)

### What's Changed! * adds theme type: `ThemeSchema` * adds default theme: `DefaultTheme` * stores real color values
2024-12-30 03:36:35 +00:00
parent a5641ae608
commit b9f2650369
287 changed files with 2219 additions and 1520 deletions
--- a/blocksuite/affine/block-frame/src/frame-block.ts
+++ b/blocksuite/affine/block-frame/src/frame-block.ts
@@ -1,4 +1,4 @@
-import type { FrameBlockModel } from '@blocksuite/affine-model';
+import { DefaultTheme, type FrameBlockModel } from '@blocksuite/affine-model';
 import { ThemeProvider } from '@blocksuite/affine-shared/services';
 import { GfxBlockComponent } from '@blocksuite/block-std';
 import { Bound } from '@blocksuite/global/utils';
@@ -56,7 +56,7 @@ export class FrameBlockComponent extends GfxBlockComponent<FrameBlockModel> {
    const { model, showBorder, std } = this;
    const backgroundColor = std
      .get(ThemeProvider)
-      .generateColorProperty(model.background, '--affine-platte-transparent');
+      .generateColorProperty(model.background, DefaultTheme.transparent);
    const _isNavigator =
      this.gfx.tool.currentToolName$.value === 'frameNavigator';
    const frameIndex = this.gfx.layer.getZIndex(model);
--- a/blocksuite/affine/block-note/src/note-edgeless-block.ts
+++ b/blocksuite/affine/block-note/src/note-edgeless-block.ts
@@ -2,7 +2,7 @@ import { EdgelessLegacySlotIdentifier } from '@blocksuite/affine-block-surface';
 import { MoreIndicatorIcon } from '@blocksuite/affine-components/icons';
 import type { NoteBlockModel } from '@blocksuite/affine-model';
 import {
-  DEFAULT_NOTE_BACKGROUND_COLOR,
+  DefaultTheme,
  NoteDisplayMode,
  StrokeStyle,
 } from '@blocksuite/affine-model';
@@ -24,6 +24,7 @@ import {
  WithDisposable,
 } from '@blocksuite/global/utils';
 import type { BlockModel } from '@blocksuite/store';
+import { computed } from '@preact/signals-core';
 import { css, html, nothing } from 'lit';
 import { property, query, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
@@ -141,6 +142,16 @@ export class EdgelessNoteBlockComponent extends toGfxBlockComponent(
    }
  `;

+  private readonly _backgroundColor$ = computed(() => {
+    const themeProvider = this.std.get(ThemeProvider);
+    const theme = themeProvider.theme$.value;
+    return themeProvider.generateColorProperty(
+      this.model.background$.value,
+      DefaultTheme.noteBackgrounColor,
+      theme
+    );
+  });
+
  private get _isShowCollapsedContent() {
    return this.model.edgeless.collapse && (this._isResizing || this._isHover);
  }
@@ -406,9 +417,6 @@ export class EdgelessNoteBlockComponent extends toGfxBlockComponent(
    };

    const extra = this._editing ? ACTIVE_NOTE_EXTRA_PADDING : 0;
-    const backgroundColor = this.std
-      .get(ThemeProvider)
-      .generateColorProperty(model.background, DEFAULT_NOTE_BACKGROUND_COLOR);

    const backgroundStyle = {
      position: 'absolute',
@@ -420,7 +428,7 @@ export class EdgelessNoteBlockComponent extends toGfxBlockComponent(
      transition: this._editing
        ? 'left 0.3s, top 0.3s, width 0.3s, height 0.3s'
        : 'none',
-      backgroundColor,
+      backgroundColor: this._backgroundColor$.value,
      border: `${borderSize}px ${
        borderStyle === StrokeStyle.Dash ? 'dashed' : borderStyle
      } var(--affine-black-10)`,
--- a/blocksuite/affine/block-surface/src/renderer/canvas-renderer.ts
+++ b/blocksuite/affine/block-surface/src/renderer/canvas-renderer.ts
@@ -21,9 +21,9 @@ import type { ElementRenderer } from './elements/index.js';
 import type { Overlay } from './overlay.js';

 type EnvProvider = {
-  generateColorProperty: (color: Color, fallback: string) => string;
+  generateColorProperty: (color: Color, fallback?: Color) => string;
  getColorScheme: () => ColorScheme;
-  getColorValue: (color: Color, fallback?: string, real?: boolean) => string;
+  getColorValue: (color: Color, fallback?: Color, real?: boolean) => string;
  getPropertyValue: (property: string) => string;
  selectedElements?: () => string[];
 };
@@ -368,10 +368,9 @@ export class CanvasRenderer {
    this._disposables.dispose();
  }

-  generateColorProperty(color: Color, fallback: string) {
+  generateColorProperty(color: Color, fallback?: Color) {
    return (
-      this.provider.generateColorProperty?.(color, fallback) ??
-      (fallback.startsWith('--') ? `var(${fallback})` : fallback)
+      this.provider.generateColorProperty?.(color, fallback) ?? 'transparent'
    );
  }

@@ -409,7 +408,7 @@ export class CanvasRenderer {
    return this.provider.getColorScheme?.() ?? ColorScheme.Light;
  }

-  getColorValue(color: Color, fallback?: string, real?: boolean) {
+  getColorValue(color: Color, fallback?: Color, real?: boolean) {
    return (
      this.provider.getColorValue?.(color, fallback, real) ?? 'transparent'
    );
--- a/blocksuite/affine/block-surface/src/renderer/elements/brush/index.ts
+++ b/blocksuite/affine/block-surface/src/renderer/elements/brush/index.ts
@@ -1,4 +1,4 @@
-import type { BrushElementModel } from '@blocksuite/affine-model';
+import { type BrushElementModel, DefaultTheme } from '@blocksuite/affine-model';

 import type { CanvasRenderer } from '../../canvas-renderer.js';

@@ -17,7 +17,7 @@ export function brush(
    matrix.translateSelf(cx, cy).rotateSelf(rotate).translateSelf(-cx, -cy)
  );

-  const color = renderer.getColorValue(model.color, '#000000', true);
+  const color = renderer.getColorValue(model.color, DefaultTheme.black, true);

  ctx.fillStyle = color;

--- a/blocksuite/affine/block-surface/src/renderer/elements/connector/index.ts
+++ b/blocksuite/affine/block-surface/src/renderer/elements/connector/index.ts
@@ -1,6 +1,7 @@
 import {
  type ConnectorElementModel,
  ConnectorMode,
+  DefaultTheme,
  type LocalConnectorElementModel,
  type PointStyle,
 } from '@blocksuite/affine-model';
@@ -75,7 +76,11 @@ export function connector(
    ctx.clip(path, 'evenodd');
  }

-  const strokeColor = renderer.getColorValue(model.stroke, '#000000', true);
+  const strokeColor = renderer.getColorValue(
+    model.stroke,
+    DefaultTheme.connectorColor,
+    true
+  );

  renderPoints(
    model,
@@ -249,7 +254,7 @@ function renderLabel(
  ctx.font = font;
  ctx.textAlign = textAlign;
  ctx.textBaseline = 'middle';
-  ctx.fillStyle = renderer.getColorValue(color, '#000000', true);
+  ctx.fillStyle = renderer.getColorValue(color, DefaultTheme.black, true);

  let textMaxWidth = textAlign === 'center' ? 0 : getMaxTextWidth(lines, font);
  if (hasMaxWidth && maxWidth > 0) {
--- a/blocksuite/affine/block-surface/src/renderer/elements/shape/index.ts
+++ b/blocksuite/affine/block-surface/src/renderer/elements/shape/index.ts
@@ -3,12 +3,7 @@ import type {
  ShapeElementModel,
  ShapeType,
 } from '@blocksuite/affine-model';
-import {
-  DEFAULT_SHAPE_FILL_COLOR,
-  DEFAULT_SHAPE_STROKE_COLOR,
-  DEFAULT_SHAPE_TEXT_COLOR,
-  TextAlign,
-} from '@blocksuite/affine-model';
+import { DefaultTheme, TextAlign } from '@blocksuite/affine-model';
 import type { IBound } from '@blocksuite/global/utils';
 import { Bound } from '@blocksuite/global/utils';
 import { deltaInsertsToChunks } from '@blocksuite/inline';
@@ -55,17 +50,17 @@ export function shape(
 ) {
  const color = renderer.getColorValue(
    model.color,
-    DEFAULT_SHAPE_TEXT_COLOR,
+    DefaultTheme.shapeTextColor,
    true
  );
  const fillColor = renderer.getColorValue(
    model.fillColor,
-    DEFAULT_SHAPE_FILL_COLOR,
+    DefaultTheme.shapeFillColor,
    true
  );
  const strokeColor = renderer.getColorValue(
    model.strokeColor,
-    DEFAULT_SHAPE_STROKE_COLOR,
+    DefaultTheme.shapeStrokeColor,
    true
  );
  const colors = { color, fillColor, strokeColor };
--- a/blocksuite/affine/block-surface/src/renderer/elements/text/index.ts
+++ b/blocksuite/affine/block-surface/src/renderer/elements/text/index.ts
@@ -1,4 +1,4 @@
-import type { TextElementModel } from '@blocksuite/affine-model';
+import { DefaultTheme, type TextElementModel } from '@blocksuite/affine-model';
 import { deltaInsertsToChunks } from '@blocksuite/inline';

 import type { CanvasRenderer } from '../../canvas-renderer.js';
@@ -39,7 +39,11 @@ export function text(
  const horizontalOffset =
    textAlign === 'center' ? w / 2 : textAlign === 'right' ? w : 0;

-  const color = renderer.getColorValue(model.color, '#000000', true);
+  const color = renderer.getColorValue(
+    model.color,
+    DefaultTheme.textColor,
+    true
+  );

  ctx.font = font;
  ctx.fillStyle = color;
--- a/blocksuite/affine/block-surface/src/surface-block.ts
+++ b/blocksuite/affine/block-surface/src/surface-block.ts
@@ -160,13 +160,13 @@ export class SurfaceBlockComponent extends BlockComponent<
      gridManager: gfx.grid,
      enableStackingCanvas: true,
      provider: {
-        generateColorProperty: (color: Color, fallback: string) =>
+        generateColorProperty: (color: Color, fallback?: Color) =>
          themeService.generateColorProperty(
            color,
            fallback,
            themeService.edgelessTheme
          ),
-        getColorValue: (color: Color, fallback?: string, real?: boolean) =>
+        getColorValue: (color: Color, fallback?: Color, real?: boolean) =>
          themeService.getColorValue(
            color,
            fallback,
--- a/blocksuite/affine/components/src/toolbar/styles.ts
+++ b/blocksuite/affine/components/src/toolbar/styles.ts
@@ -8,6 +8,7 @@ import { unsafeCSS } from 'lit';
 const toolbarColorKeys: Array<keyof AffineCssVariables> = [
  '--affine-background-overlay-panel-color',
  '--affine-v2-layer-background-overlayPanel' as never,
+  '--affine-v2-layer-insideBorder-blackBorder' as never,
  '--affine-background-error-color',
  '--affine-background-primary-color',
  '--affine-background-tertiary-color',
--- a/blocksuite/affine/model/src/blocks/frame/frame-model.ts
+++ b/blocksuite/affine/model/src/blocks/frame/frame-model.ts
@@ -17,7 +17,7 @@ import {
 import { Bound } from '@blocksuite/global/utils';
 import { BlockModel, defineBlockSchema, type Text } from '@blocksuite/store';

-import type { Color } from '../../consts/index.js';
+import type { Color } from '../../themes/index.js';

 export type FrameBlockProps = {
  title: Text;
--- a/blocksuite/affine/model/src/blocks/note/note-model.ts
+++ b/blocksuite/affine/model/src/blocks/note/note-model.ts
@@ -7,8 +7,6 @@ import { Bound } from '@blocksuite/global/utils';
 import { BlockModel, defineBlockSchema } from '@blocksuite/store';

 import {
-  type Color,
-  DEFAULT_NOTE_BACKGROUND_COLOR,
  DEFAULT_NOTE_BORDER_SIZE,
  DEFAULT_NOTE_BORDER_STYLE,
  DEFAULT_NOTE_CORNER,
@@ -18,12 +16,13 @@ import {
  NoteDisplayMode,
  type StrokeStyle,
 } from '../../consts/index.js';
+import { type Color, DefaultTheme } from '../../themes/index.js';

 export const NoteBlockSchema = defineBlockSchema({
  flavour: 'affine:note',
  props: (): NoteProps => ({
    xywh: `[0,0,${DEFAULT_NOTE_WIDTH},${DEFAULT_NOTE_HEIGHT}]`,
-    background: DEFAULT_NOTE_BACKGROUND_COLOR,
+    background: DefaultTheme.noteBackgrounColor,
    index: 'a0',
    lockedBySelf: false,
    hidden: false,
--- a/blocksuite/affine/model/src/consts/brush.ts
+++ b/blocksuite/affine/model/src/consts/brush.ts
@@ -1,3 +0,0 @@
-import { StrokeColor } from './color.js';
-
-export const DEFAULT_BRUSH_COLOR = StrokeColor.Blue;
--- a/blocksuite/affine/model/src/consts/color.ts
+++ b/blocksuite/affine/model/src/consts/color.ts
@@ -1,97 +0,0 @@
-import { themeToVar } from '@toeverything/theme/v2';
-import { z } from 'zod';
-
-import { createEnumMap } from '../utils/enum.js';
-
-export const Transparent = 'transparent';
-export const White = themeToVar('edgeless/palette/white');
-export const Black = themeToVar('edgeless/palette/black');
-
-export const Light = {
-  Red: themeToVar('edgeless/palette/light/redLight'),
-  Orange: themeToVar('edgeless/palette/light/orangeLight'),
-  Yellow: themeToVar('edgeless/palette/light/yellowLight'),
-  Green: themeToVar('edgeless/palette/light/greenLight'),
-  Blue: themeToVar('edgeless/palette/light/blueLight'),
-  Purple: themeToVar('edgeless/palette/light/purpleLight'),
-  Magenta: themeToVar('edgeless/palette/light/magentaLight'),
-  Grey: themeToVar('edgeless/palette/light/greyLight'),
-} as const;
-
-export const LIGHT_PALETTES = [
-  Light.Red,
-  Light.Orange,
-  Light.Yellow,
-  Light.Green,
-  Light.Blue,
-  Light.Purple,
-  Light.Magenta,
-  Light.Grey,
-] as const;
-
-export const Medium = {
-  Red: themeToVar('edgeless/palette/medium/redMedium'),
-  Orange: themeToVar('edgeless/palette/medium/orangeMedium'),
-  Yellow: themeToVar('edgeless/palette/medium/yellowMedium'),
-  Green: themeToVar('edgeless/palette/medium/greenMedium'),
-  Blue: themeToVar('edgeless/palette/medium/blueMedium'),
-  Purple: themeToVar('edgeless/palette/medium/purpleMedium'),
-  Magenta: themeToVar('edgeless/palette/medium/magentaMedium'),
-  Grey: themeToVar('edgeless/palette/medium/greyMedium'),
-} as const;
-
-export const MEDIUM_PALETTES = [
-  Medium.Red,
-  Medium.Orange,
-  Medium.Yellow,
-  Medium.Green,
-  Medium.Blue,
-  Medium.Purple,
-  Medium.Magenta,
-  Medium.Grey,
-] as const;
-
-export const Heavy = {
-  Red: themeToVar('edgeless/palette/heavy/red'),
-  Orange: themeToVar('edgeless/palette/heavy/orange'),
-  Yellow: themeToVar('edgeless/palette/heavy/yellow'),
-  Green: themeToVar('edgeless/palette/heavy/green'),
-  Blue: themeToVar('edgeless/palette/heavy/blue'),
-  Purple: themeToVar('edgeless/palette/heavy/purple'),
-  Magenta: themeToVar('edgeless/palette/heavy/magenta'),
-} as const;
-
-export const HEAVY_PALETTES = [
-  Heavy.Red,
-  Heavy.Orange,
-  Heavy.Yellow,
-  Heavy.Green,
-  Heavy.Blue,
-  Heavy.Purple,
-  Heavy.Magenta,
-] as const;
-
-export const PALETTES = [
-  // Light
-  ...LIGHT_PALETTES,
-
-  Transparent,
-
-  // Medium
-  ...MEDIUM_PALETTES,
-
-  White,
-
-  // Heavy
-  ...HEAVY_PALETTES,
-
-  Black,
-] as const;
-
-export const PaletteEnum = z.enum(PALETTES);
-
-export const StrokeColor = { Black, White, ...Medium } as const;
-
-export const StrokeColorMap = createEnumMap(StrokeColor);
-
-export const STROKE_COLORS = [...MEDIUM_PALETTES, Black, White] as const;
--- a/blocksuite/affine/model/src/consts/connector.ts
+++ b/blocksuite/affine/model/src/consts/connector.ts
@@ -1,5 +1,4 @@
 import { createEnumMap } from '../utils/enum.js';
-import { StrokeColor } from './color.js';

 export enum ConnectorEndpoint {
  Front = 'Front',
@@ -16,10 +15,6 @@ export enum PointStyle {

 export const PointStyleMap = createEnumMap(PointStyle);

-export const DEFAULT_CONNECTOR_COLOR = StrokeColor.Grey;
-
-export const DEFAULT_CONNECTOR_TEXT_COLOR = StrokeColor.Black;
-
 export const DEFAULT_FRONT_END_POINT_STYLE = PointStyle.None;

 export const DEFAULT_REAR_END_POINT_STYLE = PointStyle.Arrow;
--- a/blocksuite/affine/model/src/consts/frame.ts
+++ b/blocksuite/affine/model/src/consts/frame.ts
@@ -1,3 +0,0 @@
-import { Light } from './color.js';
-
-export const FrameBackgroundColor = Light;
--- a/blocksuite/affine/model/src/consts/index.ts
+++ b/blocksuite/affine/model/src/consts/index.ts
@@ -1,8 +1,5 @@
-export * from './brush.js';
-export * from './color.js';
 export * from './connector.js';
 export * from './doc.js';
-export * from './frame.js';
 export * from './image.js';
 export * from './line.js';
 export * from './mindmap.js';
--- a/blocksuite/affine/model/src/consts/line.ts
+++ b/blocksuite/affine/model/src/consts/line.ts
@@ -3,14 +3,14 @@ import { z } from 'zod';
 import { createEnumMap } from '../utils/enum.js';

 export enum LineWidth {
-  Eight = 8,
+  Two = 2,
  // Thin
  Four = 4,
  Six = 6,
+  Eight = 8,
  // Thick
  Ten = 10,
  Twelve = 12,
-  Two = 2,
 }

 export const LINE_WIDTHS = [
@@ -23,7 +23,7 @@ export const LINE_WIDTHS = [
 ];

 /**
- * Use `StrokeColor` instead.
+ * Use `DefaultTheme.StrokeColorMap` instead.
 *
 * @deprecated
 */
@@ -43,6 +43,11 @@ export enum LineColor {

 export const LineColorMap = createEnumMap(LineColor);

+/**
+ * Use `DefaultTheme.StrokeColorPalettes` instead.
+ *
+ * @deprecated
+ */
 export const LINE_COLORS = [
  LineColor.Yellow,
  LineColor.Orange,
--- a/blocksuite/affine/model/src/consts/note.ts
+++ b/blocksuite/affine/model/src/consts/note.ts
@@ -1,4 +1,3 @@
-import { themeToVar } from '@toeverything/theme/v2';
 import { z } from 'zod';

 import { createEnumMap } from '../utils/enum.js';
@@ -9,40 +8,6 @@ export const NOTE_MIN_HEIGHT = 92;
 export const DEFAULT_NOTE_WIDTH = NOTE_MIN_WIDTH;
 export const DEFAULT_NOTE_HEIGHT = NOTE_MIN_HEIGHT;

-export const NoteBackgroundColor = {
-  Yellow: themeToVar('edgeless/note/yellow'),
-  Orange: themeToVar('edgeless/note/orange'),
-  Red: themeToVar('edgeless/note/red'),
-  Magenta: themeToVar('edgeless/note/magenta'),
-  Purple: themeToVar('edgeless/note/purple'),
-  Blue: themeToVar('edgeless/note/blue'),
-  Teal: themeToVar('edgeless/note/teal'),
-  Green: themeToVar('edgeless/note/green'),
-  Black: themeToVar('edgeless/note/black'),
-  Grey: themeToVar('edgeless/note/grey'),
-  White: themeToVar('edgeless/note/white'),
-} as const;
-
-export const NoteBackgroundColorMap = createEnumMap(NoteBackgroundColor);
-
-export const NOTE_BACKGROUND_PALETTES = [
-  NoteBackgroundColor.Yellow,
-  NoteBackgroundColor.Orange,
-  NoteBackgroundColor.Red,
-  NoteBackgroundColor.Magenta,
-  NoteBackgroundColor.Purple,
-  NoteBackgroundColor.Blue,
-  NoteBackgroundColor.Teal,
-  NoteBackgroundColor.Green,
-  NoteBackgroundColor.Black,
-  NoteBackgroundColor.Grey,
-  NoteBackgroundColor.White,
-] as const;
-
-export const NoteBackgroundPaletteEnum = z.enum(NOTE_BACKGROUND_PALETTES);
-
-export const DEFAULT_NOTE_BACKGROUND_COLOR = NoteBackgroundColor.White;
-
 export enum NoteShadow {
  Box = '--affine-note-shadow-box',
  Film = '--affine-note-shadow-film',
--- a/blocksuite/affine/model/src/consts/shape.ts
+++ b/blocksuite/affine/model/src/consts/shape.ts
@@ -1,5 +1,3 @@
-import { Black, Light, LIGHT_PALETTES, StrokeColor, White } from './color.js';
-
 export const DEFAULT_ROUGHNESS = 1.4;

 // TODO: need to check the default central area ratio
@@ -46,13 +44,3 @@ export enum ShapeStyle {
  General = 'General',
  Scribbled = 'Scribbled',
 }
-
-export const ShapeFillColor = { Black, White, ...Light } as const;
-
-export const SHAPE_FILL_COLORS = [...LIGHT_PALETTES, Black, White];
-
-export const DEFAULT_SHAPE_FILL_COLOR = Light.Yellow;
-
-export const DEFAULT_SHAPE_STROKE_COLOR = StrokeColor.Yellow;
-
-export const DEFAULT_SHAPE_TEXT_COLOR = StrokeColor.Black;
--- a/blocksuite/affine/model/src/consts/text.ts
+++ b/blocksuite/affine/model/src/consts/text.ts
@@ -1,12 +1,5 @@
+import type { Color } from '../themes/color.js';
 import { createEnumMap } from '../utils/enum.js';
-import { StrokeColor } from './color.js';
-
-export enum ColorScheme {
-  Dark = 'dark',
-  Light = 'light',
-}
-
-export type Color = string | Partial<Record<ColorScheme | 'normal', string>>;

 export enum TextAlign {
  Center = 'center',
@@ -66,5 +59,3 @@ export enum TextResizing {
  AUTO_WIDTH_AND_HEIGHT,
  AUTO_HEIGHT,
 }
-
-export const DEFAULT_TEXT_COLOR = StrokeColor.Blue;
--- 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 '../../consts/index.js';
+import type { Color } from '../../themes/index.js';

 export type BrushProps = BaseElementProps & {
  /**
--- a/blocksuite/affine/model/src/elements/connector/connector.ts
+++ b/blocksuite/affine/model/src/elements/connector/connector.ts
@@ -26,7 +26,6 @@ import {
 import { DocCollection, type Y } from '@blocksuite/store';

 import {
-  type Color,
  CONNECTOR_LABEL_MAX_WIDTH,
  ConnectorLabelOffsetAnchor,
  ConnectorMode,
@@ -39,6 +38,7 @@ import {
  TextAlign,
  type TextStyleProps,
 } from '../../consts/index.js';
+import type { Color } from '../../themes/index.ts';

 export type SerializedConnection = {
  id?: string;
--- a/blocksuite/affine/model/src/elements/connector/local-connector.ts
+++ b/blocksuite/affine/model/src/elements/connector/local-connector.ts
@@ -2,12 +2,12 @@ import { GfxLocalElementModel } from '@blocksuite/block-std/gfx';
 import type { PointLocation } from '@blocksuite/global/utils';

 import {
-  type Color,
  ConnectorMode,
  DEFAULT_ROUGHNESS,
  type PointStyle,
  StrokeStyle,
 } from '../../consts/index.js';
+import type { Color } from '../../themes/index.ts';
 import type { Connection } from './connector.js';

 export class LocalConnectorElementModel extends GfxLocalElementModel {
--- a/blocksuite/affine/model/src/elements/mindmap/style.ts
+++ b/blocksuite/affine/model/src/elements/mindmap/style.ts
@@ -1,11 +1,10 @@
 import { isEqual, last } from '@blocksuite/global/utils';

 import { ConnectorMode } from '../../consts/connector.js';
-import { LineColor } from '../../consts/line.js';
 import { MindmapStyle } from '../../consts/mindmap.js';
 import { StrokeStyle } from '../../consts/note.js';
-import { ShapeFillColor } from '../../consts/shape.js';
 import { FontFamily, FontWeight, TextResizing } from '../../consts/text.js';
+import { type Color, DefaultTheme } from '../../themes/index.js';
 import type { MindmapNode } from './mindmap.js';

 export type CollapseButton = {
@@ -14,9 +13,9 @@ export type CollapseButton = {
  radius: number;

  filled: boolean;
-  fillColor: string;
+  fillColor: Color;

-  strokeColor: string;
+  strokeColor: Color;
  strokeWidth: number;
 };

@@ -25,24 +24,24 @@ export type ExpandButton = CollapseButton & {
  fontSize: number;
  fontWeight: FontWeight;

-  color: string;
+  color: Color;
 };

 export type NodeStyle = {
  radius: number;

  strokeWidth: number;
-  strokeColor: string;
+  strokeColor: Color;

  textResizing: TextResizing;

  fontSize: number;
  fontFamily: string;
  fontWeight: FontWeight;
-  color: string;
+  color: Color;

  filled: boolean;
-  fillColor: string;
+  fillColor: Color;

  padding: [number, number];

@@ -56,7 +55,7 @@ export type NodeStyle = {

 export type ConnectorStyle = {
  strokeStyle: StrokeStyle;
-  stroke: string;
+  stroke: Color;
  strokeWidth: number;

  mode: ConnectorMode;
@@ -78,11 +77,11 @@ export abstract class MindmapStyleGetter {

 export class StyleOne extends MindmapStyleGetter {
  private readonly _colorOrders = [
-    LineColor.Purple,
-    LineColor.Magenta,
-    LineColor.Orange,
-    LineColor.Yellow,
-    LineColor.Green,
+    DefaultTheme.StrokeColorMap.Purple,
+    DefaultTheme.StrokeColorMap.Magenta,
+    DefaultTheme.StrokeColorMap.Orange,
+    DefaultTheme.StrokeColorMap.Yellow,
+    DefaultTheme.StrokeColorMap.Green,
    '#7ae2d5',
  ];

@@ -92,15 +91,15 @@ export class StyleOne extends MindmapStyleGetter {
    textResizing: TextResizing.AUTO_WIDTH_AND_HEIGHT,

    strokeWidth: 4,
-    strokeColor: '#84CFFF',
+    strokeColor: '#84cfff',

    fontFamily: FontFamily.Poppins,
    fontSize: 20,
    fontWeight: FontWeight.SemiBold,
-    color: '--affine-black',
+    color: DefaultTheme.pureBlack,

    filled: true,
-    fillColor: '--affine-white',
+    fillColor: DefaultTheme.pureWhite,

    padding: [11, 22] as [number, number],

@@ -133,7 +132,7 @@ export class StyleOne extends MindmapStyleGetter {
        radius: 0.5,

        filled: true,
-        fillColor: '--affine-white',
+        fillColor: DefaultTheme.pureWhite,

        strokeColor: color,
        strokeWidth: 3,
@@ -151,7 +150,7 @@ export class StyleOne extends MindmapStyleGetter {

        padding: [4, 0],

-        color: '--affine-white',
+        color: DefaultTheme.pureWhite,

        fontFamily: FontFamily.Inter,
        fontWeight: FontWeight.Bold,
@@ -168,10 +167,10 @@ export class StyleOne extends MindmapStyleGetter {
        fontFamily: FontFamily.Poppins,
        fontSize: 16,
        fontWeight: FontWeight.Medium,
-        color: '--affine-black',
+        color: DefaultTheme.pureBlack,

        filled: true,
-        fillColor: '--affine-white',
+        fillColor: DefaultTheme.pureWhite,

        padding: [6, 22] as [number, number],

@@ -189,9 +188,9 @@ export const styleOne = new StyleOne();

 export class StyleTwo extends MindmapStyleGetter {
  private readonly _colorOrders = [
-    ShapeFillColor.Blue,
+    DefaultTheme.StrokeColorMap.Blue,
    '#7ae2d5',
-    ShapeFillColor.Yellow,
+    DefaultTheme.StrokeColorMap.Yellow,
  ];

  readonly root = {
@@ -200,15 +199,15 @@ export class StyleTwo extends MindmapStyleGetter {
    textResizing: TextResizing.AUTO_WIDTH_AND_HEIGHT,

    strokeWidth: 3,
-    strokeColor: '--affine-black',
+    strokeColor: DefaultTheme.pureBlack,

    fontFamily: FontFamily.Poppins,
    fontSize: 18,
    fontWeight: FontWeight.SemiBold,
-    color: ShapeFillColor.Black,
+    color: DefaultTheme.pureBlack,

    filled: true,
-    fillColor: ShapeFillColor.Orange,
+    fillColor: DefaultTheme.StrokeColorMap.Yellow,

    padding: [11, 22] as [number, number],

@@ -216,7 +215,7 @@ export class StyleTwo extends MindmapStyleGetter {
      blur: 0,
      offsetX: 3,
      offsetY: 3,
-      color: '--affine-black',
+      color: DefaultTheme.pureBlack,
    },
  };

@@ -232,7 +231,7 @@ export class StyleTwo extends MindmapStyleGetter {
    return {
      connector: {
        strokeStyle: StrokeStyle.Solid,
-        stroke: '--affine-black',
+        stroke: DefaultTheme.pureBlack,
        strokeWidth: 3,

        mode: ConnectorMode.Orthogonal,
@@ -243,9 +242,9 @@ export class StyleTwo extends MindmapStyleGetter {
        radius: 0.5,

        filled: true,
-        fillColor: '--affine-white',
+        fillColor: DefaultTheme.pureWhite,

-        strokeColor: '--affine-black',
+        strokeColor: DefaultTheme.pureBlack,
        strokeWidth: 3,
      },
      expandButton: {
@@ -254,14 +253,14 @@ export class StyleTwo extends MindmapStyleGetter {
        radius: 2,

        filled: true,
-        fillColor: '--affine-black',
+        fillColor: DefaultTheme.pureBlack,

        padding: [4, 0],

-        strokeColor: '--affine-black',
+        strokeColor: DefaultTheme.pureBlack,
        strokeWidth: 0,

-        color: '--affine-white',
+        color: DefaultTheme.pureWhite,

        fontFamily: FontFamily.Inter,
        fontWeight: FontWeight.Bold,
@@ -273,12 +272,12 @@ export class StyleTwo extends MindmapStyleGetter {
        textResizing: TextResizing.AUTO_WIDTH_AND_HEIGHT,

        strokeWidth: 3,
-        strokeColor: '--affine-black',
+        strokeColor: DefaultTheme.pureBlack,

        fontFamily: FontFamily.Poppins,
        fontSize: 16,
        fontWeight: FontWeight.SemiBold,
-        color: ShapeFillColor.Black,
+        color: DefaultTheme.pureBlack,

        filled: true,
        fillColor: color,
@@ -289,7 +288,7 @@ export class StyleTwo extends MindmapStyleGetter {
          blur: 0,
          offsetX: 3,
          offsetY: 3,
-          color: '--affine-black',
+          color: DefaultTheme.pureBlack,
        },
      },
    };
@@ -299,9 +298,9 @@ export const styleTwo = new StyleTwo();

 export class StyleThree extends MindmapStyleGetter {
  private readonly _strokeColor = [
-    LineColor.Yellow,
-    LineColor.Green,
-    LineColor.Teal,
+    DefaultTheme.StrokeColorMap.Yellow,
+    DefaultTheme.StrokeColorMap.Green,
+    DefaultTheme.StrokeColorMap.Teal,
  ];

  readonly root = {
@@ -315,10 +314,10 @@ export class StyleThree extends MindmapStyleGetter {
    fontFamily: FontFamily.Poppins,
    fontSize: 16,
    fontWeight: FontWeight.Medium,
-    color: ShapeFillColor.Black,
+    color: DefaultTheme.pureBlack,

    filled: true,
-    fillColor: ShapeFillColor.Yellow,
+    fillColor: DefaultTheme.StrokeColorMap.Yellow,

    padding: [10, 22] as [number, number],

@@ -349,10 +348,10 @@ export class StyleThree extends MindmapStyleGetter {
        fontFamily: FontFamily.Poppins,
        fontSize: 16,
        fontWeight: FontWeight.Medium,
-        color: ShapeFillColor.Black,
+        color: DefaultTheme.pureBlack,

        filled: true,
-        fillColor: ShapeFillColor.White,
+        fillColor: DefaultTheme.pureWhite,

        padding: [6, 22] as [number, number],

@@ -369,9 +368,9 @@ export class StyleThree extends MindmapStyleGetter {
        radius: 0.5,

        filled: true,
-        fillColor: '--affine-white',
+        fillColor: DefaultTheme.pureWhite,

-        strokeColor: '#3CBC36',
+        strokeColor: '#3cbc36',
        strokeWidth: 3,
      },
      expandButton: {
@@ -380,11 +379,11 @@ export class StyleThree extends MindmapStyleGetter {
        radius: 8,

        filled: true,
-        fillColor: '#3CBC36',
+        fillColor: '#3cbc36',

        padding: [4, 0],

-        strokeColor: '#3CBC36',
+        strokeColor: '#3cbc36',
        strokeWidth: 0,

        color: '#fff',
@@ -407,12 +406,12 @@ export const styleThree = new StyleThree();

 export class StyleFour extends MindmapStyleGetter {
  private readonly _colors = [
-    ShapeFillColor.Purple,
-    ShapeFillColor.Magenta,
-    ShapeFillColor.Orange,
-    ShapeFillColor.Yellow,
-    ShapeFillColor.Green,
-    ShapeFillColor.Blue,
+    DefaultTheme.StrokeColorMap.Purple,
+    DefaultTheme.StrokeColorMap.Magenta,
+    DefaultTheme.StrokeColorMap.Orange,
+    DefaultTheme.StrokeColorMap.Yellow,
+    DefaultTheme.StrokeColorMap.Green,
+    DefaultTheme.StrokeColorMap.Blue,
  ];

  readonly root = {
@@ -426,7 +425,7 @@ export class StyleFour extends MindmapStyleGetter {
    fontFamily: FontFamily.Kalam,
    fontSize: 22,
    fontWeight: FontWeight.Bold,
-    color: '--affine-black',
+    color: DefaultTheme.black,

    filled: true,
    fillColor: 'transparent',
@@ -455,7 +454,7 @@ export class StyleFour extends MindmapStyleGetter {
        radius: 0.5,

        filled: true,
-        fillColor: '--affine-white',
+        fillColor: DefaultTheme.pureWhite,

        strokeColor: stroke,
        strokeWidth: 3,
@@ -473,7 +472,7 @@ export class StyleFour extends MindmapStyleGetter {
        strokeColor: stroke,
        strokeWidth: 0,

-        color: '--affine-white',
+        color: DefaultTheme.pureWhite,

        fontFamily: FontFamily.Inter,
        fontWeight: FontWeight.Bold,
--- a/blocksuite/affine/model/src/elements/shape/shape.ts
+++ b/blocksuite/affine/model/src/elements/shape/shape.ts
@@ -19,22 +19,20 @@ import type {
 import { DocCollection, type Y } from '@blocksuite/store';

 import {
-  type Color,
  DEFAULT_ROUGHNESS,
  FontFamily,
  FontStyle,
  FontWeight,
-  ShapeFillColor,
  ShapeStyle,
  ShapeTextFontSize,
  ShapeType,
-  StrokeColor,
  StrokeStyle,
  TextAlign,
  TextResizing,
  type TextStyleProps,
  TextVerticalAlign,
 } from '../../consts/index.js';
+import { type Color, DefaultTheme } from '../../themes/index.js';
 import { shapeMethods } from './api/index.js';

 export type ShapeProps = BaseElementProps & {
@@ -104,7 +102,7 @@ export class ShapeElementModel extends GfxPrimitiveElementModel<ShapeProps> {
  accessor color!: Color;

  @field()
-  accessor fillColor: Color = ShapeFillColor.Yellow;
+  accessor fillColor: Color = DefaultTheme.shapeFillColor;

  @field()
  accessor filled: boolean = false;
@@ -160,7 +158,7 @@ export class ShapeElementModel extends GfxPrimitiveElementModel<ShapeProps> {
  accessor shapeType: ShapeType = ShapeType.Rect;

  @field()
-  accessor strokeColor: Color = StrokeColor.Yellow;
+  accessor strokeColor: Color = DefaultTheme.shapeStrokeColor;

  @field()
  accessor strokeStyle: StrokeStyle = StrokeStyle.Solid;
@@ -205,7 +203,7 @@ export class LocalShapeElementModel extends GfxLocalElementModel {
  accessor color: Color = '#000000';

  @prop()
-  accessor fillColor: Color = ShapeFillColor.Yellow;
+  accessor fillColor: Color = DefaultTheme.shapeFillColor;

  @prop()
  accessor filled: boolean = false;
@@ -246,7 +244,7 @@ export class LocalShapeElementModel extends GfxLocalElementModel {
  accessor shapeType: ShapeType = ShapeType.Rect;

  @prop()
-  accessor strokeColor: Color = StrokeColor.Yellow;
+  accessor strokeColor: Color = DefaultTheme.shapeStrokeColor;

  @prop()
  accessor strokeStyle: StrokeStyle = StrokeStyle.Solid;
--- a/blocksuite/affine/model/src/elements/text/text.ts
+++ b/blocksuite/affine/model/src/elements/text/text.ts
@@ -11,13 +11,13 @@ import {
 import { DocCollection, type Y } from '@blocksuite/store';

 import {
-  type Color,
  FontFamily,
  FontStyle,
  FontWeight,
  TextAlign,
  type TextStyleProps,
 } from '../../consts/index.js';
+import type { Color } from '../../themes/index.js';

 export type TextElementProps = BaseElementProps & {
  text: Y.Text;
--- a/blocksuite/affine/model/src/index.ts
+++ b/blocksuite/affine/model/src/index.ts
@@ -1,4 +1,5 @@
 export * from './blocks/index.js';
 export * from './consts/index.js';
 export * from './elements/index.js';
+export * from './themes/index.js';
 export * from './utils/index.js';
--- a/blocksuite/affine/model/src/themes/color.ts
+++ b/blocksuite/affine/model/src/themes/color.ts
@@ -0,0 +1,54 @@
+import { z } from 'zod';
+
+export enum ColorScheme {
+  Dark = 'dark',
+  Light = 'light',
+}
+
+const ColorNormalSchema = z.object({
+  normal: z.string(),
+});
+
+const ColorDarkLightSchema = z.object({
+  [ColorScheme.Dark]: z.string(),
+  [ColorScheme.Light]: z.string(),
+});
+
+export const ColorSchema = z.union([
+  z.string(),
+  ColorNormalSchema,
+  ColorDarkLightSchema,
+]);
+
+export type Color = z.infer<typeof ColorSchema>;
+
+// Converts `Color` type to string.
+export function resolveColor(
+  color: Color,
+  colorScheme: ColorScheme,
+  fallback = 'transparent'
+): string {
+  let value = fallback;
+
+  if (typeof color === 'object') {
+    if (ColorScheme.Dark in color && ColorScheme.Light in color) {
+      value = color[colorScheme];
+    } else if ('normal' in color) {
+      value = color.normal;
+    }
+  } else {
+    value = color;
+  }
+
+  if (!value) {
+    value = fallback;
+  }
+
+  return value;
+}
+
+export function isTransparent(color: Color) {
+  return (
+    typeof color === 'string' && color.toLowerCase().endsWith('transparent')
+  );
+}
--- a/blocksuite/affine/model/src/themes/default.ts
+++ b/blocksuite/affine/model/src/themes/default.ts
@@ -0,0 +1,104 @@
+import type { Palette, Theme } from './types.js';
+import { buildPalettes, getColorByKey, pureBlack, pureWhite } from './utils.js';
+
+const Transparent = 'transparent';
+const White = getColorByKey('edgeless/palette/white');
+const Black = getColorByKey('edgeless/palette/black');
+
+const Light = {
+  Red: getColorByKey('edgeless/palette/light/redLight'),
+  Orange: getColorByKey('edgeless/palette/light/orangeLight'),
+  Yellow: getColorByKey('edgeless/palette/light/yellowLight'),
+  Green: getColorByKey('edgeless/palette/light/greenLight'),
+  Blue: getColorByKey('edgeless/palette/light/blueLight'),
+  Purple: getColorByKey('edgeless/palette/light/purpleLight'),
+  Magenta: getColorByKey('edgeless/palette/light/magentaLight'),
+  Grey: getColorByKey('edgeless/palette/light/greyLight'),
+} as const;
+
+const Medium = {
+  Red: getColorByKey('edgeless/palette/medium/redMedium'),
+  Orange: getColorByKey('edgeless/palette/medium/orangeMedium'),
+  Yellow: getColorByKey('edgeless/palette/medium/yellowMedium'),
+  Green: getColorByKey('edgeless/palette/medium/greenMedium'),
+  Blue: getColorByKey('edgeless/palette/medium/blueMedium'),
+  Purple: getColorByKey('edgeless/palette/medium/purpleMedium'),
+  Magenta: getColorByKey('edgeless/palette/medium/magentaMedium'),
+  Grey: getColorByKey('edgeless/palette/medium/greyMedium'),
+} as const;
+
+const Heavy = {
+  Red: getColorByKey('edgeless/palette/heavy/red'),
+  Orange: getColorByKey('edgeless/palette/heavy/orange'),
+  Yellow: getColorByKey('edgeless/palette/heavy/yellow'),
+  Green: getColorByKey('edgeless/palette/heavy/green'),
+  Blue: getColorByKey('edgeless/palette/heavy/blue'),
+  Purple: getColorByKey('edgeless/palette/heavy/purple'),
+  Magenta: getColorByKey('edgeless/palette/heavy/magenta'),
+} as const;
+
+const NoteBackgroundColorMap = {
+  Yellow: getColorByKey('edgeless/note/yellow'),
+  Orange: getColorByKey('edgeless/note/orange'),
+  Red: getColorByKey('edgeless/note/red'),
+  Magenta: getColorByKey('edgeless/note/magenta'),
+  Purple: getColorByKey('edgeless/note/purple'),
+  Blue: getColorByKey('edgeless/note/blue'),
+  Teal: getColorByKey('edgeless/note/teal'),
+  Green: getColorByKey('edgeless/note/green'),
+  Black: getColorByKey('edgeless/note/black'),
+  Grey: getColorByKey('edgeless/note/grey'),
+  White: getColorByKey('edgeless/note/white'),
+} as const;
+
+const Palettes: Palette[] = [
+  // Light
+  ...buildPalettes(Light, 'Light'),
+
+  { key: 'Transparent', value: Transparent },
+
+  // Medium
+  ...buildPalettes(Medium, 'Medium'),
+
+  { key: 'White', value: White },
+
+  // Heavy
+  ...buildPalettes(Heavy, 'Heavy'),
+
+  { key: 'Black', value: Black },
+] as const;
+
+const NoteBackgroundColorPalettes: Palette[] = [
+  ...buildPalettes(NoteBackgroundColorMap),
+] as const;
+
+const StrokeColorMap = { ...Medium, Black, White } as const;
+
+const StrokeColorPalettes: Palette[] = [
+  ...buildPalettes(StrokeColorMap),
+] as const;
+
+const FillColorMap = { ...Light, Black, White } as const;
+
+const FillColorPalettes: Palette[] = [...buildPalettes(FillColorMap)] as const;
+
+export const DefaultTheme: Theme = {
+  pureBlack,
+  pureWhite,
+  black: Black,
+  white: White,
+  transparent: Transparent,
+  textColor: Medium.Blue,
+  shapeTextColor: Black,
+  shapeStrokeColor: Medium.Yellow,
+  shapeFillColor: Light.Yellow,
+  connectorColor: Medium.Grey,
+  noteBackgrounColor: NoteBackgroundColorMap.White,
+  Palettes,
+  StrokeColorMap,
+  StrokeColorPalettes,
+  FillColorMap,
+  FillColorPalettes,
+  NoteBackgroundColorMap,
+  NoteBackgroundColorPalettes,
+} as const;
--- a/blocksuite/affine/model/src/themes/index.ts
+++ b/blocksuite/affine/model/src/themes/index.ts
@@ -0,0 +1,10 @@
+import { DefaultTheme } from './default.js';
+import type { Theme } from './types.js';
+
+export * from './color.js';
+export { DefaultTheme } from './default.js';
+export * from './types.js';
+
+export const Themes: Record<string, Theme> = {
+  default: DefaultTheme,
+};
--- a/blocksuite/affine/model/src/themes/types.ts
+++ b/blocksuite/affine/model/src/themes/types.ts
@@ -0,0 +1,36 @@
+import { z } from 'zod';
+
+import { ColorSchema } from './color.js';
+
+export const PaletteSchema = z.object({
+  key: z.string(),
+  value: ColorSchema,
+});
+
+export type Palette = z.infer<typeof PaletteSchema>;
+
+export const ThemeSchema = z.object({
+  pureBlack: z.string(),
+  pureWhite: z.string(),
+  black: ColorSchema,
+  white: ColorSchema,
+  transparent: z.literal('transparent'),
+  textColor: ColorSchema,
+  shapeTextColor: ColorSchema,
+  shapeStrokeColor: ColorSchema,
+  shapeFillColor: ColorSchema,
+  connectorColor: ColorSchema,
+  noteBackgrounColor: ColorSchema,
+  // Universal color palette
+  Palettes: z.array(PaletteSchema),
+  StrokeColorMap: z.record(z.string(), ColorSchema),
+  // Usually used in global toolbar and editor preview
+  StrokeColorPalettes: z.array(PaletteSchema),
+  FillColorMap: z.record(z.string(), ColorSchema),
+  // Usually used in global toolbar and editor preview
+  FillColorPalettes: z.array(PaletteSchema),
+  NoteBackgroundColorMap: z.record(z.string(), ColorSchema),
+  NoteBackgroundColorPalettes: z.array(PaletteSchema),
+});
+
+export type Theme = z.infer<typeof ThemeSchema>;
--- a/blocksuite/affine/model/src/themes/utils.ts
+++ b/blocksuite/affine/model/src/themes/utils.ts
@@ -0,0 +1,29 @@
+import {
+  type AffineThemeKeyV2,
+  darkThemeV2,
+  lightThemeV2,
+} from '@toeverything/theme/v2';
+
+import type { Color } from './color.js';
+import type { Palette } from './types.js';
+
+// Converts a color map to color list.
+export function buildPalettes(
+  obj: Record<string, Color>,
+  prefix = ''
+): Palette[] {
+  return Object.entries<Color>(obj).map(([key, value]) => ({
+    key: `${prefix}${key}`,
+    value,
+  }));
+}
+
+export function getColorByKey(key: AffineThemeKeyV2): Color {
+  const dark = darkThemeV2[key];
+  const light = lightThemeV2[key];
+  if (dark === light) return dark;
+  return { dark, light };
+}
+
+export const pureBlack = lightThemeV2['edgeless/palette/black'];
+export const pureWhite = lightThemeV2['edgeless/palette/white'];
--- a/blocksuite/affine/shared/src/adapters/html/html.ts
+++ b/blocksuite/affine/shared/src/adapters/html/html.ts
@@ -1,7 +1,4 @@
-import {
-  DEFAULT_NOTE_BACKGROUND_COLOR,
-  NoteDisplayMode,
-} from '@blocksuite/affine-model';
+import { DefaultTheme, NoteDisplayMode } from '@blocksuite/affine-model';
 import type { ExtensionType } from '@blocksuite/block-std';
 import type { ServiceProvider } from '@blocksuite/global/di';
 import {
@@ -272,7 +269,7 @@ export class HtmlAdapter extends BaseAdapter<Html> {
      flavour: 'affine:note',
      props: {
        xywh: '[0,0,800,95]',
-        background: DEFAULT_NOTE_BACKGROUND_COLOR,
+        background: DefaultTheme.noteBackgrounColor,
        index: 'a0',
        hidden: false,
        displayMode: NoteDisplayMode.DocAndEdgeless,
@@ -297,7 +294,7 @@ export class HtmlAdapter extends BaseAdapter<Html> {
      flavour: 'affine:note',
      props: {
        xywh: '[0,0,800,95]',
-        background: DEFAULT_NOTE_BACKGROUND_COLOR,
+        background: DefaultTheme.noteBackgrounColor,
        index: 'a0',
        hidden: false,
        displayMode: NoteDisplayMode.DocAndEdgeless,
@@ -357,7 +354,7 @@ export class HtmlAdapter extends BaseAdapter<Html> {
      flavour: 'affine:note',
      props: {
        xywh: '[0,0,800,95]',
-        background: DEFAULT_NOTE_BACKGROUND_COLOR,
+        background: DefaultTheme.noteBackgrounColor,
        index: 'a0',
        hidden: false,
        displayMode: NoteDisplayMode.DocAndEdgeless,
--- a/blocksuite/affine/shared/src/adapters/notion-html/notion-html.ts
+++ b/blocksuite/affine/shared/src/adapters/notion-html/notion-html.ts
@@ -1,7 +1,4 @@
-import {
-  DEFAULT_NOTE_BACKGROUND_COLOR,
-  NoteDisplayMode,
-} from '@blocksuite/affine-model';
+import { DefaultTheme, NoteDisplayMode } from '@blocksuite/affine-model';
 import type { ExtensionType } from '@blocksuite/block-std';
 import type { ServiceProvider } from '@blocksuite/global/di';
 import { BlockSuiteError, ErrorCode } from '@blocksuite/global/exceptions';
@@ -176,7 +173,7 @@ export class NotionHtmlAdapter extends BaseAdapter<NotionHtml> {
      flavour: 'affine:note',
      props: {
        xywh: '[0,0,800,95]',
-        background: DEFAULT_NOTE_BACKGROUND_COLOR,
+        background: DefaultTheme.noteBackgrounColor,
        index: 'a0',
        hidden: false,
        displayMode: NoteDisplayMode.DocAndEdgeless,
@@ -207,7 +204,7 @@ export class NotionHtmlAdapter extends BaseAdapter<NotionHtml> {
      flavour: 'affine:note',
      props: {
        xywh: '[0,0,800,95]',
-        background: DEFAULT_NOTE_BACKGROUND_COLOR,
+        background: DefaultTheme.noteBackgrounColor,
        index: 'a0',
        hidden: false,
        displayMode: NoteDisplayMode.DocAndEdgeless,
@@ -268,7 +265,7 @@ export class NotionHtmlAdapter extends BaseAdapter<NotionHtml> {
      flavour: 'affine:note',
      props: {
        xywh: '[0,0,800,95]',
-        background: DEFAULT_NOTE_BACKGROUND_COLOR,
+        background: DefaultTheme.noteBackgrounColor,
        index: 'a0',
        hidden: false,
        displayMode: NoteDisplayMode.DocAndEdgeless,
--- a/blocksuite/affine/shared/src/adapters/notion-text.ts
+++ b/blocksuite/affine/shared/src/adapters/notion-text.ts
@@ -1,4 +1,4 @@
-import { DEFAULT_NOTE_BACKGROUND_COLOR } from '@blocksuite/affine-model';
+import { DefaultTheme } from '@blocksuite/affine-model';
 import type { ExtensionType } from '@blocksuite/block-std';
 import { BlockSuiteError, ErrorCode } from '@blocksuite/global/exceptions';
 import type { DeltaInsert } from '@blocksuite/inline';
@@ -127,7 +127,7 @@ export class NotionTextAdapter extends BaseAdapter<NotionText> {
      flavour: 'affine:note',
      props: {
        xywh: '[0,0,800,95]',
-        background: DEFAULT_NOTE_BACKGROUND_COLOR,
+        background: DefaultTheme.noteBackgrounColor,
        index: 'a0',
        hidden: false,
        displayMode: 'both',
--- a/blocksuite/affine/shared/src/adapters/plain-text/plain-text.ts
+++ b/blocksuite/affine/shared/src/adapters/plain-text/plain-text.ts
@@ -1,7 +1,4 @@
-import {
-  DEFAULT_NOTE_BACKGROUND_COLOR,
-  NoteDisplayMode,
-} from '@blocksuite/affine-model';
+import { DefaultTheme, NoteDisplayMode } from '@blocksuite/affine-model';
 import type { ExtensionType } from '@blocksuite/block-std';
 import type { ServiceProvider } from '@blocksuite/global/di';
 import {
@@ -175,7 +172,7 @@ export class PlainTextAdapter extends BaseAdapter<PlainText> {
      flavour: 'affine:note',
      props: {
        xywh: '[0,0,800,95]',
-        background: DEFAULT_NOTE_BACKGROUND_COLOR,
+        background: DefaultTheme.noteBackgrounColor,
        index: 'a0',
        hidden: false,
        displayMode: NoteDisplayMode.DocAndEdgeless,
@@ -242,7 +239,7 @@ export class PlainTextAdapter extends BaseAdapter<PlainText> {
            flavour: 'affine:note',
            props: {
              xywh: '[0,0,800,95]',
-              background: DEFAULT_NOTE_BACKGROUND_COLOR,
+              background: DefaultTheme.noteBackgrounColor,
              index: 'a0',
              hidden: false,
              displayMode: NoteDisplayMode.DocAndEdgeless,
@@ -285,7 +282,7 @@ export class PlainTextAdapter extends BaseAdapter<PlainText> {
      flavour: 'affine:note',
      props: {
        xywh: '[0,0,800,95]',
-        background: DEFAULT_NOTE_BACKGROUND_COLOR,
+        background: DefaultTheme.noteBackgrounColor,
        index: 'a0',
        hidden: false,
        displayMode: NoteDisplayMode.DocAndEdgeless,
--- a/blocksuite/affine/shared/src/services/edit-props-store.ts
+++ b/blocksuite/affine/shared/src/services/edit-props-store.ts
@@ -1,3 +1,4 @@
+import { ColorSchema } from '@blocksuite/affine-model';
 import { type BlockStdScope, LifeCycleWatcher } from '@blocksuite/block-std';
 import { BlockSuiteError, ErrorCode } from '@blocksuite/global/exceptions';
 import {
@@ -11,11 +12,7 @@ import clonedeep from 'lodash.clonedeep';
 import mergeWith from 'lodash.mergewith';
 import { z } from 'zod';

-import {
-  ColorSchema,
-  makeDeepOptional,
-  NodePropsSchema,
-} from '../utils/index.js';
+import { makeDeepOptional, NodePropsSchema } from '../utils/index.js';
 import { EditorSettingProvider } from './editor-setting-service.js';

 const LastPropsSchema = NodePropsSchema;
--- a/blocksuite/affine/shared/src/services/theme-service.ts
+++ b/blocksuite/affine/shared/src/services/theme-service.ts
@@ -1,4 +1,9 @@
-import { type Color, ColorScheme } from '@blocksuite/affine-model';
+import {
+  type Color,
+  ColorScheme,
+  DefaultTheme,
+  resolveColor,
+} from '@blocksuite/affine-model';
 import {
  type BlockStdScope,
  Extension,
@@ -15,8 +20,6 @@ import {

 import { isInsideEdgelessEditor } from '../utils/index.js';

-const TRANSPARENT = 'transparent';
-
 export const ThemeExtensionIdentifier = createIdentifier<ThemeExtension>(
  'AffineThemeExtension'
 );
@@ -52,9 +55,7 @@ export class ThemeService extends Extension {
  }

  get theme() {
-    return isInsideEdgelessEditor(this.std.host)
-      ? this.edgelessTheme
-      : this.appTheme;
+    return this.theme$.peek();
  }

  get theme$() {
@@ -94,24 +95,19 @@ export class ThemeService extends Extension {
   */
  generateColorProperty(
    color: Color,
-    fallback = 'transparent',
+    fallback: Color = DefaultTheme.transparent,
    theme = this.theme
  ) {
-    let result: string | undefined = undefined;
+    const result = resolveColor(color, theme, resolveColor(fallback, theme));

-    if (typeof color === 'object') {
-      result = color[theme] ?? color.normal;
-    } else {
-      result = color;
-    }
-    if (!result) {
-      result = fallback;
-    }
+    // Compatible old data
    if (result.startsWith('--')) {
-      return result.endsWith(TRANSPARENT) ? TRANSPARENT : `var(${result})`;
+      return result.endsWith('transparent')
+        ? DefaultTheme.transparent
+        : `var(${result})`;
    }

-    return result ?? TRANSPARENT;
+    return result;
  }

  /**
@@ -132,35 +128,30 @@ export class ThemeService extends Extension {
   */
  getColorValue(
    color: Color,
-    fallback = TRANSPARENT,
+    fallback: Color = DefaultTheme.transparent,
    real = false,
    theme = this.theme
  ) {
-    let result: string | undefined = undefined;
+    let result = resolveColor(color, theme, resolveColor(fallback, theme));

-    if (typeof color === 'object') {
-      result = color[theme] ?? color.normal;
-    } else {
-      result = color;
-    }
-    if (!result) {
-      result = fallback;
-    }
+    // Compatible old data
    if (real && result.startsWith('--')) {
-      result = result.endsWith(TRANSPARENT)
-        ? TRANSPARENT
+      result = result.endsWith('transparent')
+        ? DefaultTheme.transparent
        : this.getCssVariableColor(result, theme);
    }

-    return result ?? TRANSPARENT;
+    return result ?? DefaultTheme.transparent;
  }

  getCssVariableColor(property: string, theme = this.theme) {
+    // Compatible old data
    if (property.startsWith('--')) {
-      if (property.endsWith(TRANSPARENT)) {
-        return TRANSPARENT;
+      if (property.endsWith('transparent')) {
+        return DefaultTheme.transparent;
      }
      const key = property as keyof AffineCssVariables;
+      // V1 theme
      const color =
        theme === ColorScheme.Dark
          ? combinedDarkCssVariables[key]
--- a/blocksuite/affine/shared/src/utils/zod-schema.ts
+++ b/blocksuite/affine/shared/src/utils/zod-schema.ts
@@ -1,33 +1,24 @@
 import {
+  ColorSchema,
  ConnectorMode,
-  DEFAULT_CONNECTOR_COLOR,
-  DEFAULT_CONNECTOR_TEXT_COLOR,
  DEFAULT_FRONT_END_POINT_STYLE,
-  DEFAULT_NOTE_BACKGROUND_COLOR,
  DEFAULT_NOTE_BORDER_SIZE,
  DEFAULT_NOTE_BORDER_STYLE,
  DEFAULT_NOTE_CORNER,
  DEFAULT_NOTE_SHADOW,
  DEFAULT_REAR_END_POINT_STYLE,
  DEFAULT_ROUGHNESS,
-  DEFAULT_SHAPE_FILL_COLOR,
-  DEFAULT_SHAPE_STROKE_COLOR,
-  DEFAULT_SHAPE_TEXT_COLOR,
-  DEFAULT_TEXT_COLOR,
+  DefaultTheme,
  FontFamily,
  FontStyle,
  FontWeight,
  LayoutType,
-  LineColorsSchema,
  LineWidth,
  MindmapStyle,
-  NoteBackgroundPaletteEnum,
  NoteDisplayMode,
  NoteShadowsSchema,
-  PaletteEnum,
  PointStyle,
  ShapeStyle,
-  StrokeColor,
  StrokeStyle,
  TextAlign,
  TextVerticalAlign,
@@ -48,34 +39,17 @@ const ConnectorModeSchema = z.nativeEnum(ConnectorMode);
 const LayoutTypeSchema = z.nativeEnum(LayoutType);
 const MindmapStyleSchema = z.nativeEnum(MindmapStyle);

-export const ColorSchema = z.union([
-  z.object({
-    normal: z.string(),
-  }),
-  z.object({
-    light: z.string(),
-    dark: z.string(),
-  }),
-]);
-const ColorPaletteSchema = z.union([ColorSchema, PaletteEnum]);
-const LineColorSchema = z.union([LineColorsSchema, ColorPaletteSchema]);
-const TextColorSchema = z.union([LineColorsSchema, ColorPaletteSchema]);
-const NoteBackgroundColorSchema = z.union([
-  ColorSchema,
-  NoteBackgroundPaletteEnum,
-]);
-
 export const ConnectorSchema = z
  .object({
    frontEndpointStyle: ConnectorEndpointSchema,
    rearEndpointStyle: ConnectorEndpointSchema,
-    stroke: LineColorSchema,
+    stroke: ColorSchema,
    strokeStyle: StrokeStyleSchema,
    strokeWidth: LineWidthSchema,
    rough: z.boolean(),
    mode: ConnectorModeSchema,
    labelStyle: z.object({
-      color: TextColorSchema,
+      color: ColorSchema,
      fontSize: z.number(),
      fontFamily: FontFamilySchema,
      fontWeight: FontWeightSchema,
@@ -86,13 +60,13 @@ export const ConnectorSchema = z
  .default({
    frontEndpointStyle: DEFAULT_FRONT_END_POINT_STYLE,
    rearEndpointStyle: DEFAULT_REAR_END_POINT_STYLE,
-    stroke: DEFAULT_CONNECTOR_COLOR,
+    stroke: DefaultTheme.connectorColor,
    strokeStyle: StrokeStyle.Solid,
    strokeWidth: LineWidth.Two,
    rough: false,
    mode: ConnectorMode.Curve,
    labelStyle: {
-      color: DEFAULT_CONNECTOR_TEXT_COLOR,
+      color: DefaultTheme.black,
      fontSize: 16,
      fontFamily: FontFamily.Inter,
      fontWeight: FontWeight.Regular,
@@ -103,21 +77,18 @@ export const ConnectorSchema = z

 export const BrushSchema = z
  .object({
-    color: ColorPaletteSchema,
+    color: ColorSchema,
    lineWidth: LineWidthSchema,
  })
  .default({
-    color: {
-      dark: StrokeColor.White,
-      light: StrokeColor.Black,
-    },
+    color: DefaultTheme.black,
    lineWidth: LineWidth.Four,
  });

 const DEFAULT_SHAPE = {
-  color: DEFAULT_SHAPE_TEXT_COLOR,
-  fillColor: DEFAULT_SHAPE_FILL_COLOR,
-  strokeColor: DEFAULT_SHAPE_STROKE_COLOR,
+  color: DefaultTheme.shapeTextColor,
+  fillColor: DefaultTheme.shapeFillColor,
+  strokeColor: DefaultTheme.shapeStrokeColor,
  strokeStyle: StrokeStyle.Solid,
  strokeWidth: LineWidth.Two,
  shapeStyle: ShapeStyle.General,
@@ -132,9 +103,9 @@ const DEFAULT_SHAPE = {
 };

 const ShapeObject = {
-  color: TextColorSchema,
-  fillColor: ColorPaletteSchema,
-  strokeColor: ColorPaletteSchema,
+  color: ColorSchema,
+  fillColor: ColorSchema,
+  strokeColor: ColorSchema,
  strokeStyle: StrokeStyleSchema,
  strokeWidth: z.number(),
  shapeStyle: ShapeStyleSchema,
@@ -158,7 +129,7 @@ export const RoundedShapeSchema = z

 export const TextSchema = z
  .object({
-    color: TextColorSchema,
+    color: ColorSchema,
    fontSize: z.number(),
    fontFamily: FontFamilySchema,
    fontWeight: FontWeightSchema,
@@ -166,7 +137,7 @@ export const TextSchema = z
    textAlign: TextAlignSchema,
  })
  .default({
-    color: DEFAULT_TEXT_COLOR,
+    color: DefaultTheme.textColor,
    fontSize: 24,
    fontFamily: FontFamily.Inter,
    fontWeight: FontWeight.Regular,
@@ -176,14 +147,14 @@ export const TextSchema = z

 export const EdgelessTextSchema = z
  .object({
-    color: TextColorSchema,
+    color: ColorSchema,
    fontFamily: FontFamilySchema,
    fontWeight: FontWeightSchema,
    fontStyle: FontStyleSchema,
    textAlign: TextAlignSchema,
  })
  .default({
-    color: DEFAULT_TEXT_COLOR,
+    color: DefaultTheme.textColor,
    fontFamily: FontFamily.Inter,
    fontWeight: FontWeight.Regular,
    fontStyle: FontStyle.Normal,
@@ -192,7 +163,7 @@ export const EdgelessTextSchema = z

 export const NoteSchema = z
  .object({
-    background: NoteBackgroundColorSchema,
+    background: ColorSchema,
    displayMode: NoteDisplayModeSchema,
    edgeless: z.object({
      style: z.object({
@@ -204,7 +175,7 @@ export const NoteSchema = z
    }),
  })
  .default({
-    background: DEFAULT_NOTE_BACKGROUND_COLOR,
+    background: DefaultTheme.noteBackgrounColor,
    displayMode: NoteDisplayMode.EdgelessOnly,
    edgeless: {
      style: {
@@ -228,7 +199,7 @@ export const MindmapSchema = z

 export const FrameSchema = z
  .object({
-    background: ColorPaletteSchema.optional(),
+    background: ColorSchema.optional(),
  })
  .default({});