diff --git a/.changeset/many-pandas-breathe.md b/.changeset/many-pandas-breathe.md
new file mode 100644
index 0000000000..3c747a3522
--- /dev/null
+++ b/.changeset/many-pandas-breathe.md
@@ -0,0 +1,5 @@
+---
+"@lynx-js/a2ui-reactlynx": patch
+---
+
+refactor theme styles
diff --git a/packages/genui/a2ui-playground/AGENTS.md b/packages/genui/a2ui-playground/AGENTS.md
index 9004b73d58..07753663ea 100644
--- a/packages/genui/a2ui-playground/AGENTS.md
+++ b/packages/genui/a2ui-playground/AGENTS.md
@@ -34,7 +34,7 @@ Web build has two entrypoints (see `rsbuild.config.ts`):
   reload when the init data changes.
 
 The control panel builds a `/render.html?...` URL with base64-encoded payload
-(`src/utils/renderUrl.ts`) and embeds it in an `<iframe>` (see `MobilePreview`).
+(`src/utils/renderUrl.ts`) and embeds it in an `<iframe>`(see `PreviewViewport.tsx`).
 
 ## Lynx App Architecture (What Runs Inside <lynx-view>)
 
diff --git a/packages/genui/a2ui-playground/lynx-src/a2ui/App.tsx b/packages/genui/a2ui-playground/lynx-src/a2ui/App.tsx
index bfbf3baea1..ab24e2e8a3 100644
--- a/packages/genui/a2ui-playground/lynx-src/a2ui/App.tsx
+++ b/packages/genui/a2ui-playground/lynx-src/a2ui/App.tsx
@@ -194,6 +194,8 @@ function normalizeInitDataLike(raw: unknown): InitData {
   const theme = obj.theme;
   if (theme === 'light' || theme === 'dark') {
     out.theme = theme;
+  } else if (theme === 'Dark' || theme === 'Light') {
+    out.theme = theme.toLowerCase() as Theme;
   }
 
   return out;
@@ -340,8 +342,9 @@ export function App() {
     [streamConfig.theme],
   );
   const themeClassName = theme === 'dark'
-    ? 'luna-dark a2ui-dark'
-    : 'luna-light a2ui-light';
+    ? 'luna-dark'
+    : 'luna-light';
+  const surfaceThemeClassName = theme === 'dark' ? ' a2ui-dark' : ' a2ui-light';
   const isPlaybackPaused = useMemo(
     () => effectiveData.playbackPaused === true,
     [effectiveData.playbackPaused],
@@ -485,16 +488,7 @@ export function App() {
           </view>
         )
         : (
-          <view
-            style={{
-              flex: 1,
-              minHeight: 0,
-              position: 'relative',
-              display: 'flex',
-              flexDirection: 'column',
-              gap: '12px',
-            }}
-          >
+          <view className='a2ui-root-container'>
             {!isInstantPreview && store === null && error === ''
               ? (
                 <view className='a2ui-loadingOverlay'>
@@ -518,7 +512,7 @@ export function App() {
                       void agentRef.current?.onAction(action);
                     }}
                     wrapSurface={(c) => (
-                      <view className={themeClassName}>{c}</view>
+                      <view className={surfaceThemeClassName}>{c}</view>
                     )}
                     renderFallback={() => (
                       <view style={{ padding: '12px' }}>
diff --git a/packages/genui/a2ui-playground/lynx-src/a2ui/index.css b/packages/genui/a2ui-playground/lynx-src/a2ui/index.css
index 13e5651ae0..7eff6c6304 100644
--- a/packages/genui/a2ui-playground/lynx-src/a2ui/index.css
+++ b/packages/genui/a2ui-playground/lynx-src/a2ui/index.css
@@ -8,7 +8,6 @@
 :root {
   display: flex;
   flex-direction: column;
-  padding: 10px;
   box-sizing: border-box;
   background-color: var(--canvas);
   color: var(--content);
@@ -17,6 +16,17 @@
 .page {
   width: 100%;
   height: 100%;
+  padding: 10px;
+  background-color: var(--canvas);
+}
+
+.a2ui-root-container {
+  flex: 1;
+  min-height: 0;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
   background-color: var(--canvas);
 }
 
@@ -43,49 +53,46 @@
   min-width: 120px;
   min-height: 44px;
   padding: 0 18px;
+  border: 1px solid var(--line);
   border-radius: 999px;
-  background: rgba(0, 0, 0, 0.55);
-  color: white;
+  background: var(--neutral-film);
+  color: var(--content-muted);
   font-size: 14px;
   font-weight: 600;
   line-height: 1.4;
 }
 
 /* Override A2UI tokens with Luna tokens for the playground preview. */
-.a2ui-light,
-.a2ui-dark {
-  --a2ui-color-background: var(--canvas);
-  --a2ui-color-on-background: var(--content);
-
-  --a2ui-color-surface: var(--paper);
-  --a2ui-color-on-surface: var(--content);
-
-  --a2ui-color-primary: var(--primary);
-  --a2ui-color-primary-light: var(--primary-2);
-  --a2ui-color-primary-dark: var(--primary-2);
-  --a2ui-color-primary-hover: var(--primary-2);
-  --a2ui-color-on-primary: var(--primary-content);
-
-  --a2ui-color-secondary: var(--secondary);
-  --a2ui-color-secondary-light: var(--secondary-2);
-  --a2ui-color-secondary-dark: var(--secondary-2);
-  --a2ui-color-secondary-hover: var(--secondary-2);
-  --a2ui-color-on-secondary: var(--secondary-content);
-
+:root, .a2ui-light, .a2ui-dark {
   --a2ui-border-radius: 0.25rem;
-  --a2ui-color-border: var(--line);
   --a2ui-border-width: 1px;
-  --a2ui-border: var(--a2ui-border-width) solid var(--a2ui-color-border);
+  --a2ui-border: 1px solid var(--line);
+
+  --a2ui-button-padding: 0.5rem 0.875rem;
+  --a2ui-button-margin: 0.25rem 0;
+  --a2ui-button-box-shadow: none;
+  --a2ui-button-font-weight: normal;
+  --a2ui-button-border: 1px solid var(--line);
+  --a2ui-button-border-radius: 2rem;
+  --a2ui-button-background: var(--paper);
+  --a2ui-button-foreground: var(--secondary-content);
+  --a2ui-button-primary-background: var(--primary);
+  --a2ui-button-primary-foreground: var(--primary-content);
 
   --a2ui-font-family-title: inherit;
   --a2ui-font-family-monospace: monospace;
-  --a2ui-color-input: var(--paper-clear);
-  --a2ui-color-on-input: var(--content);
+  --a2ui-icon-font-family: "Material Icons Round";
+  --a2ui-icon-size-sm: 1rem;
+  --a2ui-icon-size-md: 24px;
+  --a2ui-icon-size-lg: 32px;
+  --a2ui-icon-color: var(--content);
+  --a2ui-icon-color-primary: var(--primary);
+  --a2ui-icon-color-muted: var(--content-muted);
 
   --a2ui-grid-base: 0.5rem;
   --a2ui-spacing-xs: 0.125rem;
   --a2ui-spacing-s: 0.25rem;
-  --a2ui-spacing-m: var(--a2ui-grid-base);
+  --a2ui-spacing-m: 0.5rem;
   --a2ui-spacing-l: 1rem;
   --a2ui-spacing-xl: 2rem;
 
@@ -93,7 +100,7 @@
   --a2ui-font-scale: 1.2;
   --a2ui-font-size-xs: 0.6944444444rem;
   --a2ui-font-size-s: 0.8333333333rem;
-  --a2ui-font-size-m: var(--a2ui-font-size);
+  --a2ui-font-size-m: 1rem;
   --a2ui-font-size-l: 1.2rem;
   --a2ui-font-size-xl: 1.44rem;
   --a2ui-font-size-2xl: 1.728rem;
@@ -101,6 +108,23 @@
   --a2ui-line-height-headings: 1.2;
   --a2ui-line-height-body: 1.5;
 
+  --a2ui-color-background: var(--canvas);
+  --a2ui-color-on-background: var(--content);
+  --a2ui-color-surface: var(--paper);
+  --a2ui-color-on-surface: var(--content);
+  --a2ui-color-primary: var(--primary);
+  --a2ui-color-primary-light: var(--primary-2);
+  --a2ui-color-primary-dark: var(--primary-2);
+  --a2ui-color-primary-hover: var(--primary-2);
+  --a2ui-color-on-primary: var(--primary-content);
+  --a2ui-color-secondary: var(--secondary);
+  --a2ui-color-secondary-light: var(--secondary-2);
+  --a2ui-color-secondary-dark: var(--secondary-2);
+  --a2ui-color-secondary-hover: var(--secondary-2);
+  --a2ui-color-on-secondary: var(--secondary-content);
+  --a2ui-color-border: var(--line);
+  --a2ui-color-input: var(--paper-clear);
+  --a2ui-color-on-input: var(--content);
   --a2ui-color-background-ambient: var(--canvas-ambient);
   --a2ui-color-surface-muted: var(--neutral-film);
   --a2ui-color-surface-strong: var(--paper-clear);
@@ -111,5 +135,10 @@
   --a2ui-color-primary-content-muted: var(--primary-content-faded);
   --a2ui-color-overlay: var(--neutral-film);
 
-  --a2ui-button-border-radius: 2rem;
+  --a2ui-image-radius: 12px;
+  --a2ui-image-avatar-size: 24px;
+  --a2ui-image-header-size: 200px;
+  --a2ui-image-small-feature-size: 120px;
+  --a2ui-image-medium-feature-size: 240px;
+  --a2ui-image-large-feature-size: 400px;
 }
diff --git a/packages/genui/a2ui-playground/lynx.config.ts b/packages/genui/a2ui-playground/lynx.config.ts
index 6a750961d0..ac5c16ff6f 100644
--- a/packages/genui/a2ui-playground/lynx.config.ts
+++ b/packages/genui/a2ui-playground/lynx.config.ts
@@ -1,7 +1,7 @@
 // Copyright 2026 The Lynx Authors. All rights reserved.
 // Licensed under the Apache License Version 2.0 that can be found in the
 // LICENSE file in the root directory of this source tree.
-
+import { pluginLynxConfig } from '@lynx-js/config-rsbuild-plugin';
 import { pluginQRCode } from '@lynx-js/qrcode-rsbuild-plugin';
 import { pluginReactLynx } from '@lynx-js/react-rsbuild-plugin';
 import { defineConfig } from '@lynx-js/rspeedy';
@@ -18,6 +18,9 @@ export default defineConfig({
     pluginReactLynx({
       defaultDisplayLinear: false,
     }),
+    pluginLynxConfig({
+      enableCSSInlineVariables: true,
+    }),
   ],
   source: {
     entry: {
diff --git a/packages/genui/a2ui-playground/package.json b/packages/genui/a2ui-playground/package.json
index 3b82e93f07..6dd2e8883b 100644
--- a/packages/genui/a2ui-playground/package.json
+++ b/packages/genui/a2ui-playground/package.json
@@ -26,6 +26,7 @@
     "react-dom": "19.2.4"
   },
   "devDependencies": {
+    "@lynx-js/config-rsbuild-plugin": "workspace:*",
     "@lynx-js/qrcode-rsbuild-plugin": "workspace:*",
     "@lynx-js/react-rsbuild-plugin": "workspace:*",
     "@lynx-js/rspeedy": "workspace:*",
diff --git a/packages/genui/a2ui-playground/src/components/MobilePreview.tsx b/packages/genui/a2ui-playground/src/components/MobilePreview.tsx
deleted file mode 100644
index f22af51b0f..0000000000
--- a/packages/genui/a2ui-playground/src/components/MobilePreview.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-// Copyright 2026 The Lynx Authors. All rights reserved.
-// Licensed under the Apache License Version 2.0 that can be found in the
-// LICENSE file in the root directory of this source tree.
-import type { ComponentPropsWithoutRef, Ref } from 'react';
-
-interface MobilePreviewProps {
-  src: string;
-  iframeRef?: Ref<HTMLIFrameElement>;
-  onLoad?: ComponentPropsWithoutRef<'iframe'>['onLoad'];
-}
-
-export function MobilePreview(props: MobilePreviewProps) {
-  return (
-    <div className='phoneWrap'>
-      <div className='phoneFrame'>
-        <div className='phoneChrome'>
-          <div className='phoneCamera' />
-          <div className='phoneSpeaker' />
-        </div>
-        <div className='phoneScreen'>
-          <iframe
-            ref={props.iframeRef}
-            className='phoneIframe'
-            title='preview'
-            src={props.src}
-            onLoad={props.onLoad}
-          />
-        </div>
-        <div className='phoneHomeIndicator' />
-      </div>
-    </div>
-  );
-}
diff --git a/packages/genui/a2ui-playground/src/pages/DemosPage.css b/packages/genui/a2ui-playground/src/pages/DemosPage.css
index fcceaad512..10b42d9038 100644
--- a/packages/genui/a2ui-playground/src/pages/DemosPage.css
+++ b/packages/genui/a2ui-playground/src/pages/DemosPage.css
@@ -188,6 +188,10 @@
   text-transform: uppercase;
 }
 
+[data-theme="dark"] .exampleCardBadge {
+  background: transparent;
+}
+
 .detailSidebar {
   width: 280px;
 }
@@ -205,22 +209,20 @@
   gap: 8px;
   min-height: 34px;
   padding: 8px 14px;
-  border: 1px solid rgba(0, 0, 0, 0.08);
+  border: 1px solid var(--geist-border);
   border-radius: 999px;
-  background:
-    linear-gradient(
-      180deg,
-      rgba(255, 255, 255, 0.82),
-      rgba(255, 255, 255, 0.64)
-    ),
-    var(--geist-surface);
+  background: color-mix(
+    in srgb,
+    var(--geist-background) 82%,
+    var(--geist-surface)
+  );
   color: var(--geist-foreground);
   font-size: 13px;
   font-weight: 600;
   line-height: 1;
   letter-spacing: 0.01em;
   cursor: pointer;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
+  box-shadow: var(--geist-shadow-sm);
   transition:
     background var(--geist-transition),
     border-color var(--geist-transition),
@@ -230,15 +232,25 @@
 
 .detailBackButton:hover {
   border-color: var(--geist-border-hover);
-  background:
-    linear-gradient(
-      180deg,
-      rgba(255, 255, 255, 0.96),
-      rgba(255, 255, 255, 0.78)
-    ),
-    var(--geist-background);
+  background: var(--geist-background);
   transform: translateY(-1px);
-  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
+  box-shadow: var(--geist-shadow-md);
+}
+
+html[data-theme="dark"] .detailBackButton {
+  background: color-mix(
+    in srgb,
+    var(--geist-background) 72%,
+    var(--geist-surface)
+  );
+}
+
+html[data-theme="dark"] .detailBackButton:hover {
+  background: color-mix(
+    in srgb,
+    var(--geist-background) 60%,
+    var(--geist-surface)
+  );
 }
 
 .detailBackIcon {
diff --git a/packages/genui/a2ui-playground/src/pages/PlaybackPage.tsx b/packages/genui/a2ui-playground/src/pages/PlaybackPage.tsx
index 9bb3922fe3..6712bca956 100644
--- a/packages/genui/a2ui-playground/src/pages/PlaybackPage.tsx
+++ b/packages/genui/a2ui-playground/src/pages/PlaybackPage.tsx
@@ -12,6 +12,7 @@ import { useResizablePanels } from '../hooks/useResizablePanels.js';
 import { DEFAULT_A2UI_DEMO_URL } from '../utils/demoUrl.js';
 import type { Protocol } from '../utils/protocol.js';
 
+type Theme = 'light' | 'dark';
 type PlayState = 'idle' | 'playing' | 'paused' | 'done';
 type PlaybackControlAction = 'pause' | 'resume';
 type PlaybackProgressStatus = 'idle' | 'streaming' | 'paused' | 'done';
@@ -31,8 +32,8 @@ function formatChunk(msg: unknown): string {
   return JSON.stringify(msg, null, 2);
 }
 
-export function PlaybackPage(props: { protocol: Protocol }) {
-  const { protocol } = props;
+export function PlaybackPage(props: { protocol: Protocol; theme: Theme }) {
+  const { protocol, theme } = props;
 
   const [scenarioId, setScenarioId] = useState<string>(
     ALL_SCENARIOS[0]?.id ?? '',
@@ -41,9 +42,7 @@ export function PlaybackPage(props: { protocol: Protocol }) {
   const [speed, setSpeed] = useState(1);
   const [iframeKey, setIframeKey] = useState(0);
   const [deliveredCount, setDeliveredCount] = useState(0);
-  const streamTimerRef = useRef<ReturnType<typeof window.setTimeout> | null>(
-    null,
-  );
+  const streamTimerRef = useRef<number | null>(null);
 
   const iframeRef = useRef<HTMLIFrameElement | null>(null);
   const pendingSendRef = useRef<{ msgs: unknown[]; speed: number } | null>(
@@ -78,8 +77,9 @@ export function PlaybackPage(props: { protocol: Protocol }) {
     const url = new URL('render.html', base);
     url.searchParams.set('protocol', protocol.name);
     url.searchParams.set('demoUrl', DEFAULT_A2UI_DEMO_URL);
+    url.searchParams.set('theme', theme);
     return url.toString();
-  }, [protocol.name]);
+  }, [protocol.name, theme]);
 
   const sendToIframe = useCallback((
     msgs: unknown[],
@@ -94,11 +94,12 @@ export function PlaybackPage(props: { protocol: Protocol }) {
           messages: msgs,
           speed: spd,
           playbackMode: true,
+          theme,
         },
       },
       '*',
     );
-  }, []);
+  }, [theme]);
 
   const sendPlaybackControlToIframe = useCallback(
     (action: PlaybackControlAction) => {
diff --git a/packages/genui/a2ui-playground/src/styles.css b/packages/genui/a2ui-playground/src/styles.css
index 52c1f171a8..d26bf540dd 100644
--- a/packages/genui/a2ui-playground/src/styles.css
+++ b/packages/genui/a2ui-playground/src/styles.css
@@ -504,7 +504,6 @@ html[data-theme="dark"] .phoneNotch {
   position: relative;
   flex: 1;
   min-height: 0;
-  border-radius: 24px;
   overflow: hidden;
   background: var(--geist-background);
   box-shadow:
diff --git a/packages/genui/a2ui/src/react/A2UIRenderer.tsx b/packages/genui/a2ui/src/react/A2UIRenderer.tsx
index 052a4a83b8..6b255b58a3 100644
--- a/packages/genui/a2ui/src/react/A2UIRenderer.tsx
+++ b/packages/genui/a2ui/src/react/A2UIRenderer.tsx
@@ -36,11 +36,13 @@ function DefaultLoading(props: { id: string }) {
         width: '100%',
         minHeight: '20px',
         padding: '10px',
+        border: '1px solid var(--a2ui-color-border)',
+        borderRadius: 'var(--a2ui-border-radius)',
         backgroundColor: 'var(--a2ui-color-surface-muted)',
-        borderRadius: '6px',
+        color: 'var(--a2ui-color-text-muted)',
       }}
     >
-      <text style={{ color: '#666' }}>{content}</text>
+      <text style={{ color: 'inherit' }}>{content}</text>
     </view>
   );
 }
diff --git a/packages/genui/a2ui/styles/catalog/Text.css b/packages/genui/a2ui/styles/catalog/Text.css
index b218a63921..16cd0ae073 100644
--- a/packages/genui/a2ui/styles/catalog/Text.css
+++ b/packages/genui/a2ui/styles/catalog/Text.css
@@ -101,8 +101,7 @@
   flex-shrink: 0;
   font-size: var(--a2ui-font-size-xs);
   font-weight: bold;
-  color: var(--a2ui-color-text-subtle);
-  text-transform: uppercase;
+  color: var(--a2ui-color-text-muted);
   letter-spacing: 0.5px;
   line-height: var(--a2ui-line-height-body);
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index e4a8fa7758..1612dbf9d5 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -657,6 +657,9 @@ importers:
         specifier: 19.2.4
         version: 19.2.4(react@19.2.4)
     devDependencies:
+      '@lynx-js/config-rsbuild-plugin':
+        specifier: workspace:*
+        version: link:../../rspeedy/plugin-config
       '@lynx-js/qrcode-rsbuild-plugin':
         specifier: workspace:*
         version: link:../../rspeedy/plugin-qrcode