主题

TockDocs 基于 Nuxt UI 构建，充分利用 Tailwind CSS v4、CSS 变量。Tailwind Variants API 提供了灵活且可扩展的主题系统。

使用 @theme 覆盖

您可以在 @theme 指令中使用 CSS 变量来自定义主题，定义项目的自定义设计令牌，如字体、颜色和断点。

您可以通过在应用中创建 main.css 文件来覆盖此主题：

@import 'tailwindcss';
@import '@nuxt/ui';

@theme {
  --font-sans: 'Public Sans', sans-serif;

  --breakpoint-3xl: 1920px;

  --color-green-50: #effdf5;
  --color-green-100: #d9fbe8;
  --color-green-200: #b3f5d1;
  --color-green-300: #75edae;
  --color-green-400: #00dc82;
  --color-green-500: #00c16a;
  --color-green-600: #00a155;
  --color-green-700: #007f45;
  --color-green-800: #016538;
  --color-green-900: #0a5331;
  --color-green-950: #052e16;
}

export default defineNuxtConfig({
  modules: ['@nuxt/ui'],
  css: ['~/assets/css/main.css'],
})

颜色

TockDocs 使用预配置的颜色别名来为组件添加样式并驱动整个 UI 中的 color 属性。

每个标签代表一个默认别名：

• primary → 主要品牌颜色，用作组件的默认颜色
  (默认: green)
• secondary → 辅助颜色，补充主要颜色
  (默认: blue)
• success → 用于成功状态
  (默认: green)
• info → 用于信息状态
  (默认: blue)
• warning → 用于警告状态
  (默认: yellow)
• error → 用于表单错误验证状态
  (默认: red)
• neutral → 用于背景、文本等的中性颜色
  (默认: slate)

您可以通过更新 app.config.ts 文件中的 ui.colors 键来全局自定义这些颜色：

export default defineAppConfig({
  ui: {
    colors: {
      primary: 'blue',
      neutral: 'zinc',
    },
  },
})

组件

除了颜色之外，所有 Nuxt UI 组件 都可以通过 app.config.ts 全局设置主题。

您可以通过使用与组件内部主题对象相同的结构来覆盖任何组件的外观（显示在每个组件页面的末尾）。

例如，更改所有按钮的字体粗细：

export default defineAppConfig({
  ui: {
    button: {
      slots: {
        base: 'font-bold',
      },
    },
  },
})

在此示例中，font-bold 类将覆盖所有按钮上默认的 font-medium 类。

TockDocs 子组件

TockDocs 内部使用多个 Nuxt UI 组件用于导航、目录和子导航。您可以通过 app.config.ts 使用 defaultVariants 键自定义它们的默认变体。

以下组件可配置：

例如，要将目录高亮样式更改为 circuit 并将侧边栏导航变体切换为 pill：

export default defineAppConfig({
  ui: {
    contentToc: {
      defaultVariants: {
        highlightVariant: 'circuit',
        highlightColor: 'secondary',
      },
    },
    contentNavigation: {
      defaultVariants: {
        variant: 'pill',
        highlight: false,
      },
    },
  },
})

每个组件支持以下变体选项：

• highlight — 显示活动指示线（true 或 false）
• highlightColor — 指示器的颜色（primary、secondary、neutral 等）
• variant — 视觉样式（pill 或 link，如适用）
• highlightVariant — 指示器样式（straight 或 circuit，仅 ContentToc）
• color — 活动链接的基础颜色