样式系统

AR Docs 使用 CSS 自定义属性实现主题系统。

CSS 变量

在 src/styles/variables.css 中定义变量：

:root {
  --color-primary: #2563eb;
  --color-bg: #ffffff;
  --color-text: #1f2937;
  --color-border: #e5e7eb;
  --font-sans: 'Inter', sans-serif;
  --font-mono: 'Fira Code', monospace;
}

深色模式

深色模式通过 [data-theme="dark"] 选择器实现：

[data-theme="dark"] {
  --color-primary: #60a5fa;
  --color-bg: #111827;
  --color-text: #f9fafb;
  --color-border: #374151;
}

自定义样式

添加自定义 CSS

在 src/styles/ 目录下创建新文件：

/* src/styles/custom.css */
.custom-component {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 1rem;
}

然后在布局中导入：

---
import '../styles/custom.css';
---

最佳实践

使用变量：始终使用 CSS 变量而非硬编码颜色
语义化命名：使用 --color-*、--font-* 等前缀
移动端优先：从小屏幕开始设计
使用 rem 单位：确保可访问性

提示
项目使用 CSS 自定义属性而非 Tailwind CSS，以保持轻量级和灵活性。