| name | dev-themes |
| description | 修改 /themes 下的代码时使用 |
packages/vite-plugin-tona/public 放置了博客页面默认模板，包含预定义的 html、默认样式等，vite-plugin-tona/public 下的任何文件不可修改！
运行 dev server 时，vite 会通过 tona-vite 插件自动注入 vite index.html 以及共享资源，所有皮肤都基于博客页面默认模板实现。tona-vite 插件集成了动态脚本扩展和共享资源服务功能。
themes/* 为皮肤所在位置，如 themes/shadcn 放置 shadcn 皮肤实现代码。启动 dev server 后，默认打开的是一个导航页面，你如果需要查看相关页面，应该进入:
使用 lucide 包，通过 createElement 创建图标元素：
import { Moon } from 'lucide'
const MoonIcon = createElement(Moon)
使用 lucide-preact 包，直接作为组件使用：
import { ChevronUp } from 'lucide-preact'
stroke-width={1} 设置线条粗细size-4、size-5 等 Tailwind 类名any 类型interface 定义对象类型，type 定义联合类型const assertions 和 as const@ts-ignore 和 @ts-expect-error，除非绝对必要对于简单的 DOM 操作功能，可以通过编写插件实现。
plugin-name/
├── utils.ts # 工具函数
├── index.css # 样式文件
├── types.ts # TypeScript 类型定义
└── index.tsx # 插件入口
@apply 指令编写// plugin-name/index.tsx
export default function () {
const el = document.querySelector('#element-id')
if (el) {
el.classList.add('btn')
}
}
/* plugin-name/index.css */
.btn {
@apply text-2xl font-bold text-red-500;
}
utils 目录types.ts 文件中useQueryDOM hooks 获取 DOM 数据themes/shadcn 是 shadcn ui 风格的博客皮肤，采用现代化的设计语言。
class-variance-authority (cva) 进行组织cn() 工具函数合并类名，避免样式冲突dark: 前缀实现tw-animate-css 提供的预设动画对于 themes/shadcn 皮肤，优先考虑使用 Preact 组件方式实现功能与 UI，插件仅作为补充方案。
component-name/
├── hooks.ts # React hooks 逻辑
├── dom-hooks.ts # useQueryDOM hooks
├── utils.ts # 工具函数
├── types.ts # TypeScript 类型定义
└── index.tsx # 主组件实现
cva 管理样式变体，避免硬编码类名forwardRef 支持 ref 传递