pdfcn主题系统完全指南9大预设自定义Token打造品牌级PDF外观【免费下载链接】pdfcnBeautiful pdf components, built on Takumi and Forme. 100% Free, Zero config, one command setup.项目地址: https://gitcode.com/gh_mirrors/pd/pdfcnpdfcn 是一款免费开源、基于 Takumi 和 Forme 构建的 React PDF 组件库而它的主题系统Theme System正是打造品牌级 PDF 外观的核心——你可以从9 大预设主题中一键选用也可以逐项自定义主题 Token颜色、字体、间距让发票、报告、合同等文档完美贴合你的品牌视觉。本文面向新手不用写几行复杂代码就能帮你的 PDF 从默认样式升级为专业品牌风。快速上手5 分钟给 PDF 换上品牌主题pdfcn 的主题系统采用 shadcn/ui 风格的注册表registry格式每个主题就是一个 TypeScript 文件导入即用。所有预设主题都放在 apps/web/registry/themes/ 目录下统一从 themes.ts 导出。整个流程只有三步选主题——在 9 个预设中挑选一个最接近你品牌的风格装主题——一条 CLI 命令自动把主题文件写入项目套主题——用一个 Provider 组件包裹你的 PDF 内容。下文逐一展开。9大预设主题怎么选一张表看懂每个预设主题都自带完整的颜色体系、字体搭配和间距节奏开箱即用。以下是官方 9 大预设的风格速览预设主题视觉风格字体搭配适合场景Professional锌灰冷调、衬线标题正式严谨Times-Roman 标题商务文档、官方信函Modern冷灰中性色 淡紫点缀简洁当代全 Helvetica初创公司、科技公司文档Minimal极简中性色、大量留白Courier 标题技术规格、文学手稿Executive深藏青高对比高管质感Merriweather Open Sans董事会报告、投资人文档Corporate蓝灰商务风可靠稳重Lato商业提案、客户交付报告Elegant奶油白 琥珀金编辑感Playfair Display Lora设计作品集、高端品牌Vivid深紫罗兰、圆润字体高能量Nunito创意机构、营销提案Forest自然深绿大地色系Merriweather Inter可持续报告、健康品牌Blueprint暗岩板 青色技术极客风JetBrains MonoAPI 文档、工程规格 选主题的小技巧先定气质再定颜色——给谁看客户/投资人/工程师决定了气质气质决定了主题颜色只是主题里已配好的细节。每个主题都有独立的文档页可以在页面上直接预览效果例如 corporate.mdx、vivid.mdx。一条命令安装预设主题安装方式与 shadcn/ui 完全一致支持两条路线路线一CLI 一键安装推荐在终端执行把theme换成你想用的主题名如 corporate、vividnpx shadcnlatest add pdfcn/theme-theme路线二手动安装把主题文件复制到项目中例如把 corporate.ts 的内容存为lib/themes/corporate.ts再按项目结构调整导入路径即可。如果本地没有代码可以先克隆仓库浏览git clone https://gitcode.com/gh_mirrors/pd/pdfcn套用主题3行代码完成品牌化主题安装好后用一个PdfcnThemeProvider组件包裹你的 PDF 内容即可该组件源码见 theme-provider.tsximport { PdfcnThemeProvider } from /components/pdf/theme-provider; import { corporateTheme } from /lib/themes/corporate; PdfcnThemeProvider theme{corporateTheme} {/* 你的发票、报告或表单内容 */} /PdfcnThemeProvider就这么多——内部所有组件标题、表格、徽章、图表都会自动读取主题配置颜色、字体、间距瞬间切换成品牌风格。想换主题只改theme{...}这一个值。自定义主题Token打造独一无二的品牌外观预设满足不了你pdfcn 的主题系统完全开放——一个主题就是一个普通对象包含 5 组 Token你可以任意改写。类型定义见 pdf-themes.ts。① colors12 个语义色包含primary主色、accent强调色、success/warning/info/destructive状态色、foreground/background/border/muted中性色等。直接把primary和accent换成品牌 VI 色号全局观感立刻统一colors: { primary: #0f4c81, // 你的品牌主色 accent: #0ea5e9, // 你的品牌强调色 // 其余保持默认或按需微调 }② typography标题与正文字体heading与body分别配置fontFamily、fontSizeh1–h6 逐级定义、lineHeight和fontWeight。比如 Elegant 主题就用 Playfair Display 标题 Lora 正文的经典编辑组合这正是高级感的来源之一。③ spacing间距节奏page配置页面四边距sectionGap、paragraphGap、componentGap控制区块、段落、组件之间的距离。间距是呼吸感的关键——Minimal 主题靠 56pt 的大边距和 36pt 的区块间距做出极简留白Corporate 则收紧到 44pt 边距显得更紧凑专业。④ page页面规格size如 A4与orientationportrait / landscape默认 A4 纵向无需改动。⑤ primitives原始设计刻度所有预设共享同一套基础刻度见 primitives.ts4pt 网格间距、1.25 比例字号阶梯、圆角 0–8pt、字重 400–700 等。主题从这些刻度中挑选数值分配给语义 Token——所以自定义时优先改上面 4 组就够了primitives 一般无需动。可视化 Theme Builder拖动滑块生成主题代码不想手写配置官网提供了在线Theme Builder选择渲染底座后通过滑块和取色器实时调整颜色、字体、间距满意后直接生成主题代码片段复制走。相关实现位于 theme-builder.tsx发布说明见 2026-08-30-theme-builder.mdx/changelog/2026-08-30-theme-builder.mdx)。3个实用建议避免主题踩坑一品牌一主题全公司文档共用一个主题对象发票和报告自动统一风格比逐页调样式省 90% 精力状态色别乱改success/warning/destructive承担语义功能改动时保持足够的对比度和辨识度字体要能嵌入 PDFPDF 不像网页可以随便引 webfont优先选择系统字体或项目内已内置的字体族各预设选择的 Lato、Nunito、Merriweather 等都已验证可用。总结pdfcn 主题系统 9 大开箱即用的预设 完全开放的 Token 定制。新手一条命令、3 行代码就能完成品牌化进阶用户可以改颜色、字体、间距任意组合甚至自己沉淀出第 10 个主题。接下来可以去 installation.mdx/installation.mdx) 完成安装然后从你最喜欢的那个主题开始动手吧 【免费下载链接】pdfcnBeautiful pdf components, built on Takumi and Forme. 100% Free, Zero config, one command setup.项目地址: https://gitcode.com/gh_mirrors/pd/pdfcn创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考