主题定制

品牌信息

修改 lib/shared.ts：

export const appName = '你的文档站';
export const appDescription = '你的站点描述';

Logo 组件位于 components/site-logo.tsx，顶部链接位于 lib/layout.shared.tsx。

主题变量

主要颜色变量集中在 app/global.css：

:root {
  --background: oklch(0.995 0.002 286);
  --foreground: oklch(0.18 0.012 286);
  --accent: oklch(0.61 0.21 285);
}

这些变量同时映射到 Fumadocs 的 --color-fd-* 变量，因此不会破坏文档组件的功能。

侧边栏与目录

侧边栏逻辑继续由 Fumadocs 管理。项目只通过稳定的布局容器和链接状态调整：

• 半透明背景与模糊
• 当前页面高亮
• Hover 横向位移
• 右侧目录过渡
• 移动端目录背景

不要复制 Animate UI 的页面树或重新实现路由状态。

动画策略

首页使用 motion/react，文档区域使用 CSS transition。所有动画都遵守 prefers-reduced-motion，减少动态效果时会自动关闭大部分过渡。