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

@@ -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>'
     })

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 />