fix(editor): should update color of edgeless text when switching theme (#11853)

Closes: [BS-3258](https://linear.app/affine-design/issue/BS-3258/edgeless-text-颜色不符合预期)

tests/affine-local/e2e/blocksuite/edgeless/text.spec.ts

@@ -0,0 +1,102 @@
+import { test } from '@affine-test/kit/playwright';
+import {
+  clickEdgelessModeButton,
+  locateEditorContainer,
+  locateToolbar,
+} from '@affine-test/kit/utils/editor';
+import { openHomePage } from '@affine-test/kit/utils/load-page';
+import {
+  clickNewPageButton,
+  type,
+  waitForEditorLoad,
+} from '@affine-test/kit/utils/page-logic';
+import { expect, type Locator } from '@playwright/test';
+
+function getEdgelessTextColor(text: Locator) {
+  return text
+    .locator('.affine-block-children-container')
+    .first()
+    .evaluate(e => e.style.getPropertyValue('--edgeless-text-color'));
+}
+
+test.beforeEach(async ({ page }) => {
+  await openHomePage(page);
+  await waitForEditorLoad(page);
+  await clickNewPageButton(page);
+  await clickEdgelessModeButton(page);
+  const container = locateEditorContainer(page);
+  await container.click();
+});
+
+test('should update color of edgeless text when switching theme', async ({
+  page,
+}) => {
+  const container = locateEditorContainer(page);
+  await container.dblclick();
+
+  await page.waitForSelector('affine-edgeless-text');
+
+  await type(page, 'text color');
+
+  await page.keyboard.press('Escape');
+  await page.keyboard.press('Escape');
+
+  const text = page.locator('affine-edgeless-text');
+
+  await text.click();
+
+  const toolbar = locateToolbar(page);
+
+  await expect(toolbar).toBeVisible();
+
+  const colorPicker = toolbar.locator('edgeless-color-picker-button');
+  const colorButton = toolbar.getByLabel('Text color');
+
+  await colorButton.click();
+
+  const pickedColorButton = colorPicker.locator(
+    'edgeless-color-button[active]'
+  );
+
+  let pickedColor = await pickedColorButton.locator('svg').getAttribute('fill');
+  let textColor = await getEdgelessTextColor(text);
+
+  await expect(pickedColorButton.getByLabel('MediumBlue')).toHaveCount(1);
+  expect(pickedColor).toBe(textColor);
+
+  const blackColorButton = colorPicker
+    .locator('edgeless-color-button')
+    .filter({
+      has: page.locator('.color-unit'),
+    })
+    .filter({
+      has: page.getByLabel('Black'),
+    });
+  await blackColorButton.click();
+
+  pickedColor = await blackColorButton.locator('svg').getAttribute('fill');
+  textColor = await getEdgelessTextColor(text);
+
+  expect(pickedColor).toBe(textColor);
+  expect(pickedColor).toBe('#000000');
+
+  await page.getByTestId('header-info-button').click();
+
+  await page
+    .locator('[data-info-id="edgelessTheme"]')
+    .locator('[data-property-value="true"]')
+    .locator('button[value="dark"]')
+    .click();
+
+  await page.keyboard.press('Escape');
+
+  await expect(page.getByTestId('property-collapsible-section')).toBeHidden();
+
+  await colorButton.click();
+
+  pickedColor = await blackColorButton.locator('svg').getAttribute('fill');
+  textColor = await getEdgelessTextColor(text);
+
+  expect(pickedColor).toBe(textColor);
+  expect(pickedColor).toBe('#ffffff');
+});