fix(web): restore theme surfaces

src/apps/web/src/__tests__/appUI.test.tsx

@@ -1,6 +1,7 @@
 import { act, useEffect, useState } from 'react'
 import { createRoot } from 'react-dom/client'
 import { MemoryRouter } from 'react-router-dom'
+import { readFileSync } from 'node:fs'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 
 import { AppUIProvider, useSettingsUI, useSidebarUI, useTitleBarRightPanelUI } from '../contexts/app-ui'
@@ -298,6 +299,17 @@ describe('AppUIProvider sidebar state', () => {
   })
 })
 
+describe('custom background surface CSS', () => {
+  it('keeps chat gradient transparent outside color-mix support', () => {
+    const css = readFileSync('src/index.css', 'utf-8')
+
+    expect(css).toContain(':root[data-background-image="custom"]')
+    expect(css).toContain('--c-chat-bg-gradient-stop: transparent;')
+    expect(css).toContain('.theme-chat-surface')
+    expect(css).toContain('background-color: color-mix(in srgb, var(--c-bg-page) 42%, transparent);')
+  })
+})
+
 describe('DesktopTitleBar update entry', () => {
   let container: HTMLDivElement
   let root: ReturnType<typeof createRoot> | null
@@ -384,7 +396,7 @@ describe('DesktopTitleBar update entry', () => {
     await renderTitleBar(appUpdateState('available'), true)
 
     const titleBar = container.firstElementChild as HTMLElement | null
-    expect(titleBar?.style.paddingLeft).toBe('8px')
+    expect(titleBar?.style.paddingLeft).toBe('12px')
     expect(container.querySelector('button[title="Minimize"]')).toBeNull()
   })
 
@@ -394,7 +406,7 @@ describe('DesktopTitleBar update entry', () => {
     await renderTitleBar(appUpdateState('available'), true)
 
     const titleBar = container.firstElementChild as HTMLElement | null
-    expect(titleBar?.style.paddingLeft).toBe('8px')
+    expect(titleBar?.style.paddingLeft).toBe('12px')
     expect(container.querySelector('button[title="Minimize"]')).toBeNull()
   })
 

src/apps/web/src/components/ChatView.tsx

@@ -3489,7 +3489,7 @@ export const ChatView = memo(function ChatView() {
   ])
 
   return (
-    <div ref={chatViewRootRef} className="theme-surface-page relative flex min-w-0 flex-1 overflow-hidden bg-[var(--c-bg-page)]">
+    <div ref={chatViewRootRef} className="theme-surface-page theme-chat-surface relative flex min-w-0 flex-1 overflow-hidden bg-[var(--c-bg-page)]">
       {/* Chat column + right panel: starts below the desktop Chat/Work titlebar. */}
       <div className="relative flex flex-1 min-h-0 min-w-0">
         <div
@@ -3501,7 +3501,7 @@ export const ChatView = memo(function ChatView() {
           } as React.CSSProperties}
         >
           <ChatTitleMenu />
-          <div className="pointer-events-none absolute inset-x-0 top-[60px] z-10 h-10" style={{ background: 'linear-gradient(to bottom, var(--c-bg-page-gradient-stop, var(--c-bg-page)), transparent)' }} />
+          <div className="pointer-events-none absolute inset-x-0 top-[60px] z-10 h-10" style={{ background: 'linear-gradient(to bottom, var(--c-chat-bg-gradient-stop, var(--c-bg-page-gradient-stop, var(--c-bg-page))), transparent)' }} />
           {/* 消息列表 */}
           {messageListArea}
 
@@ -3521,7 +3521,7 @@ export const ChatView = memo(function ChatView() {
           left: 0,
           right: 0,
           zIndex: 10,
-          background: 'linear-gradient(to bottom, transparent 0%, var(--c-bg-page-gradient-stop, var(--c-bg-page)) 24px)',
+          background: 'linear-gradient(to bottom, transparent 0%, var(--c-chat-bg-gradient-stop, var(--c-bg-page-gradient-stop, var(--c-bg-page))) 24px)',
           transition: `padding ${rightPanelLayoutTransitionCss}`,
         } as React.CSSProperties}
         className="flex w-full flex-col items-center gap-2"

src/apps/web/src/components/DesktopSettings.tsx

@@ -578,15 +578,15 @@ export function DesktopSettings({
   return (
     <>
       <motion.div
-        className="flex h-full min-h-0 min-w-0 flex-1 overflow-hidden"
+        className="theme-surface-page flex h-full min-h-0 min-w-0 flex-1 overflow-hidden bg-[var(--c-bg-page)]"
         initial={{ opacity: 0, x: 10 }}
         animate={{ opacity: 1, x: 0 }}
         transition={{ duration: 0.18, ease: [0.16, 1, 0.3, 1] }}
         onAnimationStart={handleMotionStart}
         onAnimationComplete={handleMotionComplete}
       >
         <div
-          className="flex w-[280px] shrink-0 flex-col overflow-y-auto py-4"
+          className="theme-surface-sidebar flex w-[280px] shrink-0 flex-col overflow-y-auto bg-[var(--c-bg-sidebar)] py-4"
           style={{
             borderRight: "0.5px solid var(--c-border-subtle)",
           }}
@@ -610,7 +610,7 @@ export function DesktopSettings({
           <div
             className="pointer-events-none absolute left-0 right-0 top-0 z-10 h-8 transition-opacity duration-200"
             style={{
-              background: 'linear-gradient(to bottom, var(--c-bg-page) 0%, transparent 100%)',
+              background: 'linear-gradient(to bottom, var(--c-bg-page-gradient-stop, var(--c-bg-page)) 0%, transparent 100%)',
               opacity: scrolled ? 1 : 0,
             }}
           />

src/apps/web/src/components/DesktopTitleBar.tsx

@@ -35,7 +35,7 @@ import { useThreadLiveState } from '../contexts/thread-list'
 export const DESKTOP_TITLEBAR_HEIGHT = 44
 const WINDOWS_TITLEBAR_HEIGHT = 44
 const MAC_TITLEBAR_LEFT_PADDING = 76
-const DESKTOP_ICON_RAIL_LEFT_PADDING = 8
+const DESKTOP_ICON_RAIL_LEFT_PADDING = 12
 const PINNED_MENU_OPEN_DELAY_MS = 70
 const PINNED_MENU_GAP = 4
 

src/apps/web/src/components/SettingsModal.tsx

@@ -86,7 +86,7 @@ export function SettingsModal({ me, accessToken, initialTab = 'account', onClose
       onMouseDown={(e) => { if (e.target === e.currentTarget) onClose() }}
     >
       <div
-        className="modal-enter flex overflow-hidden rounded-2xl shadow-2xl bg-[var(--c-bg-page)]"
+        className="theme-surface-page modal-enter flex overflow-hidden rounded-2xl bg-[var(--c-bg-page)] shadow-2xl"
         style={{
           width: '832px',
           height: '624px',
@@ -95,7 +95,7 @@ export function SettingsModal({ me, accessToken, initialTab = 'account', onClose
       >
         {/* nav */}
         <div
-          className="flex w-[200px] shrink-0 flex-col py-4 bg-[var(--c-bg-sidebar)]"
+          className="theme-surface-sidebar flex w-[200px] shrink-0 flex-col bg-[var(--c-bg-sidebar)] py-4"
           style={{ borderRight: '0.5px solid rgba(0,0,0,0.14)' }}
         >
           <div className="mb-2 px-4 py-1">

src/apps/web/src/components/WelcomePage.tsx

@@ -565,7 +565,7 @@ export function WelcomePage() {
   return (
     <div ref={rootRef} className="flex h-full min-w-0 overflow-hidden">
       <div
-        className="flex min-h-0 min-w-0 flex-1 flex-col"
+        className="theme-surface-page theme-chat-surface flex min-h-0 min-w-0 flex-1 flex-col bg-[var(--c-bg-page)]"
         style={{
           minWidth: isRightPanelOpen ? welcomeMainMinWidth : 0,
           transition: `min-width ${welcomeRightPanelTransitionCss}`,

src/apps/web/src/index.css

@@ -92,6 +92,7 @@ button:not(:disabled) {
   --c-background-image-scrim-alpha: calc(0.18 + ((1 - var(--c-background-image-opacity)) * 0.34));
   --c-background-image-vignette-alpha: 0.22;
   --c-bg-page-gradient-stop: var(--c-bg-page);
+  --c-chat-bg-gradient-stop: var(--c-bg-page-gradient-stop);
   --c-bg-sidebar: #242422;
   --c-bg-deep: #141413;
   --c-bg-sub: #1e1e1c;
@@ -1640,7 +1641,8 @@ button:not(:disabled) {
 }
 
 :root[data-background-image="custom"] {
-  --c-bg-page-gradient-stop: color-mix(in srgb, var(--c-bg-page) 90%, transparent);
+  --c-bg-page-gradient-stop: var(--c-bg-page);
+  --c-chat-bg-gradient-stop: transparent;
 }
 
 :root[data-background-image="custom"] .theme-background-layer {
@@ -1666,6 +1668,10 @@ button:not(:disabled) {
 }
 
 @supports (color: color-mix(in srgb, black, white)) {
+  :root[data-background-image="custom"] {
+    --c-bg-page-gradient-stop: color-mix(in srgb, var(--c-bg-page) 90%, transparent);
+  }
+
   :root[data-background-image="custom"] .theme-surface-page {
     background-color: color-mix(in srgb, var(--c-bg-page) 76%, transparent);
   }
@@ -1677,6 +1683,10 @@ button:not(:disabled) {
   :root[data-background-image="custom"] .theme-surface-page .theme-surface-page {
     background-color: transparent;
   }
+
+  :root[data-background-image="custom"] .theme-chat-surface {
+    background-color: color-mix(in srgb, var(--c-bg-page) 42%, transparent);
+  }
 }
 
 .background-opacity-range::-webkit-slider-thumb {