From 663c2dc1ce1d3c40d034b71d4a90c92ba64cf8ea Mon Sep 17 00:00:00 2001
From: "opencode-agent[bot]"
 <219766164+opencode-agent[bot]@users.noreply.github.com>
Date: Tue, 1 Sep 2026 08:12:09 +0800
Subject: [PATCH] fix(app): raise composer only in dark mode (#46503)

Co-authored-by: Brendonovich <14191578+Brendonovich@users.noreply.github.com>
---
 packages/app/component-tests/composer.spec.ts | 11 +++++++++++
 packages/app/src/composer/editor/editor.css   |  4 ++++
 packages/app/src/composer/editor/editor.tsx   |  4 +---
 3 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/packages/app/component-tests/composer.spec.ts b/packages/app/component-tests/composer.spec.ts
index d332ca32acc..c6af7a08cce 100644
--- a/packages/app/component-tests/composer.spec.ts
+++ b/packages/app/component-tests/composer.spec.ts
@@ -1,5 +1,16 @@
 import { expect, story } from "../../storybook/playwright/story"
 
+story("raises the docked composer only in dark mode", async ({ mount, page }) => {
+  const component = await mount("opencode-composer-flow--empty-draft")
+  const composer = component.locator('[data-component="composer"]')
+
+  await page.locator("html").evaluate((root) => root.setAttribute("data-color-scheme", "light"))
+  await expect(composer).toHaveCSS("background-color", "rgb(255, 255, 255)")
+
+  await page.locator("html").evaluate((root) => root.setAttribute("data-color-scheme", "dark"))
+  await expect(composer).toHaveCSS("background-color", "rgb(36, 36, 36)")
+})
+
 for (const draft of ["empty-draft", "multiline-draft", "mixed-attachments"]) {
   story(`select all stays inside the composer with ${draft}`, async ({ mount, page }) => {
     const component = await mount(`opencode-composer-flow--${draft}`)
diff --git a/packages/app/src/composer/editor/editor.css b/packages/app/src/composer/editor/editor.css
index 2998f380743..ec5f9c55d7e 100644
--- a/packages/app/src/composer/editor/editor.css
+++ b/packages/app/src/composer/editor/editor.css
@@ -1,3 +1,7 @@
 [data-component="composer-editor"]:empty::before {
   content: "\200B";
 }
+
+[data-color-scheme="dark"] [data-component="composer"][data-dock-border-underlay="true"] {
+  background: var(--v2-background-bg-layer-01);
+}
diff --git a/packages/app/src/composer/editor/editor.tsx b/packages/app/src/composer/editor/editor.tsx
index 29c903e3e7b..96bf45da042 100644
--- a/packages/app/src/composer/editor/editor.tsx
+++ b/packages/app/src/composer/editor/editor.tsx
@@ -114,10 +114,8 @@ export function ComposerEditor(props: ComposerEditorProps) {
       <form
         data-component="composer"
         data-dock-border-underlay={props.borderUnderlay ? "true" : undefined}
-        class="group/composer relative min-h-[96px] w-full overflow-clip rounded-xl"
+        class="group/composer relative min-h-[96px] w-full overflow-clip rounded-xl bg-v2-background-bg-base"
         classList={{
-          "bg-v2-background-bg-layer-01": props.borderUnderlay,
-          "bg-v2-background-bg-base": !props.borderUnderlay,
           "shadow-[var(--v2-elevation-raised)]": !props.borderUnderlay,
           "border border-v2-icon-icon-info border-dashed": state.drag === "active",
         }}