From 039c810f5c7ca97d9ec9b207d7dfa6bd0bc2a6d8 Mon Sep 17 00:00:00 2001
From: Danila Poyarkov <dev@dannote.net>
Date: Fri, 4 Sep 2026 18:32:33 +0300
Subject: [PATCH] fix(storybook): synchronize chat light theme

- Drive the app theme store from Storybook's theme toolbar\n- Use OpenPencil surface tokens for readable inline code in light mode\n- Verify light Shiki and inline-code contrast in the visual workshop
---
 .storybook/preview.ts                       | 13 ++++++++++++-
 src/components/chat/markdown/InlineCode.vue |  2 +-
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/.storybook/preview.ts b/.storybook/preview.ts
index ff0c7e217..c7068abc3 100644
--- a/.storybook/preview.ts
+++ b/.storybook/preview.ts
@@ -1,5 +1,8 @@
 import { withThemeByDataAttribute } from '@storybook/addon-themes'
 import type { Preview, Renderer } from '@storybook/vue3-vite'
+import { watch } from 'vue'
+
+import { useAppTheme } from '../src/app/shell/theme'
 
 import '../src/app.css'
 
@@ -13,8 +16,16 @@ const preview: Preview = {
       defaultTheme: 'dark',
       attributeName: 'data-theme'
     }),
-    (story) => ({
+    (story, context) => ({
       components: { story },
+      setup() {
+        const { setTheme } = useAppTheme()
+        watch(
+          () => context.globals.theme,
+          (theme) => setTheme(theme === 'light' ? 'light' : 'dark'),
+          { immediate: true }
+        )
+      },
       template:
         '<div class="min-h-screen bg-canvas p-8 text-surface [--vp-c-bg-alt:var(--color-panel-field)] [--vp-c-bg-soft:var(--color-panel)] [--vp-c-brand-1:var(--color-component)] [--vp-c-divider:var(--color-border)] [--vp-c-text-1:var(--color-surface)] [--vp-c-text-2:var(--color-muted)]"><story /></div>'
     })
diff --git a/src/components/chat/markdown/InlineCode.vue b/src/components/chat/markdown/InlineCode.vue
index e15ef90da..843caf9fb 100644
--- a/src/components/chat/markdown/InlineCode.vue
+++ b/src/components/chat/markdown/InlineCode.vue
@@ -7,7 +7,7 @@ const { node: _node } = defineProps<MarkdownComponentProps>()
 <template>
   <code
     data-stream-markdown="inline-code"
-    class="rounded bg-muted px-1 py-px font-mono text-[11px] leading-4 break-words whitespace-normal"
+    class="rounded bg-hover px-1 py-px font-mono text-[11px] leading-4 text-surface break-words whitespace-normal"
     dir="ltr"
   >
     <slot />