From f87a6e17bd2ecf42c0d2e207dd8ab2fbb47576af Mon Sep 17 00:00:00 2001
From: yoyoyohamapi <8338436+yoyoyohamapi@users.noreply.github.com>
Date: Mon, 21 Apr 2025 07:24:17 +0000
Subject: [PATCH] fix(core): action items in the ai response are not optimized
 for dark mode (#11839)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

### TL;DR

* Fix action items in the AI response are not optimized for dark mode.
* Fix answer content in the AI response are not optimized for edgeless theme.

![截屏2025-04-21 14.26.41.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/MyktQ6Qwc7H6TiRCFoYN/9c991df4-36b1-4969-ac0d-3c582edb1120.png)

[uploading 截屏2025-04-21 14.30.00.png...]

> CLOSE BS-3249
---
 .../ai/components/ai-item/ai-item-list.ts     |  8 ++---
 .../blocksuite/ai/components/ask-ai-panel.ts  |  2 --
 .../blocksuite/ai/components/text-renderer.ts | 29 ++++++++++++++++---
 3 files changed, 28 insertions(+), 11 deletions(-)

diff --git a/packages/frontend/core/src/blocksuite/ai/components/ai-item/ai-item-list.ts b/packages/frontend/core/src/blocksuite/ai/components/ai-item/ai-item-list.ts
index ae4efe57a1..739f6ff7ce 100644
--- a/packages/frontend/core/src/blocksuite/ai/components/ai-item/ai-item-list.ts
+++ b/packages/frontend/core/src/blocksuite/ai/components/ai-item/ai-item-list.ts
@@ -1,6 +1,6 @@
 import { createLitPortal } from '@blocksuite/affine/components/portal';
 import { WithDisposable } from '@blocksuite/affine/global/lit';
-import { ColorScheme } from '@blocksuite/affine/model';
+import { ThemeProvider } from '@blocksuite/affine/shared/services';
 import {
   EditorHost,
   PropTypes,
@@ -112,6 +112,7 @@ export class AIItemList extends WithDisposable(LitElement) {
   }
 
   override render() {
+    const theme = this.host.std.get(ThemeProvider).app$.value;
     return html`${repeat(this.groups, group => {
       return html`
         ${group.name
@@ -124,7 +125,7 @@ export class AIItemList extends WithDisposable(LitElement) {
           item => item.name,
           item =>
             html`<ai-item
-              .theme=${this.theme}
+              .theme=${theme}
               .onClick=${this.onClick}
               .item=${item}
               .host=${this.host}
@@ -147,9 +148,6 @@ export class AIItemList extends WithDisposable(LitElement) {
 
   @property({ attribute: 'data-testid', reflect: true })
   accessor testId = 'ai-item-list';
-
-  @property({ attribute: false })
-  accessor theme: ColorScheme = ColorScheme.Light;
 }
 
 declare global {
diff --git a/packages/frontend/core/src/blocksuite/ai/components/ask-ai-panel.ts b/packages/frontend/core/src/blocksuite/ai/components/ask-ai-panel.ts
index 20fa7abd60..3cd0c0ddbb 100644
--- a/packages/frontend/core/src/blocksuite/ai/components/ask-ai-panel.ts
+++ b/packages/frontend/core/src/blocksuite/ai/components/ask-ai-panel.ts
@@ -86,10 +86,8 @@ export class AskAIPanel extends WithDisposable(LitElement) {
     const style = styleMap({
       minWidth: `${this.minWidth}px`,
     });
-    const appTheme = this.host.std.get(ThemeProvider).app$.value;
     return html`<div class="ask-ai-panel" style=${style}>
       <ai-item-list
-        .theme=${appTheme}
         .host=${this.host}
         .groups=${this._actionGroups}
         .onClick=${this.onItemClick}
diff --git a/packages/frontend/core/src/blocksuite/ai/components/text-renderer.ts b/packages/frontend/core/src/blocksuite/ai/components/text-renderer.ts
index 32f336923b..2532f37751 100644
--- a/packages/frontend/core/src/blocksuite/ai/components/text-renderer.ts
+++ b/packages/frontend/core/src/blocksuite/ai/components/text-renderer.ts
@@ -8,7 +8,11 @@ import { PageEditorBlockSpecs } from '@blocksuite/affine/extensions';
 import { Container, type ServiceProvider } from '@blocksuite/affine/global/di';
 import { WithDisposable } from '@blocksuite/affine/global/lit';
 import { codeBlockWrapMiddleware } from '@blocksuite/affine/shared/adapters';
-import { LinkPreviewerService } from '@blocksuite/affine/shared/services';
+import {
+  LinkPreviewerService,
+  ThemeProvider,
+} from '@blocksuite/affine/shared/services';
+import { unsafeCSSVarV2 } from '@blocksuite/affine/shared/theme';
 import {
   BlockStdScope,
   BlockViewIdentifier,
@@ -22,7 +26,11 @@ import type {
   Store,
   TransformerMiddleware,
 } from '@blocksuite/affine/store';
-import { css, html, nothing, type PropertyValues } from 'lit';
+import {
+  darkCssVariablesV2,
+  lightCssVariablesV2,
+} from '@toeverything/theme/v2';
+import { css, html, nothing, type PropertyValues, unsafeCSS } from 'lit';
 import { property, query } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { keyed } from 'lit/directives/keyed.js';
@@ -109,7 +117,7 @@ export class TextRenderer extends WithDisposable(ShadowlessElement) {
       padding: 0;
       margin: 0;
       line-height: var(--affine-line-height);
-      color: var(--affine-text-primary-color);
+      color: ${unsafeCSSVarV2('text/primary')};
       font-weight: 400;
     }
 
@@ -168,6 +176,18 @@ export class TextRenderer extends WithDisposable(ShadowlessElement) {
       }
     }
 
+    .text-renderer-container[data-app-theme='dark'] {
+      .ai-answer-text-editor .affine-page-root-block-container {
+        color: ${unsafeCSS(darkCssVariablesV2['--affine-v2-text-primary'])};
+      }
+    }
+
+    .text-renderer-container[data-app-theme='light'] {
+      .ai-answer-text-editor .affine-page-root-block-container {
+        color: ${unsafeCSS(lightCssVariablesV2['--affine-v2-text-primary'])};
+      }
+    }
+
     ${customHeadingStyles}
   `;
 
@@ -288,8 +308,9 @@ export class TextRenderer extends WithDisposable(ShadowlessElement) {
       'text-renderer-container': true,
       'custom-heading': !!customHeading,
     });
+    const theme = this.host?.std.get(ThemeProvider).app$.value;
     return html`
-      <div class=${classes} data-testid=${testId}>
+      <div class=${classes} data-testid=${testId} data-app-theme=${theme}>
         ${keyed(
           this._doc,
           html`<div class="ai-answer-text-editor affine-page-viewport">