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

### What's Changed!

* adds theme type: `ThemeSchema`
* adds default theme: `DefaultTheme`
* stores real color values

blocksuite/tests-legacy/attachment.spec.ts

@@ -144,7 +144,12 @@ test('can insert attachment from slash menu', async ({ page }) => {
     page,
     `
 <affine:note
-  prop:background="--affine-v2-edgeless-note-white"
+  prop:background={
+    Object {
+      "dark": "#000000",
+      "light": "#ffffff",
+    }
+  }
   prop:displayMode="both"
   prop:edgeless={
     Object {
@@ -191,7 +196,12 @@ test('should undo/redo works for attachment', async ({ page }) => {
   await assertStoreMatchJSX(
     page,
     `  <affine:note
-  prop:background="--affine-v2-edgeless-note-white"
+  prop:background={
+    Object {
+      "dark": "#000000",
+      "light": "#ffffff",
+    }
+  }
   prop:displayMode="both"
   prop:edgeless={
     Object {
@@ -229,7 +239,12 @@ test('should undo/redo works for attachment', async ({ page }) => {
     page,
     `
 <affine:note
-  prop:background="--affine-v2-edgeless-note-white"
+  prop:background={
+    Object {
+      "dark": "#000000",
+      "light": "#ffffff",
+    }
+  }
   prop:displayMode="both"
   prop:edgeless={
     Object {
@@ -260,7 +275,12 @@ test('should undo/redo works for attachment', async ({ page }) => {
     page,
     `
 <affine:note
-  prop:background="--affine-v2-edgeless-note-white"
+  prop:background={
+    Object {
+      "dark": "#000000",
+      "light": "#ffffff",
+    }
+  }
   prop:displayMode="both"
   prop:edgeless={
     Object {
@@ -348,7 +368,12 @@ test('should turn attachment to image works', async ({ page }) => {
     page,
     `
 <affine:note
-  prop:background="--affine-v2-edgeless-note-white"
+  prop:background={
+    Object {
+      "dark": "#000000",
+      "light": "#ffffff",
+    }
+  }
   prop:displayMode="both"
   prop:edgeless={
     Object {
@@ -382,7 +407,12 @@ test('should turn attachment to image works', async ({ page }) => {
     page,
     `
 <affine:note
-  prop:background="--affine-v2-edgeless-note-white"
+  prop:background={
+    Object {
+      "dark": "#000000",
+      "light": "#ffffff",
+    }
+  }
   prop:displayMode="both"
   prop:edgeless={
     Object {
@@ -431,7 +461,12 @@ test('should attachment can be deleted', async ({ page }) => {
     page,
     `
 <affine:note
-  prop:background="--affine-v2-edgeless-note-white"
+  prop:background={
+    Object {
+      "dark": "#000000",
+      "light": "#ffffff",
+    }
+  }
   prop:displayMode="both"
   prop:edgeless={
     Object {
@@ -475,7 +510,12 @@ test.fixme(`support dragging attachment block directly`, async ({ page }) => {
   await assertStoreMatchJSX(
     page,
     `  <affine:note
-  prop:background="--affine-v2-edgeless-note-white"
+  prop:background={
+    Object {
+      "dark": "#000000",
+      "light": "#ffffff",
+    }
+  }
   prop:displayMode="both"
   prop:edgeless={
     Object {
@@ -531,7 +571,12 @@ test.fixme(`support dragging attachment block directly`, async ({ page }) => {
     page,
     /*xml*/ `<affine:page>
   <affine:note
-    prop:background="--affine-v2-edgeless-note-white"
+    prop:background={
+      Object {
+        "dark": "#000000",
+        "light": "#ffffff",
+      }
+    }
     prop:displayMode="both"
     prop:edgeless={
       Object {
@@ -589,7 +634,12 @@ test.fixme(`support dragging attachment block directly`, async ({ page }) => {
     page,
     /*xml*/ `<affine:page>
   <affine:note
-    prop:background="--affine-v2-edgeless-note-white"
+    prop:background={
+      Object {
+        "dark": "#000000",
+        "light": "#ffffff",
+      }
+    }
     prop:displayMode="both"
     prop:edgeless={
       Object {

blocksuite/tests-legacy/clipboard/list.spec.ts

@@ -1,4 +1,5 @@
 import { expect } from '@playwright/test';
+import { lightThemeV2 } from '@toeverything/theme/v2';
 
 import { initDatabaseColumn } from '../database/actions.js';
 import {
@@ -441,7 +442,12 @@ test(scoped`should copy and paste of database work`, async ({ page }) => {
     /*xml*/ `
 <affine:page>
   <affine:note
-    prop:background="--affine-v2-edgeless-note-white"
+    prop:background={
+      Object {
+        "dark": "#000000",
+        "light": "#ffffff",
+      }
+    }
     prop:displayMode="both"
     prop:edgeless={
       Object {
@@ -491,7 +497,12 @@ test(scoped`should copy and paste of database work`, async ({ page }) => {
     /*xml*/ `
 <affine:page>
   <affine:note
-    prop:background="--affine-v2-edgeless-note-white"
+    prop:background={
+      Object {
+        "dark": "#000000",
+        "light": "#ffffff",
+      }
+    }
     prop:displayMode="both"
     prop:edgeless={
       Object {
@@ -574,9 +585,12 @@ test(scoped`paste note block with background`, async ({ page }) => {
   await selectNoteInEdgeless(page, ids.noteId);
 
   await triggerComponentToolbarAction(page, 'changeNoteColor');
-  const color = '--affine-v2-edgeless-note-grey';
-  await changeEdgelessNoteBackground(page, color);
-  await assertEdgelessNoteBackground(page, ids.noteId, color);
+  await changeEdgelessNoteBackground(page, 'White');
+  await assertEdgelessNoteBackground(
+    page,
+    ids.noteId,
+    lightThemeV2['edgeless/note/white']
+  );
 
   await copyByKeyboard(page);
 
@@ -584,7 +598,11 @@ test(scoped`paste note block with background`, async ({ page }) => {
   await pasteByKeyboard(page, false);
   const noteIds = await getAllNoteIds(page);
   for (const noteId of noteIds) {
-    await assertEdgelessNoteBackground(page, noteId, color);
+    await assertEdgelessNoteBackground(
+      page,
+      noteId,
+      lightThemeV2['edgeless/note/white']
+    );
   }
 });
 

blocksuite/tests-legacy/edgeless/auto-complete.spec.ts

@@ -1,9 +1,5 @@
-import {
-  DEFAULT_NOTE_BACKGROUND_COLOR,
-  ShapeFillColor,
-  StrokeColor,
-} from '@blocksuite/affine-model';
 import { expect, type Page } from '@playwright/test';
+import { lightThemeV2 } from '@toeverything/theme/v2';
 
 import { clickView, moveView } from '../utils/actions/click.js';
 import { dragBetweenCoords } from '../utils/actions/drag.js';
@@ -139,11 +135,9 @@ test.describe('auto-complete', () => {
       await createShapeElement(page, [0, 0], [100, 100], Shape.Square);
       await assertSelectedBound(page, [0, 0, 100, 100]);
       await triggerComponentToolbarAction(page, 'changeShapeStrokeColor');
-      const lineColor = StrokeColor.Red;
-      await changeShapeStrokeColor(page, lineColor);
+      await changeShapeStrokeColor(page, 'MediumRed');
       await triggerComponentToolbarAction(page, 'changeShapeFillColor');
-      const color = ShapeFillColor.Green;
-      await changeShapeFillColor(page, color);
+      await changeShapeFillColor(page, 'HeavyGreen');
       await dragBetweenViewCoords(page, [120, 50], [200, 0]);
 
       const noteButton = getAutoCompletePanelButton(page, 'note');
@@ -168,7 +162,7 @@ test.describe('auto-complete', () => {
       await assertEdgelessNoteBackground(
         page,
         noteId,
-        DEFAULT_NOTE_BACKGROUND_COLOR
+        lightThemeV2['edgeless/note/white']
       );
 
       const rect = await edgelessNote.boundingBox();
@@ -181,15 +175,18 @@ test.describe('auto-complete', () => {
       // select connector
       await dragBetweenViewCoords(page, [140, 50], [160, 0]);
       await waitNextFrame(page);
-      await assertConnectorStrokeColor(page, lineColor);
+      await assertConnectorStrokeColor(
+        page,
+        'MediumRed',
+        lightThemeV2['edgeless/palette/medium/redMedium']
+      );
 
       // select note block
       await page.mouse.click(rect.x + rect.width / 2, rect.y + rect.height / 2);
       await waitNextFrame(page);
 
       await triggerComponentToolbarAction(page, 'changeNoteColor');
-      const noteColor = '--affine-v2-edgeless-note-red';
-      await changeEdgelessNoteBackground(page, noteColor);
+      await changeEdgelessNoteBackground(page, 'Red');
 
       // move to arrow icon
       await page.mouse.move(
@@ -223,7 +220,11 @@ test.describe('auto-complete', () => {
         return note?.getAttribute('data-block-id');
       });
       assertExists(noteId2);
-      await assertEdgelessNoteBackground(page, noteId, noteColor);
+      await assertEdgelessNoteBackground(
+        page,
+        noteId,
+        lightThemeV2['edgeless/note/red']
+      );
 
       expect(await edgelessNote.count()).toBe(2);
     });

blocksuite/tests-legacy/edgeless/brush.spec.ts

@@ -1,5 +1,5 @@
-import { StrokeColor } from '@blocksuite/affine-model';
 import { expect } from '@playwright/test';
+import { lightThemeV2 } from '@toeverything/theme/v2';
 
 import {
   assertEdgelessTool,
@@ -80,15 +80,14 @@ test('add brush element with color', async ({ page }) => {
   await switchEditorMode(page);
 
   await setEdgelessTool(page, 'brush');
-  const color = StrokeColor.Blue;
-  await selectBrushColor(page, color);
+  await selectBrushColor(page, 'Blue');
 
   const start = { x: 100, y: 100 };
   const end = { x: 200, y: 200 };
   await dragBetweenCoords(page, start, end, { steps: 100 });
 
   const [pickedColor] = await pickColorAtPoints(page, [[110, 110]]);
-
+  const color = lightThemeV2['edgeless/palette/medium/blueMedium'];
   await assertEdgelessColorSameWithHexColor(page, color, pickedColor);
 });
 
@@ -101,8 +100,8 @@ test('keep same color when mouse mode switched back to brush', async ({
   await deleteAll(page);
 
   await setEdgelessTool(page, 'brush');
-  const color = StrokeColor.Blue;
-  await selectBrushColor(page, color);
+  await selectBrushColor(page, 'Blue');
+
   const start = { x: 200, y: 200 };
   const end = { x: 300, y: 300 };
   await dragBetweenCoords(page, start, end, { steps: 100 });
@@ -113,7 +112,9 @@ test('keep same color when mouse mode switched back to brush', async ({
   await setEdgelessTool(page, 'brush');
   const origin = { x: 100, y: 100 };
   await dragBetweenCoords(page, origin, start, { steps: 100 });
+
   const [pickedColor] = await pickColorAtPoints(page, [[110, 110]]);
+  const color = lightThemeV2['edgeless/palette/medium/blueMedium'];
   await assertEdgelessColorSameWithHexColor(page, color, pickedColor);
 });
 
@@ -124,8 +125,7 @@ test('add brush element with different size', async ({ page }) => {
 
   await setEdgelessTool(page, 'brush');
   await selectBrushSize(page, 'ten');
-  const color = StrokeColor.Blue;
-  await selectBrushColor(page, color);
+  await selectBrushColor(page, 'Blue');
 
   const start = { x: 100, y: 100 };
   const end = { x: 200, y: 100 };
@@ -143,6 +143,7 @@ test('add brush element with different size', async ({ page }) => {
       [110, 105],
     ]);
 
+  const color = lightThemeV2['edgeless/palette/medium/blueMedium'];
   await assertEdgelessColorSameWithHexColor(page, color, topEdge);
   await assertEdgelessColorSameWithHexColor(page, color, bottomEdge);
   assertSameColor(nearTopEdge, '#84cfff');

blocksuite/tests-legacy/edgeless/connector/connector.spec.ts

@@ -1,4 +1,3 @@
-import { StrokeColor } from '@blocksuite/affine-model';
 import { expect } from '@playwright/test';
 
 import {
@@ -149,7 +148,7 @@ test('change connector line width', async ({ page }) => {
 
   await page.mouse.click(start.x + 5, start.y);
   await triggerComponentToolbarAction(page, 'changeConnectorStrokeColor');
-  await changeConnectorStrokeColor(page, StrokeColor.Grey);
+  await changeConnectorStrokeColor(page, 'MediumGrey');
 
   await triggerComponentToolbarAction(page, 'changeConnectorStrokeStyles');
   await changeConnectorStrokeWidth(page, 5);
@@ -174,7 +173,7 @@ test('change connector stroke style', async ({ page }) => {
 
   await page.mouse.click(start.x + 5, start.y);
   await triggerComponentToolbarAction(page, 'changeConnectorStrokeColor');
-  await changeConnectorStrokeColor(page, StrokeColor.Grey);
+  await changeConnectorStrokeColor(page, 'MediumGrey');
 
   await triggerComponentToolbarAction(page, 'changeConnectorStrokeStyles');
   await changeConnectorStrokeStyle(page, 'dash');

blocksuite/tests-legacy/edgeless/lock.spec.ts

@@ -59,7 +59,6 @@ test.describe('lock', () => {
   test('edgeless element can be locked and unlocked', async ({ page }) => {
     await edgelessCommonSetup(page);
 
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const wrapTest = async <F extends (...args: any) => any>(
       elementCreateFn: F,
       ...args: Parameters<F>

blocksuite/tests-legacy/edgeless/note/note.spec.ts

@@ -4,6 +4,7 @@ import {
   NoteDisplayMode,
 } from '@blocksuite/affine-model';
 import { expect } from '@playwright/test';
+import { lightThemeV2 } from '@toeverything/theme/v2';
 
 import {
   activeNoteInEdgeless,
@@ -304,14 +305,17 @@ test('change note color', async ({ page }) => {
   await assertEdgelessNoteBackground(
     page,
     noteId,
-    '--affine-v2-edgeless-note-white'
+    lightThemeV2['edgeless/note/white']
   );
 
   await selectNoteInEdgeless(page, noteId);
   await triggerComponentToolbarAction(page, 'changeNoteColor');
-  const color = '--affine-v2-edgeless-note-green';
-  await changeEdgelessNoteBackground(page, color);
-  await assertEdgelessNoteBackground(page, noteId, color);
+  await changeEdgelessNoteBackground(page, 'Green');
+  await assertEdgelessNoteBackground(
+    page,
+    noteId,
+    lightThemeV2['edgeless/note/green']
+  );
 });
 
 test('cursor for active and inactive state', async ({ page }) => {

blocksuite/tests-legacy/edgeless/shape.spec.ts

@@ -1,5 +1,5 @@
-import { ShapeFillColor, StrokeColor } from '@blocksuite/affine-model';
 import { expect, type Page } from '@playwright/test';
+import { lightThemeV2 } from '@toeverything/theme/v2';
 
 import {
   assertEdgelessTool,
@@ -168,14 +168,17 @@ test.skip('change shape fill color', async ({ page }) => {
 
   await page.mouse.click(rect.start.x + 5, rect.start.y + 5);
   await triggerComponentToolbarAction(page, 'changeShapeFillColor');
-  const color = ShapeFillColor.Grey;
-  await changeShapeFillColor(page, color);
+  await changeShapeFillColor(page, 'MediumGrey');
   await page.waitForTimeout(50);
   const [picked] = await pickColorAtPoints(page, [
     [rect.start.x + 20, rect.start.y + 20],
   ]);
 
-  await assertEdgelessColorSameWithHexColor(page, color, picked);
+  await assertEdgelessColorSameWithHexColor(
+    page,
+    lightThemeV2['edgeless/palette/medium/greyMedium'],
+    picked
+  );
 });
 
 test('change shape stroke color', async ({ page }) => {
@@ -191,14 +194,17 @@ test('change shape stroke color', async ({ page }) => {
 
   await page.mouse.click(rect.start.x + 5, rect.start.y + 5);
   await triggerComponentToolbarAction(page, 'changeShapeStrokeColor');
-  const color = StrokeColor.Grey;
-  await changeShapeStrokeColor(page, color);
+  await changeShapeStrokeColor(page, 'HeavyYellow');
   await page.waitForTimeout(50);
   const [picked] = await pickColorAtPoints(page, [
     [rect.start.x + 1, rect.start.y + 1],
   ]);
 
-  await assertEdgelessColorSameWithHexColor(page, color, picked);
+  await assertEdgelessColorSameWithHexColor(
+    page,
+    lightThemeV2['edgeless/palette/heavy/yellow'],
+    picked
+  );
 });
 
 test('the tooltip of shape tool button should be hidden when the shape menu is shown', async ({
@@ -339,7 +345,7 @@ test('change shape stroke width', async ({ page }) => {
 
   await page.mouse.click(start.x + 5, start.y + 5);
   await triggerComponentToolbarAction(page, 'changeShapeStrokeColor');
-  await changeShapeStrokeColor(page, StrokeColor.Magenta);
+  await changeShapeStrokeColor(page, 'MediumMagenta');
 
   await triggerComponentToolbarAction(page, 'changeShapeStrokeStyles');
   await changeShapeStrokeWidth(page);
@@ -362,7 +368,7 @@ test('change shape stroke style', async ({ page }) => {
 
   await page.mouse.click(start.x + 5, start.y + 5);
   await triggerComponentToolbarAction(page, 'changeShapeStrokeColor');
-  await changeShapeStrokeColor(page, StrokeColor.Blue);
+  await changeShapeStrokeColor(page, 'MediumBlue');
 
   await triggerComponentToolbarAction(page, 'changeShapeStrokeStyles');
   await changeShapeStrokeStyle(page, 'dash');
@@ -549,12 +555,16 @@ test('change shape style', async ({ page }) => {
 
   await page.mouse.click(start.x + 5, start.y + 5);
   await triggerComponentToolbarAction(page, 'changeShapeStrokeColor');
-  const color = StrokeColor.Purple;
+  const color = 'LightPurple';
   await changeShapeStrokeColor(page, color);
   await page.waitForTimeout(50);
   const [picked] = await pickColorAtPoints(page, [[start.x + 1, start.y + 1]]);
 
-  await assertEdgelessColorSameWithHexColor(page, color, picked);
+  await assertEdgelessColorSameWithHexColor(
+    page,
+    lightThemeV2['edgeless/palette/light/purpleLight'],
+    picked
+  );
 });
 
 test('shape adds text by button', async ({ page }) => {

blocksuite/tests-legacy/inline/inline-editor.spec.ts

@@ -251,7 +251,7 @@ test('readonly mode', async ({ page }) => {
       throw new Error('Cannot find editor');
     }
 
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    // oxlint-disable-next-line @typescript-eslint/no-explicit-any
     (richTextA as any).inlineEditor.setReadonly(true);
   });
 
@@ -834,13 +834,13 @@ test('yText should not contain \r', async ({ page }) => {
       throw new Error('Cannot find test-rich-text');
     }
 
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    // oxlint-disable-next-line @typescript-eslint/no-explicit-any
     const editor = (richText as any).inlineEditor as InlineEditor;
 
     try {
       editor.insertText({ index: 0, length: 0 }, 'abc\r');
     } catch (e) {
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      // oxlint-disable-next-line @typescript-eslint/no-explicit-any
       return (e as any).message;
     }
   });

blocksuite/tests-legacy/link.spec.ts

@@ -476,7 +476,7 @@ test.skip('convert link to embed', async ({ page }) => {
     `
 <affine:page>
   <affine:note
-    prop:background="--affine-v2-edgeless-note-white"
+    prop:background="--affine-note-background-blue"
     prop:displayMode="both"
     prop:edgeless={
       Object {
@@ -493,7 +493,7 @@ test.skip('convert link to embed', async ({ page }) => {
     prop:lockedBySelf={false}
   >
     <affine:paragraph
-      prop:collapsed={false}
+      prop:collapsed={false} 
       prop:text="aaa"
       prop:type="text"
     />

blocksuite/tests-legacy/package.json

@@ -11,7 +11,8 @@
     "@blocksuite/block-std": "workspace:*",
     "@blocksuite/global": "workspace:*",
     "@blocksuite/presets": "workspace:*",
-    "@playwright/test": "=1.49.1"
+    "@playwright/test": "=1.49.1",
+    "@toeverything/theme": "^1.1.3"
   },
   "repository": {
     "type": "git",

blocksuite/tests-legacy/slash-menu.spec.ts

@@ -885,7 +885,7 @@ test.describe('slash menu with customize menu', () => {
             { groupName: 'Custom Menu' },
             {
               name: 'Custom Menu Item',
-              // eslint-disable-next-line @typescript-eslint/no-explicit-any
+              // oxlint-disable-next-line @typescript-eslint/no-explicit-any
               icon: '' as any,
               action: () => {
                 // do nothing
@@ -893,7 +893,7 @@ test.describe('slash menu with customize menu', () => {
             },
             {
               name: 'Custom Menu Item',
-              // eslint-disable-next-line @typescript-eslint/no-explicit-any
+              // oxlint-disable-next-line @typescript-eslint/no-explicit-any
               icon: '' as any,
               action: () => {
                 // do nothing

blocksuite/tests-legacy/snapshots/basic.spec.ts/automatic-identify-url-text-final.json

@@ -17,7 +17,10 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-v2-edgeless-note-white",
+        "background": {
+          "dark": "#000000",
+          "light": "#ffffff"
+        },
         "index": "a0",
         "lockedBySelf": false,
         "hidden": false,

blocksuite/tests-legacy/snapshots/basic.spec.ts/basic-test-default.json

@@ -17,7 +17,10 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-v2-edgeless-note-white",
+        "background": {
+          "dark": "#000000",
+          "light": "#ffffff"
+        },
         "index": "a0",
         "lockedBySelf": false,
         "hidden": false,

blocksuite/tests-legacy/snapshots/bookmark.spec.ts/copy-bookmark-url-by-copy-button-final.json

@@ -17,7 +17,10 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-v2-edgeless-note-white",
+        "background": {
+          "dark": "#000000",
+          "light": "#ffffff"
+        },
         "index": "a0",
         "lockedBySelf": false,
         "hidden": false,

blocksuite/tests-legacy/snapshots/bookmark.spec.ts/copy-url-to-create-bookmark-in-edgeless-mode-final.json

@@ -27,7 +27,10 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,234]",
-        "background": "--affine-v2-edgeless-note-white",
+        "background": {
+          "dark": "#000000",
+          "light": "#ffffff"
+        },
         "index": "a0",
         "lockedBySelf": false,
         "hidden": false,

blocksuite/tests-legacy/snapshots/bookmark.spec.ts/copy-url-to-create-bookmark-in-page-mode-final.json

@@ -17,7 +17,10 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-v2-edgeless-note-white",
+        "background": {
+          "dark": "#000000",
+          "light": "#ffffff"
+        },
         "index": "a0",
         "lockedBySelf": false,
         "hidden": false,

blocksuite/tests-legacy/snapshots/bookmark.spec.ts/covert-bookmark-block-to-link-text-final.json

@@ -17,7 +17,10 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-v2-edgeless-note-white",
+        "background": {
+          "dark": "#000000",
+          "light": "#ffffff"
+        },
         "index": "a0",
         "lockedBySelf": false,
         "hidden": false,

blocksuite/tests-legacy/snapshots/bookmark.spec.ts/create-bookmark-by-slash-menu-final.json

@@ -17,7 +17,10 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-v2-edgeless-note-white",
+        "background": {
+          "dark": "#000000",
+          "light": "#ffffff"
+        },
         "index": "a0",
         "lockedBySelf": false,
         "hidden": false,

blocksuite/tests-legacy/snapshots/bookmark.spec.ts/embed-figma.json

@@ -17,7 +17,10 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-v2-edgeless-note-white",
+        "background": {
+          "dark": "#000000",
+          "light": "#ffffff"
+        },
         "index": "a0",
         "lockedBySelf": false,
         "hidden": false,

blocksuite/tests-legacy/snapshots/bookmark.spec.ts/embed-youtube.json

@@ -17,7 +17,10 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-v2-edgeless-note-white",
+        "background": {
+          "dark": "#000000",
+          "light": "#ffffff"
+        },
         "index": "a0",
         "lockedBySelf": false,
         "hidden": false,

blocksuite/tests-legacy/snapshots/bookmark.spec.ts/horizontal-figma.json

@@ -17,7 +17,10 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-v2-edgeless-note-white",
+        "background": {
+          "dark": "#000000",
+          "light": "#ffffff"
+        },
         "index": "a0",
         "lockedBySelf": false,
         "hidden": false,

blocksuite/tests-legacy/snapshots/bookmark.spec.ts/horizontal-youtube.json

@@ -17,7 +17,10 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-v2-edgeless-note-white",
+        "background": {
+          "dark": "#000000",
+          "light": "#ffffff"
+        },
         "index": "a0",
         "lockedBySelf": false,
         "hidden": false,

blocksuite/tests-legacy/snapshots/bookmark.spec.ts/support-dragging-bookmark-block-directly-after-add-paragraph.json

@@ -17,7 +17,10 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-v2-edgeless-note-white",
+        "background": {
+          "dark": "#000000",
+          "light": "#ffffff"
+        },
         "index": "a0",
         "hidden": false,
         "displayMode": "both",

blocksuite/tests-legacy/snapshots/bookmark.spec.ts/support-dragging-bookmark-block-directly-after-drag.json

@@ -17,7 +17,10 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-v2-edgeless-note-white",
+        "background": {
+          "dark": "#000000",
+          "light": "#ffffff"
+        },
         "index": "a0",
         "hidden": false,
         "displayMode": "both",
@@ -110,4 +113,4 @@
       ]
     }
   ]
-}
+}

blocksuite/tests-legacy/snapshots/bookmark.spec.ts/support-dragging-bookmark-block-directly-init.json

@@ -17,7 +17,10 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-v2-edgeless-note-white",
+        "background": {
+          "dark": "#000000",
+          "light": "#ffffff"
+        },
         "index": "a0",
         "hidden": false,
         "displayMode": "both",
@@ -53,4 +56,4 @@
       ]
     }
   ]
-}
+}

blocksuite/tests-legacy/snapshots/clipboard/clipboard.spec.ts/auto-identify-url-final.json

@@ -17,7 +17,10 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-v2-edgeless-note-white",
+        "background": {
+          "dark": "#000000",
+          "light": "#ffffff"
+        },
         "index": "a0",
         "lockedBySelf": false,
         "hidden": false,

blocksuite/tests-legacy/snapshots/clipboard/list.spec.ts/cut-will-delete-all-content-and-copy-will-reappear-content-after-cut.json

@@ -17,7 +17,10 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-v2-edgeless-note-white",
+        "background": {
+          "dark": "#000000",
+          "light": "#ffffff"
+        },
         "index": "a0",
         "lockedBySelf": false,
         "hidden": false,

blocksuite/tests-legacy/snapshots/clipboard/list.spec.ts/cut-will-delete-all-content-and-copy-will-reappear-content-after-paste.json

@@ -17,7 +17,10 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-v2-edgeless-note-white",
+        "background": {
+          "dark": "#000000",
+          "light": "#ffffff"
+        },
         "index": "a0",
         "lockedBySelf": false,
         "hidden": false,

blocksuite/tests-legacy/snapshots/clipboard/list.spec.ts/should-keep-paragraph-block-s-type-when-pasting-at-the-start-of-empty-paragraph-block-except-type-text-after-paste-1.json

@@ -17,7 +17,10 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-v2-edgeless-note-white",
+        "background": {
+          "dark": "#000000",
+          "light": "#ffffff"
+        },
         "index": "a0",
         "lockedBySelf": false,
         "hidden": false,

blocksuite/tests-legacy/snapshots/clipboard/list.spec.ts/should-keep-paragraph-block-s-type-when-pasting-at-the-start-of-empty-paragraph-block-except-type-text-after-paste-2.json

@@ -17,7 +17,10 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-v2-edgeless-note-white",
+        "background": {
+          "dark": "#000000",
+          "light": "#ffffff"
+        },
         "index": "a0",
         "lockedBySelf": false,
         "hidden": false,

blocksuite/tests-legacy/snapshots/code/copy-paste.spec.ts/code-block-has-content-click-code-block-copy-menu-copy-whole-code-block-pasted.json

@@ -17,7 +17,10 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-v2-edgeless-note-white",
+        "background": {
+          "dark": "#000000",
+          "light": "#ffffff"
+        },
         "index": "a0",
         "lockedBySelf": false,
         "hidden": false,

blocksuite/tests-legacy/snapshots/code/copy-paste.spec.ts/code-block-is-empty-click-code-block-copy-menu-copy-the-empty-code-block-pasted.json

@@ -17,7 +17,10 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-v2-edgeless-note-white",
+        "background": {
+          "dark": "#000000",
+          "light": "#ffffff"
+        },
         "index": "a0",
         "lockedBySelf": false,
         "hidden": false,

blocksuite/tests-legacy/snapshots/code/crud.spec.ts/delete-code-block-in-more-menu-final.json

@@ -17,7 +17,10 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-v2-edgeless-note-white",
+        "background": {
+          "dark": "#000000",
+          "light": "#ffffff"
+        },
         "index": "a0",
         "lockedBySelf": false,
         "hidden": false,

blocksuite/tests-legacy/snapshots/code/crud.spec.ts/duplicate-code-block-final.json

@@ -17,7 +17,10 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-v2-edgeless-note-white",
+        "background": {
+          "dark": "#000000",
+          "light": "#ffffff"
+        },
         "index": "a0",
         "lockedBySelf": false,
         "hidden": false,

blocksuite/tests-legacy/snapshots/code/crud.spec.ts/format-text-in-code-block-format.json

@@ -17,7 +17,10 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-v2-edgeless-note-white",
+        "background": {
+          "dark": "#000000",
+          "light": "#ffffff"
+        },
         "index": "a0",
         "lockedBySelf": false,
         "hidden": false,

blocksuite/tests-legacy/snapshots/code/crud.spec.ts/format-text-in-code-block-init.json

@@ -17,7 +17,10 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-v2-edgeless-note-white",
+        "background": {
+          "dark": "#000000",
+          "light": "#ffffff"
+        },
         "index": "a0",
         "lockedBySelf": false,
         "hidden": false,

blocksuite/tests-legacy/snapshots/code/crud.spec.ts/format-text-in-code-block-link.json

@@ -17,7 +17,10 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-v2-edgeless-note-white",
+        "background": {
+          "dark": "#000000",
+          "light": "#ffffff"
+        },
         "index": "a0",
         "lockedBySelf": false,
         "hidden": false,

blocksuite/tests-legacy/snapshots/code/crud.spec.ts/use-markdown-syntax-can-create-code-block-init.json

@@ -17,7 +17,10 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-v2-edgeless-note-white",
+        "background": {
+          "dark": "#000000",
+          "light": "#ffffff"
+        },
         "index": "a0",
         "lockedBySelf": false,
         "hidden": false,

blocksuite/tests-legacy/snapshots/code/crud.spec.ts/use-markdown-syntax-can-create-code-block-markdown-syntax.json

@@ -17,7 +17,10 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-v2-edgeless-note-white",
+        "background": {
+          "dark": "#000000",
+          "light": "#ffffff"
+        },
         "index": "a0",
         "lockedBySelf": false,
         "hidden": false,

blocksuite/tests-legacy/snapshots/drag.spec.ts/move-to-the-last-block-of-each-level-in-multi-level-nesting-drag-3-4.json

@@ -17,7 +17,10 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-v2-edgeless-note-white",
+        "background": {
+          "dark": "#000000",
+          "light": "#ffffff"
+        },
         "index": "a0",
         "lockedBySelf": false,
         "hidden": false,

blocksuite/tests-legacy/snapshots/drag.spec.ts/move-to-the-last-block-of-each-level-in-multi-level-nesting-drag-3-9.json

@@ -17,7 +17,10 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-v2-edgeless-note-white",
+        "background": {
+          "dark": "#000000",
+          "light": "#ffffff"
+        },
         "index": "a0",
         "lockedBySelf": false,
         "hidden": false,

blocksuite/tests-legacy/snapshots/drag.spec.ts/move-to-the-last-block-of-each-level-in-multi-level-nesting-drag-4-3.json

@@ -17,7 +17,10 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-v2-edgeless-note-white",
+        "background": {
+          "dark": "#000000",
+          "light": "#ffffff"
+        },
         "index": "a0",
         "lockedBySelf": false,
         "hidden": false,

blocksuite/tests-legacy/snapshots/drag.spec.ts/move-to-the-last-block-of-each-level-in-multi-level-nesting-init.json

@@ -17,7 +17,10 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-v2-edgeless-note-white",
+        "background": {
+          "dark": "#000000",
+          "light": "#ffffff"
+        },
         "index": "a0",
         "lockedBySelf": false,
         "hidden": false,

blocksuite/tests-legacy/snapshots/drag.spec.ts/should-be-able-to-drag-drop-multiple-blocks-to-nested-block-finial.json

@@ -17,7 +17,10 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-v2-edgeless-note-white",
+        "background": {
+          "dark": "#000000",
+          "light": "#ffffff"
+        },
         "index": "a0",
         "hidden": false,
         "displayMode": "both",
@@ -183,4 +186,4 @@
       ]
     }
   ]
-}
+}

blocksuite/tests-legacy/snapshots/drag.spec.ts/should-be-able-to-drag-drop-multiple-blocks-to-nested-block-init.json

@@ -17,7 +17,10 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-v2-edgeless-note-white",
+        "background": {
+          "dark": "#000000",
+          "light": "#ffffff"
+        },
         "index": "a0",
         "hidden": false,
         "displayMode": "both",
@@ -183,4 +186,4 @@
       ]
     }
   ]
-}
+}

blocksuite/tests-legacy/snapshots/edgeless/edgeless-text.spec.ts/min-width-limit-for-embed-block-add-linked-doc.json

@@ -28,7 +28,7 @@
             "xywh": "[-25,-25,88.75,50]",
             "index": "a1",
             "lockedBySelf": false,
-            "color": "--affine-v2-edgeless-palette-medium-blueMedium",
+            "color": "#84cfff",
             "fontFamily": "blocksuite:surface:Inter",
             "fontStyle": "normal",
             "fontWeight": "400",
@@ -74,7 +74,10 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-v2-edgeless-note-white",
+        "background": {
+          "dark": "#000000",
+          "light": "#ffffff"
+        },
         "index": "a0",
         "lockedBySelf": false,
         "hidden": false,

blocksuite/tests-legacy/snapshots/edgeless/edgeless-text.spec.ts/min-width-limit-for-embed-block-drag.json

@@ -28,7 +28,7 @@
             "xywh": "[-25,-25,497,154]",
             "index": "a1",
             "lockedBySelf": false,
-            "color": "--affine-v2-edgeless-palette-medium-blueMedium",
+            "color": "#84cfff",
             "fontFamily": "blocksuite:surface:Inter",
             "fontStyle": "normal",
             "fontWeight": "400",
@@ -65,7 +65,10 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-v2-edgeless-note-white",
+        "background": {
+          "dark": "#000000",
+          "light": "#ffffff"
+        },
         "index": "a0",
         "lockedBySelf": false,
         "hidden": false,

blocksuite/tests-legacy/snapshots/edgeless/edgeless-text.spec.ts/min-width-limit-for-embed-block-init.json

@@ -28,7 +28,7 @@
             "xywh": "[-25,-25,50,26]",
             "index": "a1",
             "lockedBySelf": false,
-            "color": "--affine-v2-edgeless-palette-medium-blueMedium",
+            "color": "#84cfff",
             "fontFamily": "blocksuite:surface:Inter",
             "fontStyle": "normal",
             "fontWeight": "400",
@@ -64,7 +64,10 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-v2-edgeless-note-white",
+        "background": {
+          "dark": "#000000",
+          "light": "#ffffff"
+        },
         "index": "a0",
         "lockedBySelf": false,
         "hidden": false,

blocksuite/tests-legacy/snapshots/edgeless/edgeless-text.spec.ts/min-width-limit-for-embed-block-link-to-card-min-width.json

@@ -28,7 +28,7 @@
             "xywh": "[-25,-25,452,154]",
             "index": "a1",
             "lockedBySelf": false,
-            "color": "--affine-v2-edgeless-palette-medium-blueMedium",
+            "color": "#84cfff",
             "fontFamily": "blocksuite:surface:Inter",
             "fontStyle": "normal",
             "fontWeight": "400",
@@ -65,7 +65,10 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-v2-edgeless-note-white",
+        "background": {
+          "dark": "#000000",
+          "light": "#ffffff"
+        },
         "index": "a0",
         "lockedBySelf": false,
         "hidden": false,

blocksuite/tests-legacy/snapshots/edgeless/edgeless-text.spec.ts/min-width-limit-for-embed-block-link-to-card.json

@@ -28,7 +28,7 @@
             "xywh": "[-25,-25,452,154]",
             "index": "a1",
             "lockedBySelf": false,
-            "color": "--affine-v2-edgeless-palette-medium-blueMedium",
+            "color": "#84cfff",
             "fontFamily": "blocksuite:surface:Inter",
             "fontStyle": "normal",
             "fontWeight": "400",
@@ -65,7 +65,10 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-v2-edgeless-note-white",
+        "background": {
+          "dark": "#000000",
+          "light": "#ffffff"
+        },
         "index": "a0",
         "lockedBySelf": false,
         "hidden": false,

blocksuite/tests-legacy/snapshots/edgeless/edgeless-text.spec.ts/press-backspace-at-the-start-of-first-line-when-edgeless-text-exist-finial.json

@@ -32,7 +32,7 @@
             "xywh": "[-25,-25,50,26]",
             "index": "a1",
             "lockedBySelf": false,
-            "color": "--affine-v2-edgeless-palette-medium-blueMedium",
+            "color": "#84cfff",
             "fontFamily": "blocksuite:surface:Inter",
             "fontStyle": "normal",
             "fontWeight": "400",
@@ -72,7 +72,10 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,48]",
-        "background": "--affine-v2-edgeless-note-white",
+        "background": {
+          "dark": "#000000",
+          "light": "#ffffff"
+        },
         "index": "a0",
         "lockedBySelf": false,
         "hidden": false,

blocksuite/tests-legacy/snapshots/edgeless/edgeless-text.spec.ts/press-backspace-at-the-start-of-first-line-when-edgeless-text-exist-note-empty.json

@@ -28,7 +28,7 @@
             "xywh": "[-25,-25,50,26]",
             "index": "a1",
             "lockedBySelf": false,
-            "color": "--affine-v2-edgeless-palette-medium-blueMedium",
+            "color": "#84cfff",
             "fontFamily": "blocksuite:surface:Inter",
             "fontStyle": "normal",
             "fontWeight": "400",
@@ -68,7 +68,10 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,48]",
-        "background": "--affine-v2-edgeless-note-white",
+        "background": {
+          "dark": "#000000",
+          "light": "#ffffff"
+        },
         "index": "a0",
         "lockedBySelf": false,
         "hidden": false,

blocksuite/tests-legacy/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,7 @@
             "xywh": "[-25,-25,50,26]",
             "index": "a1",
             "lockedBySelf": false,
-            "color": "--affine-v2-edgeless-palette-medium-blueMedium",
+            "color": "#84cfff",
             "fontFamily": "blocksuite:surface:Inter",
             "fontStyle": "normal",
             "fontWeight": "400",
@@ -68,7 +68,10 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,48]",
-        "background": "--affine-v2-edgeless-note-white",
+        "background": {
+          "dark": "#000000",
+          "light": "#ffffff"
+        },
         "index": "a0",
         "lockedBySelf": false,
         "hidden": false,

blocksuite/tests-legacy/snapshots/format-bar.spec.ts/create-linked-doc-from-block-selection-with-format-bar.json

@@ -17,7 +17,10 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-v2-edgeless-note-white",
+        "background": {
+          "dark": "#000000",
+          "light": "#ffffff"
+        },
         "index": "a0",
         "lockedBySelf": false,
         "hidden": false,

blocksuite/tests-legacy/snapshots/format-bar.spec.ts/should-format-quick-bar-be-able-to-change-background-color-default-color.json

@@ -17,7 +17,10 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-v2-edgeless-note-white",
+        "background": {
+          "dark": "#000000",
+          "light": "#ffffff"
+        },
         "index": "a0",
         "lockedBySelf": false,
         "hidden": false,

blocksuite/tests-legacy/snapshots/format-bar.spec.ts/should-format-quick-bar-be-able-to-change-background-color-init.json

@@ -17,7 +17,10 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-v2-edgeless-note-white",
+        "background": {
+          "dark": "#000000",
+          "light": "#ffffff"
+        },
         "index": "a0",
         "lockedBySelf": false,
         "hidden": false,

blocksuite/tests-legacy/snapshots/format-bar.spec.ts/should-format-quick-bar-be-able-to-change-background-color-select-all.json

@@ -17,7 +17,10 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-v2-edgeless-note-white",
+        "background": {
+          "dark": "#000000",
+          "light": "#ffffff"
+        },
         "index": "a0",
         "lockedBySelf": false,
         "hidden": false,

blocksuite/tests-legacy/snapshots/format-bar.spec.ts/should-format-quick-bar-be-able-to-change-to-heading-paragraph-type-bulleted.json

@@ -17,7 +17,10 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-v2-edgeless-note-white",
+        "background": {
+          "dark": "#000000",
+          "light": "#ffffff"
+        },
         "index": "a0",
         "lockedBySelf": false,
         "hidden": false,

blocksuite/tests-legacy/snapshots/format-bar.spec.ts/should-format-quick-bar-be-able-to-change-to-heading-paragraph-type-finial.json

@@ -17,7 +17,10 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-v2-edgeless-note-white",
+        "background": {
+          "dark": "#000000",
+          "light": "#ffffff"
+        },
         "index": "a0",
         "lockedBySelf": false,
         "hidden": false,

blocksuite/tests-legacy/snapshots/format-bar.spec.ts/should-format-quick-bar-be-able-to-change-to-heading-paragraph-type-init.json

@@ -17,7 +17,10 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-v2-edgeless-note-white",
+        "background": {
+          "dark": "#000000",
+          "light": "#ffffff"
+        },
         "index": "a0",
         "lockedBySelf": false,
         "hidden": false,

blocksuite/tests-legacy/snapshots/format-bar.spec.ts/should-format-quick-bar-be-able-to-format-text-finial.json

@@ -17,7 +17,10 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-v2-edgeless-note-white",
+        "background": {
+          "dark": "#000000",
+          "light": "#ffffff"
+        },
         "index": "a0",
         "lockedBySelf": false,
         "hidden": false,

blocksuite/tests-legacy/snapshots/format-bar.spec.ts/should-format-quick-bar-be-able-to-format-text-init.json

@@ -17,7 +17,10 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-v2-edgeless-note-white",
+        "background": {
+          "dark": "#000000",
+          "light": "#ffffff"
+        },
         "index": "a0",
         "lockedBySelf": false,
         "hidden": false,

blocksuite/tests-legacy/snapshots/format-bar.spec.ts/should-format-quick-bar-be-able-to-format-text-when-select-multiple-line-finial.json

@@ -17,7 +17,10 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-v2-edgeless-note-white",
+        "background": {
+          "dark": "#000000",
+          "light": "#ffffff"
+        },
         "index": "a0",
         "lockedBySelf": false,
         "hidden": false,

blocksuite/tests-legacy/snapshots/format-bar.spec.ts/should-format-quick-bar-be-able-to-format-text-when-select-multiple-line-init.json

@@ -17,7 +17,10 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-v2-edgeless-note-white",
+        "background": {
+          "dark": "#000000",
+          "light": "#ffffff"
+        },
         "index": "a0",
         "lockedBySelf": false,
         "hidden": false,

blocksuite/tests-legacy/snapshots/format-bar.spec.ts/should-format-quick-bar-be-able-to-link-text-finial.json

@@ -17,7 +17,10 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-v2-edgeless-note-white",
+        "background": {
+          "dark": "#000000",
+          "light": "#ffffff"
+        },
         "index": "a0",
         "lockedBySelf": false,
         "hidden": false,

blocksuite/tests-legacy/snapshots/format-bar.spec.ts/should-format-quick-bar-be-able-to-link-text-init.json

@@ -17,7 +17,10 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-v2-edgeless-note-white",
+        "background": {
+          "dark": "#000000",
+          "light": "#ffffff"
+        },
         "index": "a0",
         "lockedBySelf": false,
         "hidden": false,

blocksuite/tests-legacy/snapshots/format-bar.spec.ts/should-format-quick-bar-show-after-convert-to-code-block.json

@@ -17,7 +17,10 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-v2-edgeless-note-white",
+        "background": {
+          "dark": "#000000",
+          "light": "#ffffff"
+        },
         "index": "a0",
         "lockedBySelf": false,
         "hidden": false,

blocksuite/tests-legacy/snapshots/format-bar.spec.ts/should-format-quick-bar-with-block-selection-works-when-update-block-type-final.json

@@ -17,7 +17,10 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-v2-edgeless-note-white",
+        "background": {
+          "dark": "#000000",
+          "light": "#ffffff"
+        },
         "index": "a0",
         "lockedBySelf": false,
         "hidden": false,

blocksuite/tests-legacy/snapshots/format-bar.spec.ts/should-format-quick-bar-with-block-selection-works-when-update-block-type-init.json

@@ -17,7 +17,10 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-v2-edgeless-note-white",
+        "background": {
+          "dark": "#000000",
+          "light": "#ffffff"
+        },
         "index": "a0",
         "lockedBySelf": false,
         "hidden": false,

blocksuite/tests-legacy/snapshots/format-bar.spec.ts/should-format-quick-bar-work-in-multiple-block-selection.json

@@ -17,7 +17,10 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-v2-edgeless-note-white",
+        "background": {
+          "dark": "#000000",
+          "light": "#ffffff"
+        },
         "index": "a0",
         "lockedBySelf": false,
         "hidden": false,

blocksuite/tests-legacy/snapshots/format-bar.spec.ts/should-format-quick-bar-work-in-single-block-selection.json

@@ -17,7 +17,10 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-v2-edgeless-note-white",
+        "background": {
+          "dark": "#000000",
+          "light": "#ffffff"
+        },
         "index": "a0",
         "lockedBySelf": false,
         "hidden": false,

blocksuite/tests-legacy/snapshots/hotkey.spec.ts/Enter-key-should-as-expected-after-setting-heading-by-shortkey.json

@@ -17,7 +17,10 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-v2-edgeless-note-white",
+        "background": {
+          "dark": "#000000",
+          "light": "#ffffff"
+        },
         "index": "a0",
         "hidden": false,
         "displayMode": "both",

blocksuite/tests-legacy/snapshots/hotkey.spec.ts/multi-line-rich-text-inline-code-hotkey-init.json

@@ -17,7 +17,10 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-v2-edgeless-note-white",
+        "background": {
+          "dark": "#000000",
+          "light": "#ffffff"
+        },
         "index": "a0",
         "hidden": false,
         "displayMode": "both",

blocksuite/tests-legacy/snapshots/hotkey.spec.ts/multi-line-rich-text-inline-code-hotkey-redo.json

@@ -17,7 +17,10 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-v2-edgeless-note-white",
+        "background": {
+          "dark": "#000000",
+          "light": "#ffffff"
+        },
         "index": "a0",
         "hidden": false,
         "displayMode": "both",

blocksuite/tests-legacy/snapshots/hotkey.spec.ts/multi-line-rich-text-inline-code-hotkey-undo.json

@@ -17,7 +17,10 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-v2-edgeless-note-white",
+        "background": {
+          "dark": "#000000",
+          "light": "#ffffff"
+        },
         "index": "a0",
         "hidden": false,
         "displayMode": "both",

blocksuite/tests-legacy/snapshots/hotkey.spec.ts/should-cut-work-multiple-line-init.json

@@ -17,7 +17,10 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-v2-edgeless-note-white",
+        "background": {
+          "dark": "#000000",
+          "light": "#ffffff"
+        },
         "index": "a0",
         "hidden": false,
         "displayMode": "both",

blocksuite/tests-legacy/snapshots/hotkey.spec.ts/should-cut-work-multiple-line-undo.json

@@ -17,7 +17,10 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-v2-edgeless-note-white",
+        "background": {
+          "dark": "#000000",
+          "light": "#ffffff"
+        },
         "index": "a0",
         "hidden": false,
         "displayMode": "both",

blocksuite/tests-legacy/snapshots/hotkey.spec.ts/should-cut-work-single-line-init.json

@@ -17,7 +17,10 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-v2-edgeless-note-white",
+        "background": {
+          "dark": "#000000",
+          "light": "#ffffff"
+        },
         "index": "a0",
         "hidden": false,
         "displayMode": "both",

blocksuite/tests-legacy/snapshots/hotkey.spec.ts/should-cut-work-single-line-undo.json

@@ -17,7 +17,10 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-v2-edgeless-note-white",
+        "background": {
+          "dark": "#000000",
+          "light": "#ffffff"
+        },
         "index": "a0",
         "hidden": false,
         "displayMode": "both",

blocksuite/tests-legacy/snapshots/hotkey.spec.ts/should-hotkey-work-in-paragraph-init.json

@@ -17,7 +17,10 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-v2-edgeless-note-white",
+        "background": {
+          "dark": "#000000",
+          "light": "#ffffff"
+        },
         "index": "a0",
         "hidden": false,
         "displayMode": "both",

blocksuite/tests-legacy/snapshots/hotkey.spec.ts/should-hotkey-work-in-paragraph-press-0.json

@@ -17,7 +17,10 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-v2-edgeless-note-white",
+        "background": {
+          "dark": "#000000",
+          "light": "#ffffff"
+        },
         "index": "a0",
         "hidden": false,
         "displayMode": "both",

blocksuite/tests-legacy/snapshots/hotkey.spec.ts/should-hotkey-work-in-paragraph-press-6.json

@@ -17,7 +17,10 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-v2-edgeless-note-white",
+        "background": {
+          "dark": "#000000",
+          "light": "#ffffff"
+        },
         "index": "a0",
         "hidden": false,
         "displayMode": "both",

blocksuite/tests-legacy/snapshots/hotkey.spec.ts/should-hotkey-work-in-paragraph-press-8.json

@@ -17,7 +17,10 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-v2-edgeless-note-white",
+        "background": {
+          "dark": "#000000",
+          "light": "#ffffff"
+        },
         "index": "a0",
         "hidden": false,
         "displayMode": "both",

blocksuite/tests-legacy/snapshots/hotkey.spec.ts/should-hotkey-work-in-paragraph-press-9.json

@@ -17,7 +17,10 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-v2-edgeless-note-white",
+        "background": {
+          "dark": "#000000",
+          "light": "#ffffff"
+        },
         "index": "a0",
         "hidden": false,
         "displayMode": "both",

blocksuite/tests-legacy/snapshots/hotkey.spec.ts/should-hotkey-work-in-paragraph-press-d.json

@@ -17,7 +17,10 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-v2-edgeless-note-white",
+        "background": {
+          "dark": "#000000",
+          "light": "#ffffff"
+        },
         "index": "a0",
         "hidden": false,
         "displayMode": "both",

blocksuite/tests-legacy/snapshots/hotkey.spec.ts/should-multiple-line-format-hotkey-work-finial.json

@@ -17,7 +17,10 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-v2-edgeless-note-white",
+        "background": {
+          "dark": "#000000",
+          "light": "#ffffff"
+        },
         "index": "a0",
         "hidden": false,
         "displayMode": "both",

blocksuite/tests-legacy/snapshots/hotkey.spec.ts/should-multiple-line-format-hotkey-work-init.json

@@ -17,7 +17,10 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-v2-edgeless-note-white",
+        "background": {
+          "dark": "#000000",
+          "light": "#ffffff"
+        },
         "index": "a0",
         "hidden": false,
         "displayMode": "both",

blocksuite/tests-legacy/snapshots/hotkey.spec.ts/should-single-line-format-hotkey-work-finial.json

@@ -17,7 +17,10 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-v2-edgeless-note-white",
+        "background": {
+          "dark": "#000000",
+          "light": "#ffffff"
+        },
         "index": "a0",
         "hidden": false,
         "displayMode": "both",

blocksuite/tests-legacy/snapshots/hotkey.spec.ts/should-single-line-format-hotkey-work-init.json

@@ -17,7 +17,10 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-v2-edgeless-note-white",
+        "background": {
+          "dark": "#000000",
+          "light": "#ffffff"
+        },
         "index": "a0",
         "hidden": false,
         "displayMode": "both",

blocksuite/tests-legacy/snapshots/hotkey.spec.ts/use-formatted-cursor-with-hotkey-bold-ggg.json

@@ -17,7 +17,10 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-v2-edgeless-note-white",
+        "background": {
+          "dark": "#000000",
+          "light": "#ffffff"
+        },
         "index": "a0",
         "hidden": false,
         "displayMode": "both",

blocksuite/tests-legacy/snapshots/hotkey.spec.ts/use-formatted-cursor-with-hotkey-bold-hhh.json

@@ -17,7 +17,10 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-v2-edgeless-note-white",
+        "background": {
+          "dark": "#000000",
+          "light": "#ffffff"
+        },
         "index": "a0",
         "hidden": false,
         "displayMode": "both",

blocksuite/tests-legacy/snapshots/hotkey.spec.ts/use-formatted-cursor-with-hotkey-bold.json

@@ -17,7 +17,10 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-v2-edgeless-note-white",
+        "background": {
+          "dark": "#000000",
+          "light": "#ffffff"
+        },
         "index": "a0",
         "hidden": false,
         "displayMode": "both",

blocksuite/tests-legacy/snapshots/hotkey.spec.ts/use-formatted-cursor-with-hotkey-init.json

@@ -17,7 +17,10 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-v2-edgeless-note-white",
+        "background": {
+          "dark": "#000000",
+          "light": "#ffffff"
+        },
         "index": "a0",
         "hidden": false,
         "displayMode": "both",

blocksuite/tests-legacy/snapshots/hotkey/bracket.spec.ts/should-bracket-complete-with-backtick-works-undo.json

@@ -17,7 +17,10 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-v2-edgeless-note-white",
+        "background": {
+          "dark": "#000000",
+          "light": "#ffffff"
+        },
         "index": "a0",
         "lockedBySelf": false,
         "hidden": false,

blocksuite/tests-legacy/snapshots/hotkey/bracket.spec.ts/should-bracket-complete-with-backtick-works.json

@@ -17,7 +17,10 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-v2-edgeless-note-white",
+        "background": {
+          "dark": "#000000",
+          "light": "#ffffff"
+        },
         "index": "a0",
         "lockedBySelf": false,
         "hidden": false,

blocksuite/tests-legacy/snapshots/hotkey/hotkey.spec.ts/Enter-key-should-as-expected-after-setting-heading-by-shortkey.json

@@ -17,7 +17,10 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-v2-edgeless-note-white",
+        "background": {
+          "dark": "#000000",
+          "light": "#ffffff"
+        },
         "index": "a0",
         "lockedBySelf": false,
         "hidden": false,

blocksuite/tests-legacy/snapshots/hotkey/hotkey.spec.ts/should-cut-work-single-line-init.json

@@ -17,7 +17,10 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-v2-edgeless-note-white",
+        "background": {
+          "dark": "#000000",
+          "light": "#ffffff"
+        },
         "index": "a0",
         "lockedBySelf": false,
         "hidden": false,

blocksuite/tests-legacy/snapshots/hotkey/hotkey.spec.ts/should-cut-work-single-line-undo.json

@@ -17,7 +17,10 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-v2-edgeless-note-white",
+        "background": {
+          "dark": "#000000",
+          "light": "#ffffff"
+        },
         "index": "a0",
         "lockedBySelf": false,
         "hidden": false,

blocksuite/tests-legacy/snapshots/hotkey/hotkey.spec.ts/should-hotkey-work-in-paragraph-init.json

@@ -17,7 +17,10 @@
       "version": 1,
       "props": {
         "xywh": "[0,0,498,92]",
-        "background": "--affine-v2-edgeless-note-white",
+        "background": {
+          "dark": "#000000",
+          "light": "#ffffff"
+        },
         "index": "a0",
         "lockedBySelf": false,
         "hidden": false,