简体中文

English

简体中文

English

深色模式

设计资源 ​

Birdpaper UI 提供完整的设计资源体系，帮助设计师和开发者高效协作，从设计稿到代码实现保持一致。

图标库 ​

Birdpaper UI 使用 Birdpaper Icon 作为官方图标库，基于 Remix Icon 封装，提供 2000+ 线性与填充风格的 Vue 图标组件。

安装 ​

bash
pnpm add birdpaper-icon

基础用法 ​

图标组件支持 size、fill、rotate 等属性，按需引入即可：

vue
<script setup>
import { IconSearchLine, IconHeartFill } from "birdpaper-icon";
</script>

<template>
  <!-- 线性图标 -->
  <IconSearchLine size="16px" />

  <!-- 填充图标 + 自定义颜色 -->
  <IconHeartFill size="16px" fill="#f53f3f" />

  <!-- 旋转 -->
  <IconSearchLine size="16px" :rotate="90" />
</template>

图标属性 ​

sizeString18px图标尺寸，需带单位
fillString#595959图标颜色
spinBooleanfalse是否开启旋转动画
rotateNumber-旋转角度（度）

指南：图标命名遵循 Icon{名称}{风格} 格式，风格分为 Line（线性）和 Fill（填充）。优先使用线性图标，填充图标用于强调态或选中态。

设计 Token ​

所有设计 Token 以 CSS 变量形式提供，可直接在设计工具或代码中引用。变量命名遵循 --bp-{分类}-{标识} 的统一规范。

色彩--bp-primary- / --bp-gray---bp-primary-6: #165dff色彩
尺寸--bp-size---bp-size-height-default: 32px样式指南
层级--z-index---z-index-base: 2000样式指南
间距无独立前缀遵循 4px 网格体系样式指南

提示：所有色彩 Token 均提供 -rgb 后缀版本（如 --bp-primary-6-rgb），用于 rgba() 透明度场景。深色模式下变量自动切换，无需手动处理。详见 色彩 和 样式指南。

组件速查 ​

按功能分类的组件清单，点击可跳转至对应文档：

通用Button, Icon, Link
布局Grid, Space
导航Steps, Pagination
输入Input, InputNumber, Select, Checkbox, Radio, Switch, DatePicker, TimePicker, ColorPicker, InputTag, VerifyCode
数据展示Table, Tag, Badge, Avatar, Image, Statistic, Empty, Rate
反馈Modal, Drawer, Message, Popconfirm, Tooltip, Spin
其他Form, ConfigProvider

主题定制 ​

CSS 变量覆盖 ​

通过覆盖 CSS 变量实现全局主题定制，适用于运行时动态切换：

css
:root {
  --bp-primary-6: #722ed1; /* 替换品牌色为紫色 */
  --bp-primary-5: #9254de;
  --bp-primary-4: #b37feb;
}

指南：替换品牌色时，建议同时调整 4 - 7 这几个常用色阶，保持色阶梯度的协调。仅替换主色（6）可能导致 hover / active 态颜色不协调。

SCSS 变量定制 ​

通过 SCSS 变量在构建时定制，适用于需要修改类名前缀、间距基准等底层配置：

scss
$namespace: "bp"; // 类名前缀
$borderSize: 1px; // 边框宽度
$defaultMargin: 10px; // 默认外边距

深色模式适配 ​

主题定制在深色模式下同样生效。如需为深色模式单独定制，使用 .dark 作用域：

css
:root {
  --bp-primary-6: #722ed1;
}

.dark {
  --bp-primary-dark-6: #b37feb; /* 深色模式下的紫色主色 */
}

提示：深色模式的变量名使用 -dark- 中缀，色阶方向反转（1 最深，10 最浅）。详见 深色模式。

链接 ​