11 主题与样式

11.1 UI 主题

app.config.ts 配置 Nuxt UI 主题色：

• primary: brand
• secondary: blue
• success: green
• warning: orange
• error: red
• info: blue
• neutral: gray

按钮和表单等基础控件优先使用 Nuxt UI，避免重复实现基础交互。

11.2 Tailwind CSS

页面布局、间距、颜色、响应式断点优先使用 Tailwind utility classes。公共样式或复杂组件样式再放入 app/assets/，避免全局选择器污染页面。

11.3 深色模式

应用背景已提供浅色和深色模式：

bg-white dark:bg-gray-900

新增颜色、边框和阴影时同时检查 dark 变体，确保文本对比度和交互状态可读。

11.4 响应式与 RTL

商城页面需要兼容桌面和移动 Web。使用 Tailwind 响应式前缀组织布局，不要通过固定宽度阻断小屏页面。阿拉伯语等 RTL 语言需要验证方向性属性、图标方向、弹层位置和商品网格。

11.5 主题开发建议

• 品牌色通过主题配置或设计变量统一管理。
• 金额、促销和库存状态使用语义化颜色。
• 图片容器明确比例和 object-fit，避免装修内容导致布局跳动。
• 交互组件保持键盘可访问性和可见 focus 状态。