背景

在公司内部，我基于dumi开发并部署了一套集合 组件库、UI组件库、样式库、图标库、原型库、示例库 的系统，并实现了主题切换等功能。

最近，由于需要进行归集优化，如，将一级菜单改为 设计（样式库）、研发（组件库、UI组件库）、资源（图标库 原型库）、 物料广场（示例库），后续可能扩展更多子菜单，并希望增加图标展示，同时，也希望在Header展示主题筛选功能。

为了实现该功能，也就需要研发dumi的定制主题功能。然而，虽然dumi的定制主题功能自由度很高，但是入门文档写得比较简单，比如，文档中写着“自定义的 layout 组件，props.children 即每个 md 的内容，开发者可自行控制导航、侧边栏及内容渲染”，但是，给的例子却很简单，如果需要全部开发，则又工作量很大，我仅仅需要微调一些功能。

过程

通过研究，其实可以把当前主题按dumi约定的文件位置存放进去，再进行微调即可实现定制主题，本教程将通过主题开发的方式一进行讲解。具体实现如下：

1. 通过github下载源码

2. 按dumi文档介绍，在根目录新增.dumi/theme文件夹。

3. 将dumi源码里的 dumi/packages/theme-default/src/ 所有文件复制粘贴到目录新建的 .dumi/theme 文件夹内。

4. 验证是否生效。

修改部分代码，比如在.layout.tsx内加一些text看是否展示在页面上

5. 修改示例：屏蔽光暗主题

对于想修改Header的地方，大部分可以通过 .dumi/theme/components/Navbar.tsx进行修改，如屏蔽光暗主题

总结

dumi的定制主题自由度高，入门后，跟普通项目开发差不多，然而，在新手教程那里，却写得比较模糊，因此，写一下该教程记录一下流程。