feat(settings): replicate the WorkBuddy appearance panel and dark theme (TODO 11)

Recover the WorkBuddy 5.8.3 appearance page from REA evidence (appearance-DMmhwsxq.css + tokens-Df-i-zsO.css): 44 recovered .appearance-* rules, scoped light/dark tokens, original geometry (panel [232,40,638,640], preview 634x317, grid 634x218.391, cards 118.797x79.188) and the two REA-exported preview images with provenance sha256.

Wire the panel into SettingsDialog with only the requested light/dark cards, add scoped tokens to the settings shell so the dark theme no longer renders a white window with near-white text, and verify with scripts/verify-appearance-settings.cjs (21 assertions: geometry, instant switch, cross-window sync, persistence, dark/light surface sampling with contrast >= 4.5, no renderer errors). Update the legacy nav/account/desktop appearance verifiers to the new .appearance-card selectors.

src/renderer/src/components/AppearanceSettingsPanel.tsx

@@ -0,0 +1,62 @@
+/**
+ * 设置 → 外观：WorkBuddy 原版外观页的 1:1 复刻。
+ * 用户限定范围（TODO 11）：只保留「浅色 / 深色」两张主题卡，原版的其它主题（有风、经典 QQ、
+ * 和平精英激战金秋、同行、涟漪、伙伴）与「敬请期待」占位不接入，也不臆造。
+ *
+ * REA 依据（WorkBuddy 5.8.3，设置窗口 900×680）：
+ * - ev_dee8f184f6d8de34338f454e3a2588c26e2621dbc29c07c65337c475a243a6a0：外观页最终浅色态
+ * - ev_24ab58532d4ece0d79f35c8c7d4cb14f5611a7405cdf747c4698e6184bea7d99：外观页深色态（含 appearance-DMmhwsxq.css）
+ * - ev_ff4f073ea843a5f444244393b3e190ccb1803bfec2b32afbfb4edfed9cc7bbc7 / ev_fa67fddbb3dc00dde1609ef8e72d448e586066b74949f97634e1dbd0921599dc：主题切换后的稳定态
+ * 原版实测几何：`.appearance-panel` [232,40,638,640]、`.appearance-preview` [236,40,634,317]、
+ * 预览图 [308.906,86.281,488.172,270.719]（radius 8px 8px 0 0）、有效期徽标「永久有效」[806,48,56,20]、
+ * 列表标题「全部主题」[236,381,56,20]、网格 [236,413,634,218.391]（gap 12px 8px、padding 4px 4px 0）、
+ * 卡片 [x,417,118.797,79.188]、名称 [x,500.188,118.797,18]。
+ * 文案、选中描边与预览图内容读自 REA 帧；样式取自 REA 回收的 appearance-DMmhwsxq.css（见
+ * source-appearance-panel-recovered.css）。
+ */
+import lightPreview from './appearance-assets/workbuddy-appearance-light.png'
+import darkPreview from './appearance-assets/workbuddy-appearance-dark.png'
+import './source-appearance-panel.css'
+
+export type AppearanceTheme = 'light' | 'dark'
+
+const THEMES: ReadonlyArray<{ value: AppearanceTheme; label: string }> = [
+  { value: 'light', label: '浅色' },
+  { value: 'dark', label: '深色' }
+]
+
+export interface AppearanceSettingsPanelProps {
+  theme: AppearanceTheme
+  onThemeChange(theme: AppearanceTheme): void
+}
+
+export default function AppearanceSettingsPanel({ theme, onThemeChange }: AppearanceSettingsPanelProps): React.JSX.Element {
+  return (
+    <div className="appearance-panel">
+      <div className="appearance-panel__body">
+        <div className="appearance-layout">
+          <div className="appearance-preview">
+            {/* 原版 IMG 的 alt 为「效果预览」（REA ev_c0b1dacb… / ev_43c82492… 的 selected_node.attributes.alt）。 */}
+            <img className="appearance-preview__image" src={theme === 'dark' ? darkPreview : lightPreview} alt="效果预览" />
+            <span className="appearance-badge appearance-badge--validity">永久有效</span>
+          </div>
+          <div className="appearance-list__header">
+            <span className="appearance-list__title">全部主题</span>
+          </div>
+          <div className="appearance-list">
+            <div className="appearance-card-grid">
+              {THEMES.map((item) => (
+                <div className="appearance-card-cell" key={item.value}>
+                  <button type="button" aria-label={item.label} aria-pressed={theme === item.value}
+                    className={`appearance-card appearance-card--${item.value}${theme === item.value ? ' appearance-card--selected' : ''}`}
+                    onClick={() => onThemeChange(item.value)} />
+                  <span className="appearance-card__name">{item.label}</span>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

src/renderer/src/components/SettingsDialog.tsx

@@ -2,6 +2,7 @@ import { useEffect, useState } from 'react'
 import { useSettingsStore } from '../stores/settings'
 import ModelSettingsPanel from './ModelSettingsPanel'
 import GeneralSettingsPanel from './GeneralSettingsPanel'
+import AppearanceSettingsPanel from './AppearanceSettingsPanel'
 import SourceSettingsNavigation from './SourceSettingsNavigation'
 import { useSharedTheme } from '../useSharedTheme'
 import { SOURCE_WINDOWS_SETTINGS_TABS } from './SourceSettingsNavigation'
@@ -59,7 +60,7 @@ export default function SettingsDialog({ theme, onThemeChange, onClose, nativeWi
       {section === 'settings' && <GeneralSettingsPanel />}
       {section === 'model' && <ModelSettingsPanel models={settings.models} createRequest={createRequest} onCreateHandled={() => setCreateRequest(0)} onSave={settings.saveModel} onDelete={settings.deleteModel} onTest={(input) => window.ycode.models.test(input)} />}
       {section === 'workspace' && <div className="settings-window-panel"><h2>工作空间</h2>{settings.workspaces.map((space) => <button className="btn" key={space.id} title={space.root} onClick={() => void window.ycode.workspace.open(space.id).catch((error) => setError(String(error.message ?? error)))}>{space.name}</button>)}<button className="btn" onClick={() => void settings.attachWorkspace().catch((error) => setError(String(error.message ?? error)))}>打开已有文件夹</button></div>}
-      {section === 'appearance' && <div className="settings-window-panel"><h2>外观</h2><div className="segmented">{(['light', 'dark'] as const).map((value) => <button key={value} className="segmented__item" data-active={theme === value} onClick={() => onThemeChange(value)}>{value === 'light' ? '浅色' : '深色'}</button>)}</div></div>}
+      {section === 'appearance' && <AppearanceSettingsPanel theme={theme} onThemeChange={onThemeChange} />}
       {section === 'about' && <div className="settings-window-panel"><h2>YCode</h2><p>{settings.appInfo?.version}</p></div>}
     </div></div>
   </section>

src/renderer/src/components/appearance-assets/provenance.json

@@ -0,0 +1,28 @@
+{
+  "light": {
+    "file": "workbuddy-appearance-light.png",
+    "evidenceId": "ev_c0b1dacb5fa65c88f32c2f600f0a7a6731b05e58f88b74677924a53899b17ff7",
+    "sha256": "0b1f24f382c53fa6d3b364bf89d0bbe62b4c6c403dc5a6263c9c5b7fcec7f925",
+    "bytes": 113024,
+    "pixelSize": [
+      1260,
+      840
+    ],
+    "source": "WorkBuddy 5.8.3 renderer asset preview-light-*.png (via REA media_selectors)",
+    "selector": ".appearance-preview__image",
+    "alt": "效果预览"
+  },
+  "dark": {
+    "file": "workbuddy-appearance-dark.png",
+    "evidenceId": "ev_43c82492b3154ca67bcccc0bfb54694d1e4d06e0baf72560e49355747b1ad3f7",
+    "sha256": "ca133c7200b03a49170658e9661f4b64d8ecdf30f8c6395b7f07dc25eff653b6",
+    "bytes": 109347,
+    "pixelSize": [
+      1260,
+      840
+    ],
+    "source": "WorkBuddy 5.8.3 renderer asset preview-dark-*.png (via REA media_selectors)",
+    "selector": ".appearance-preview__image",
+    "alt": "效果预览"
+  }
+}

src/renderer/src/components/settings-shell-source.css

@@ -1,4 +1,6 @@
-/* REA ev_40da6df0424193923bae64a8ccb6fca97ea67813d7de671986d4d7e154b848c1; settings-window CSS sha256=8036657ec27f8948c6bad60c835d62469e958db4a5b9c25e22e5a9e60c0ea986; contexts sha256=50cbd673f7f35fc7f966bdddc6c9f5677fdfe944cb904888d214619fca259380. */
+/* REA ev_40da6df0424193923bae64a8ccb6fca97ea67813d7de671986d4d7e154b848c1; settings-window CSS sha256=8036657ec27f8948c6bad60c835d62469e958db4a5b9c25e22e5a9e60c0ea986; contexts sha256=50cbd673f7f35fc7f966bdddc6c9f5677fdfe944cb904888d214619fca259380; tokens sha256=13f2bf82c96e5167a7d7098e36950c6c22c475b3337dbb8bb29ad2fe79cde696. */
 .settings-modal-overlay{z-index:1000;animation:fadeIn var(--wb-motion-duration-fast) var(--wb-motion-easing-standard);background:0 0;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.settings-modal-overlay--appearance{background:0 0!important}.settings-modal{--cb-settings-card-background:color-mix(in srgb, var(--cb-vscode-editor-background,#1e1e1e) 96%, #64748b 4%);--cb-settings-card-background-strong:color-mix(in srgb, var(--cb-vscode-editor-background,#1e1e1e) 92%, #64748b 8%);--cb-settings-dialog-background:var(--wb-bg-secondary);--cb-settings-card-border:var(--wb-color-border-primary);background:var(--wb-bg-secondary);border-radius:var(--wb-radius-4xl);width:880px;max-width:92vw;height:720px;max-height:88vh;animation:slideUp var(--wb-motion-duration-base) var(--wb-motion-easing-emphasized);border:none;display:flex;overflow:hidden;box-shadow:0 16px 40px #0000003d,0 8px 32px #00000014}.settings-modal__nav{width:200px;padding:var(--wb-spacing-9) var(--wb-spacing-4) var(--wb-spacing-4);align-items:flex-start;gap:var(--wb-spacing-1);background:var(--wb-bg-secondary);user-select:none;-webkit-app-region:no-drag;scrollbar-width:thin;scrollbar-color:transparent transparent;border-right:none;flex-direction:column;flex-shrink:0;min-height:0;display:flex;overflow-y:auto}.settings-modal__nav:hover{scrollbar-color:var(--wb-scrollbar-thumb-bg) transparent}.settings-modal__header{padding:var(--wb-spacing-9) 20px 16px 16px;user-select:none;-webkit-app-region:no-drag;flex-shrink:0;justify-content:space-between;align-items:center;display:flex}.settings-modal__header-left{align-items:center;gap:var(--wb-spacing-2);min-width:0;display:flex}.settings-modal__header-right{align-items:center;gap:var(--wb-spacing-3);flex-shrink:0;display:flex}.settings-modal__header-extra{-webkit-app-region:no-drag;align-items:center;display:flex}.settings-modal__back{-webkit-app-region:no-drag}.settings-modal__back.wb-button{width:var(--wb-icon-size-lg);height:var(--wb-icon-size-lg);border-radius:6px}.settings-modal__back.wb-button .wb-button__icon{width:var(--wb-icon-size-lg);height:var(--wb-icon-size-lg)}.settings-modal__back.wb-button .wb-button__icon svg{fill:none}.settings-modal__title{color:var(--wb-color-text-primary,#000000e6);font-family:PingFang SC;font-size:16px;font-style:normal;font-weight:500;line-height:24px}.settings-modal__close{-webkit-app-region:no-drag}.settings-modal__close.wb-button{width:var(--wb-icon-size-lg);height:var(--wb-icon-size-lg);color:var(--wb-color-text-secondary,#0009);border-radius:6px;flex-shrink:0}.settings-modal__close.wb-button .wb-button__icon{width:var(--wb-icon-size-lg);height:var(--wb-icon-size-lg)}.settings-modal__content{background:var(--wb-bg-secondary);flex-direction:column;flex:1;display:flex;position:relative;overflow:hidden}.settings-modal__panel{padding:0 var(--wb-spacing-6) var(--wb-spacing-6) var(--wb-spacing-3);scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:transparent transparent;flex:1;min-height:0;overflow-y:auto}.settings-modal__panel::-webkit-scrollbar{width:4px}.settings-modal__panel::-webkit-scrollbar-track{background:0 0}.settings-modal__panel::-webkit-scrollbar-thumb{border-radius:var(--wb-radius-full);background:0 0}.settings-modal__panel:hover::-webkit-scrollbar-thumb{background:var(--wb-scrollbar-thumb)}.settings-modal__panel:hover::-webkit-scrollbar-thumb:hover{background:var(--wb-scrollbar-thumb-hover)}.settings-modal__panel:hover{scrollbar-color:var(--wb-scrollbar-thumb) transparent}.settings-modal__panel .wb-switch__track{--settings-switch-pin-bg:var(--wb-switch-track-bg);--settings-switch-pin-border:transparent;animation:settings-panel-switch-track-paint var(--wb-motion-duration-fast,.15s)}.settings-modal__panel .wb-switch__thumb{--settings-switch-pin-transform:none;animation:settings-panel-switch-thumb-paint var(--wb-motion-duration-fast,.15s)}.settings-modal__panel .wb-switch__input:checked+.wb-switch__track{--settings-switch-pin-bg:var(--wb-switch-track-bg-checked);--settings-switch-pin-border:var(--wb-switch-track-border-color-checked)}.settings-modal__panel .wb-switch__input:checked+.wb-switch__track .wb-switch__thumb{--settings-switch-pin-transform:translateX(var(--wb-switch-thumb-translate))}.settings-modal__panel .wb-switch--danger .wb-switch__input:checked+.wb-switch__track{--settings-switch-pin-bg:var(--wb-switch-track-bg-danger);--settings-switch-pin-border:var(--wb-switch-track-border-color-danger)}.settings-modal__panel .wb-switch--small .wb-switch__input:checked+.wb-switch__track .wb-switch__thumb{--settings-switch-pin-transform:translateX(var(--wb-switch-thumb-translate-small))}.settings-modal__panel .wb-switch--large .wb-switch__input:checked+.wb-switch__track .wb-switch__thumb{--settings-switch-pin-transform:translateX(var(--wb-switch-thumb-translate-large))}.settings-modal__panel .wb-switch:has(.wb-switch__input:disabled) .wb-switch__track{--settings-switch-pin-bg:var(--wb-switch-track-bg-disabled)}.settings-modLine truncated
 .settings-window-root{background:var(--wb-bg-secondary,var(--wb-color-bg-primary,#fff));color:var(--wb-color-text-primary,#1f2329);flex-direction:column;width:100vw;height:100vh;display:flex;overflow:hidden}.settings-window-root .settings-modal--window{box-shadow:none;border-radius:0;flex:1;width:100vw;max-width:none;height:auto;max-height:none}.settings-window-root .settings-modal--window .settings-modal__nav{margin:0 12px 12px;padding:8px 0 0}.settings-window-root .settings-modal__header{-webkit-app-region:drag}.settings-window-root .settings-modal__header button,.settings-window-root .settings-modal__nav,.settings-window-root .settings-modal__panel{-webkit-app-region:no-drag}.settings-window-chrome{-webkit-app-region:drag;user-select:none;flex:0 0 32px;align-items:center;min-height:32px;padding:0 8px;display:flex}.settings-window-chrome--windows{justify-content:flex-end}.settings-window-close{-webkit-app-region:no-drag;border-radius:var(--wb-radius-2,6px);color:var(--wb-color-text-secondary,#646a73);cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;width:24px;height:24px;padding:0;display:inline-flex}.settings-window-close:hover{background:var(--wb-color-fill-hover,#0000000f);color:var(--wb-color-text-primary,#1f2329)}.settings-window-close:active{background:var(--wb-color-fill-active,#0000001a)}.settings-window-loading{background:var(--wb-bg-secondary,var(--wb-color-bg-primary,#fff));flex:1;min-height:0;padding:20px 8px;display:flex}.settings-window-loading__nav{box-sizing:border-box;flex-direction:column;flex:0 0 200px;gap:8px;padding:0 12px;display:flex}.settings-window-loading__content{box-sizing:border-box;flex-direction:column;flex:1;gap:16px;min-width:0;padding:0 12px;display:flex}.settings-window-loading__line,.settings-window-loading__card{background:var(--wb-color-fill-secondary,#0000000e);border-radius:var(--wb-radius-2,6px);animation:1.2s ease-in-out infinite alternate settings-window-loading-pulse}.settings-window-loading__line{width:88%;height:26px}.settings-window-loading__line:first-child{width:42%;height:26px;margin-bottom:8px}.settings-window-loading__nav .settings-window-loading__line:first-child{width:42%;height:26px;margin-bottom:10px}.settings-window-loading__card{width:100%;height:72px}@keyframes settings-window-loading-pulse{0%{opacity:.55}to{opacity:1}}@media (prefers-reduced-motion:reduce){.settings-window-loading__line,.settings-window-loading__card{animation:none}}[data-theme=dark] .settings-window-chrome,body.vscode-dark .settings-window-chrome,.vscode-dark .settings-window-chrome,body.dark .settings-window-chrome,.dark .settings-window-chrome{background:var(--wb-bg-modal)}.settings-window-subpage-header{-webkit-app-region:no-drag;align-items:center;gap:var(--wb-spacing-2,4px);padding:var(--wb-spacing-3,8px) var(--wb-spacing-5,16px);border-bottom:1px solid var(--wb-border-subtle,#00000014);flex:none;display:flex}.settings-window-subpage-header__back.wb-button--small .wb-button__icon{width:var(--wb-icon-size-lg);height:var(--wb-icon-size-lg)}.settings-window-subpage-header__title{text-overflow:ellipsis;white-space:nowrap;min-width:0;color:var(--wb-color-text-primary,#1f2329);font-size:var(--wb-font-body-size,14px);font-weight:var(--wb-font-weight-500,500);flex:1;overflow:hidden}.settings-window-subpage-header__extra{-webkit-app-region:no-drag;margin-left:auto}.settings-window-panel{color:var(--wb-color-text-secondary,#646a73);flex-direction:column;align-items:flex-start;gap:12px;max-width:520px;padding:24px;display:flex}.settings-window-panel h2{color:var(--wb-color-text-primary,#1f2329);margin:0;font-size:20px}.settings-window-panel p{margin:0;font-size:14px;line-height:1.6}[data-theme=dark] .settings-window-root{--wb-color-text-primary:#f2f3f5;--wb-color-text-secondary:#a6a8ad}
 
+.settings-window-root,.settings-modal{--wb-motion-duration-fast:.15s;--wb-motion-easing-standard:cubic-bezier(.4, 0, .2, 1);--wb-bg-secondary:var(--wb-color-bg-secondary-hover-active);--wb-color-border-primary:var(--wb-palette-gray-5);--wb-radius-4xl:24px;--wb-motion-duration-base:.2s;--wb-motion-easing-emphasized:cubic-bezier(.2, 0, 0, 1);--wb-spacing-9:40px;--wb-spacing-4:12px;--wb-spacing-1:2px;--wb-scrollbar-thumb-bg:#0000001f;--wb-spacing-2:4px;--wb-spacing-3:8px;--wb-icon-size-lg:var(--wb-size-5);--wb-color-text-primary:var(--wb-palette-black-100);--wb-color-text-secondary:var(--wb-palette-black-70);--wb-spacing-6:20px;--wb-radius-full:9999px;--wb-scrollbar-thumb:var(--wb-palette-black-20);--wb-scrollbar-thumb-hover:var(--wb-palette-black-30);--wb-switch-track-bg:var(--wb-palette-gray-5);--wb-switch-track-bg-checked:var(--wb-brand-primary);--wb-switch-track-border-color-checked:var(--wb-brand-primary);--wb-switch-thumb-translate:8px;--wb-switch-track-bg-danger:var(--wb-palette-red-9);--wb-switch-track-border-color-danger:var(--wb-palette-red-9);--wb-switch-thumb-translate-small:8px;--wb-switch-thumb-translate-large:12px;--wb-switch-track-bg-disabled:var(--wb-color-bg-primary-default);--wb-switch-track-bg-checked-disabled:var(--wb-color-text-brand-disabled);--wb-spacing-5:16px;--wb-color-bg-primary-default:var(--wb-palette-gray-3);--wb-bg-modal:var(--wb-palette-white-100);--wb-color-text-tertiary:var(--wb-palette-black-50);--wb-font-caption-size:var(--wb-font-size-3);--wb-font-caption-line-height:var(--wb-font-line-height-4-2);--wb-radius-lg:8px;--wb-font-body-size:var(--wb-font-size-5);--wb-font-body-line-height:var(--wb-font-line-height-5-2);--wb-todo-menu-bg-hover:var(--wb-palette-gray-4);--wb-color-bg-primary-hover:var(--wb-palette-gray-4);--wb-dropdown-item-bg-hover:var(--wb-color-palette-gray-3,#f2f2f2);--wb-icon-size-md:var(--wb-size-4);--wb-border-subtle:var(--wb-palette-gray-3);--wb-font-weight-500:500;--wb-color-bg-secondary-hover-active:var(--wb-palette-gray-2);--wb-palette-gray-5:#e6e6e6;--wb-size-5:20px;--wb-palette-black-100:#000;--wb-palette-black-70:#000000b3;--wb-palette-black-20:#0003;--wb-palette-black-30:#0000004d;--wb-brand-primary:var(--wb-palette-brand-8);--wb-palette-red-9:#b42c3f;--wb-color-text-brand-disabled:var(--wb-palette-brand-3);--wb-palette-gray-3:#f2f2f2;--wb-palette-white-100:#fff;--wb-palette-black-50:#00000080;--wb-font-size-3:12px;--wb-font-line-height-4-2:18px;--wb-font-size-5:14px;--wb-font-line-height-5-2:22px;--wb-palette-gray-4:#ebebeb;--wb-size-4:16px;--wb-palette-gray-2:#f7f7f7;--wb-palette-brand-8:#00c29a;--wb-palette-brand-3:#9fe8d9}
+:root[data-theme=dark] .settings-window-root,:root[data-theme=dark] .settings-modal{--wb-bg-secondary:var(--wb-palette-gray-2);--wb-color-border-primary:#262626;--wb-scrollbar-thumb-bg:#ffffff1f;--wb-color-text-primary:#fff;--wb-color-text-secondary:#ffffffa6;--wb-scrollbar-thumb:var(--wb-palette-white-20);--wb-scrollbar-thumb-hover:var(--wb-palette-white-30);--wb-switch-track-bg:var(--wb-bg-elevated);--wb-switch-track-bg-checked:var(--wb-brand-primary);--wb-switch-track-border-color-checked:var(--wb-brand-primary);--wb-switch-track-bg-danger:var(--wb-palette-red-9);--wb-switch-track-border-color-danger:var(--wb-palette-red-9);--wb-switch-track-bg-disabled:var(--wb-palette-gray-5);--wb-switch-track-bg-checked-disabled:var(--wb-palette-brand-4);--wb-color-bg-primary-default:var(--wb-palette-gray-3);--wb-bg-modal:var(--wb-palette-gray-1);--wb-color-text-tertiary:#ffffff80;--wb-todo-menu-bg-hover:color-mix(in srgb, var(--wb-palette-white-100) 8%, transparent);--wb-color-bg-primary-hover:var(--wb-palette-gray-4);--wb-dropdown-item-bg-hover:#2e2e2e;--wb-border-subtle:color-mix(in srgb, var(--wb-palette-white-100) 6%, transparent);--wb-color-bg-secondary-hover-active:var(--wb-palette-gray-2);--wb-palette-gray-5:#3a3a3a;--wb-palette-black-100:#000;--wb-palette-black-70:#000000b3;--wb-palette-black-20:#0003;--wb-palette-black-30:#0000004d;--wb-brand-primary:var(--wb-palette-brand-7);--wb-palette-red-9:#dc4258;--wb-color-text-brand-disabled:#3dd9b659;--wb-palette-gray-3:#1f1f1f;--wb-palette-white-100:#fff;--wb-palette-black-50:#00000080;--wb-palette-gray-4:#242424;--wb-palette-gray-2:#292929;--wb-palette-brand-8:#4cf0ce;--wb-palette-brand-3:#185f51}

src/renderer/src/components/source-appearance-panel-recovered.css

@@ -0,0 +1,4 @@
+/* REA ev_24ab58532d4ece0d79f35c8c7d4cb14f5611a7405cdf747c4698e6184bea7d99; appearance-DMmhwsxq.css sha256=af58cb3134d3e6c474424f6d718daa8f5be0c6e29d40aa5f9f80c14b3ffbbbd2; tokens sha256=13f2bf82c96e5167a7d7098e36950c6c22c475b3337dbb8bb29ad2fe79cde696. */
+.appearance-panel{box-sizing:border-box;height:calc(100% + 20px);color:var(--wb-text-strong);flex-direction:column;margin-bottom:-20px;display:flex;overflow:hidden}.appearance-panel--loading,.appearance-panel--empty{color:var(--wb-text-medium);justify-content:center;align-items:center;font-size:13px}.appearance-panel__body{border-top-left-radius:12px;border-top-right-radius:12px;flex-direction:column;flex:1;min-height:0;margin-left:4px;display:flex}.appearance-layout{flex-direction:column;flex:1;min-height:0;display:flex}.appearance-preview{aspect-ratio:2;background:linear-gradient(to bottom, var(--wb-todo-menu-bg-active), color-mix(in srgb, var(--wb-todo-menu-bg-active) 70%, transparent));border-radius:12px;flex-shrink:0;justify-content:center;width:100%;max-height:72%;padding-top:7.3%;display:flex;position:relative;overflow:hidden}.appearance-preview__image{object-fit:cover;object-position:top;border-radius:8px 8px 0 0;width:77%;box-shadow:0 4px 16px #0000001f}.appearance-preview__image--empty{background:var(--wb-bg-primary)}.appearance-preview__loading{background:color-mix(in srgb, var(--wb-bg-primary) 35%, transparent);cursor:progress;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.appearance-list__header{flex-shrink:0;align-items:baseline;gap:8px;padding-top:24px;padding-bottom:12px;display:flex}.appearance-list__title{color:var(--wb-text-strong);font-size:14px;font-weight:600}.appearance-list__desc{color:var(--wb-text-medium);font-size:12px}.appearance-list{scrollbar-width:thin;scrollbar-color:var(--wb-border-default) transparent;flex:1;min-height:0;overflow-y:auto}.appearance-list::-webkit-scrollbar{width:4px}.appearance-list::-webkit-scrollbar-track{background:0 0}.appearance-list::-webkit-scrollbar-thumb{background:var(--wb-border-default);border-radius:2px}.appearance-panel__load-error{border:1px solid var(--wb-border-default);background:var(--wb-bg-card);color:var(--wb-text-medium);border-radius:8px;justify-content:space-between;align-items:center;gap:12px;padding:8px 12px;font-size:13px;display:flex}.appearance-card-grid{grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:12px 8px;padding:4px 4px 0;display:grid}.appearance-card-cell{flex-direction:column;gap:4px;min-width:110px;max-width:166px;display:flex}.appearance-card{aspect-ratio:3/2;cursor:pointer;box-sizing:border-box;background-position:50%;background-size:cover;border:none;border-radius:10px;width:100%;padding:0;transition:outline-color .15s,box-shadow .15s;position:relative;overflow:hidden}.appearance-card--light{background-color:#ebebeb;box-shadow:inset 0 0 0 1px #e6e8ed}.appearance-card--dark{background-color:#000000bf}.appearance-card--trial{cursor:pointer}.appearance-card:not(.appearance-card--selected):hover{box-shadow:0 2px 8px #0000001f}.appearance-card--light:not(.appearance-card--selected):hover{box-shadow:inset 0 0 0 1px #e6e8ed,0 2px 8px #0000001f}.appearance-card--selected{outline:2px solid var(--wb-color-text-solid,#000);outline-offset:2px}.appearance-card--coming-soon{cursor:default;outline-offset:-1px;background-color:#ebebeb;justify-content:center;align-items:center;display:flex}.appearance-card--coming-soon:hover{box-shadow:none}.appearance-card__name{color:var(--wb-text-strong);text-align:center;font-size:12px;font-weight:400;line-height:18px}.appearance-card--selected~.appearance-card__name{font-weight:600}.appearance-card__coming-soon-text{color:#0000004d;font-size:12px}[data-theme=dark] .appearance-card--selected{outline-color:var(--wb-color-text-on-bg-default,#fff)}.appearance-badge{border-radius:100px;align-items:center;height:18px;padding:0 8px;font-family:PingFang SC,-apple-system,BlinkMacSystemFont,sans-serif;font-size:10px;font-weight:500;line-height:18px;display:inline-flex}.appearance-badge--free,.appearance-badge--pro{color:#000000b3;background:#fffc}.appearance-badge--advanced{color:#fff;background:#0009}.appearance-badge--ultimate{color:#ffd989;background:#000000b3}.appearance-badge--validity{color:#fff;background:#0006;height:20px;font-weight:400}.appearance-preview .appearance-badge--validity{position:absolute;top:8px;right:8px}.appearance-card .appearance-badge{position:absolute;top:6px;right:6px}.appearance-upgrade-bar{background:var(--wb-bg-card);border-radius:12px 12px 0 0;flex-direction:column;flex-shrink:0;gap:4px;padding:24px;animation:.2s appearance-upgrade-bar-in;display:flex;box-shadow:0 -4px 32px #00000014}.appearance-upgrade-bar__head{align-items:center;gap:8px;display:flex}.appearance-upgrade-bar__title{color:var(--wb-text-strong);font-size:16px;font-weight:600;line-height:21px}.appearance-upgrade-bar__actions{justify-content:space-between;align-items:center;gap:12px;display:flex}.appearance-upgrade-bar__desc{color:var(--wb-text-weak);font-size:14px;line-height:22px}.appearance-upgrade-bar__btn{border-radius:8px;flex-shrink:0;height:32px;padding:0 16px;font-size:14px;font-weight:600}
+.appearance-panel{--wb-text-strong:var(--wb-color-text-primary);--wb-text-medium:var(--wb-color-text-secondary);--wb-todo-menu-bg-active:var(--wb-palette-gray-5);--wb-bg-primary:var(--wb-palette-white-100);--wb-border-default:color-mix(in srgb, var(--wb-palette-black-100) 8%, transparent);--wb-bg-card:var(--wb-palette-white-100);--wb-color-text-solid:var(--wb-palette-black-100);--wb-text-weak:var(--wb-color-text-tertiary);--wb-color-text-primary:var(--wb-palette-black-100);--wb-color-text-secondary:var(--wb-palette-black-70);--wb-palette-gray-5:#e6e6e6;--wb-palette-white-100:#fff;--wb-palette-black-100:#000;--wb-color-text-tertiary:var(--wb-palette-black-50);--wb-palette-black-70:#000000b3;--wb-palette-black-50:#00000080}
+:root[data-theme=dark] .appearance-panel{--wb-text-strong:var(--wb-color-text-primary);--wb-text-medium:var(--wb-color-text-secondary);--wb-todo-menu-bg-active:color-mix(in srgb, var(--wb-palette-white-100) 12%, transparent);--wb-bg-primary:var(--wb-palette-gray-3);--wb-border-default:color-mix(in srgb, var(--wb-palette-white-100) 14%, transparent);--wb-bg-card:#242424;--wb-color-text-solid:var(--wb-palette-white-100);--wb-text-weak:var(--wb-color-text-tertiary);--wb-color-text-primary:#fff;--wb-color-text-secondary:#ffffffa6;--wb-palette-gray-5:#3a3a3a;--wb-palette-white-100:#fff;--wb-palette-black-100:#000;--wb-color-text-tertiary:#ffffff80;--wb-palette-black-70:#000000b3;--wb-palette-black-50:#00000080}

src/renderer/src/components/source-appearance-panel.css

@@ -0,0 +1,19 @@
+@import './source-appearance-panel-recovered.css';
+
+/*
+ * 本地适配（与 REA 回收的原版规则一一对应）：
+ *
+ * 1. 原版深色选择器是 html 上的 `.dark` / `[data-cb-theme=dark]`（REA 证据里 html.class 从
+ *    `light cb-light vscode-light` 变为 `dark cb-dark vscode-dark`），YCode 用 `[data-theme=dark]`，
+ *    recover-appearance-panel.mjs 已在投影时改写。
+ * 2. 原版把整套 `--wb-*` 设计变量放在全局 :root，YCode 按既有约定收敛到面板作用域（见恢复脚本）。
+ * 3. 原版外观页只随主题切换换预览图；YCode 只提供 浅色/深色 两张卡，网格仍用原版的
+ *    repeat(auto-fill, minmax(110px, 1fr))，因此两张卡与首屏位置一致。
+ * 4. 原版 `.appearance-panel{height:calc(100% + 20px);margin-bottom:-20px}` 是刻意的：
+ *    它抵消 `.settings-modal__panel` 的 20px 底部内边距，让预览卡贴到窗口底边（原版实测
+ *    面板高 640 = 内容盒 620 + 20）。这里保持原值，不做本地覆盖。
+ * 5. 恢复的 appearance-DMmhwsxq.css 只给 `.appearance-list__title` 设了字号/字重，没有行高；
+ *    原版该标题的行盒是 20px（标题 bounds 20 高，表头 24+20+12 = 56 高，见 REA ev_dee8f184…）。
+ *    YCode 继承的行高是 22px（会把表头撑成 58），因此按原版实测补一行 20px 行高。
+ */
+.appearance-list__title { line-height: 20px }