聊聊AntDesignV5的主题（上）CSSinJS动态主题

　　AntDesignV5已经发布也有一段时间了，作为V5设计研发小组成员，在这几个月中我们也第一时间升级了手上的业务应用到antdv5，并针对实际的业务场景研究了antd动态主题的实践用法。截至目前近3个月的时间，我们总共完成了6个应用组件站点的antdv5升级改造，且均已支持亮暗色主题切换。并在一些对主题自定义有较强需求的场景下都有了不错的效果（如下）：
　　亮色主题
　　暗色主题
　　Kitchen3插件
　　闻冰业务应用
　　KitchenMeasure
　　百音闻冰业务应用
　　Kitchen官网
　　倏昱业务应用
　　ProComponents
　　期贤TechUIPro系组件
　　ProEditor编辑器
　　兼续业务组件
　　AntDesignStyle文档
　　闻冰文档应用
　　我个人感受的就是：用了CSSinJS之后的antd太香了！正是有了这么多案例的应用验证，我才有信心写下这篇文章，和大家聊聊用antdv5可以在主题方面做出什么样的行活与花活。在可以预见的未来，所有动态主题的需求，无论是行活还是花活，我们都能做的轻轻松松
　　PS：所谓的行活用法，就是无论设计师还是前端同学都可直接体验和使用；而花活用法，就是目前只有用写代码的方式才能实现的方案。（不过其中有些方案可能会在未来给到设计师使用）行活用法V4的延展与产品化
　　由于antdv5核心采用了CssinJS的方案，因此所有的动态主题配置也都变成了代码里的运行时配置，且从单一的动态主色变成了圆角、字体、阴影等几乎所有样式变量。针对前端同学来说，在AntDesign官网的文档（）里也详细展示了基础的用法，我在这里就不赘述了。主要和大家聊聊V5里的产品化用法。
　　通过AntDesign的主题编辑器，设计系统的创建者可以非常简单地配出来antd的整体风格，并进行实时预览。
　　然后设计师将主题导入到Kitchen之后，设计师便可以直接消费主题Token，同时也可以拖拽获得自定义主题后的antd组件。
　　交付设计稿后，基于C2D2C的链路，前端同学就能看到设计师使用了哪个antd组件，并一键获得antd的前端代码。那如果大家对这部分内容感兴趣，欢迎在这里查看详情：Kitchenv3。2。0AntDesignV5动态主题资产来啦语雀
　　接下来就全部都是antd的花活用法了，由于以下的花活部分目前暂时都只能通过代码实现（部分能力后续可能也会产品化），所以介绍里会涉及到一些代码，但相对来说也还简单。花活用法：自定义主题算法
　　antd的token体系和市面上大部分的token体系不同，我们有一个非常重要的因素，它就是算法。虽然一听算法好像挺高大上的，但它的思想是非常容易理解的：基于基础变量和派生规则来生成一组变量。其中派生规则就是算法。antd在v4及以前一直有这方面的沉淀，在v5中自然把这个能力继承了过来。
　　由于算法的存在，我们就可以传入不同的主题算法，进而获得不同的主题风格效果。例如TechUIStudio中，我们通过集成自定义暗色算法，就可以轻松获得独特的暗色风格的主题。import｛theme｝fromantd；importtype｛MappingAlgorithm｝fromantdesconfigprovidercontext；定义studio暗色模式算法exportconststudioDarkAlgorithm：MappingAlgorithm（seedToken，mapToken）｛使用antd默认的暗色算法生成基础token，这样其他不需要定制的部分则保持原样constbaseTokentheme。darkAlgorithm（seedToken，mapToken）；return｛。。。baseToken，colorBgLayout：20252b，Layout背景色colorBgContainer：282c34，组件容器背景色colorBgElevated：32363e，悬浮容器背景色｝；｝；在应用中集成constContainer（）｛return（ConfigProvidertheme｛｛algorithm：studioDarkAlgorithm｝｝。。。ConfigProvider）｝复制代码
　　最终的效果如下图所示。可以看到我们通过集成主题算法，通过非常少的token自定义，就可以实现风格感受很不一样的主题，同时界面的视觉梯度仍然可以保持稳定，不会出现常见的暗色模式翻车的问题。
　　而且通过传入不同的主题算法，我们甚至可以控制组件在不同应用场景下的展示形态。例如在Kitchen中为了让智能表格编辑器符合kitchen的视觉风格，我们通过传入kitchen风的antd自定义主题算法，就可以让ProEditor在kitchen中变成另外一个风格。
　　所以单纯一个v5的自定义算法，就可以玩出很多花活，而我们后续也会结合KitchenColorStudio色彩生成工具，在AntDesign的主题编辑器中集成可供设计师使用的自定义算法功能，让不懂代码的设计师也能轻松生成业务定制的色彩算法。
　　花活用法：局部主题自定义
　　自定义主题算法是一个全局风格的调整，接来下再来介绍局部主题的使用。在v4及以前，想要antd的组件有多套主题同屏的实现难度是非常高的，而在V5中，得益于CSSinJS的动态主题，多套主题模式同屏展示就变得非常简单。这在我们的ProEditor编辑器、TechUIStudio平台、AntDesign的主题预览器都有使用到这些效果。
　　以Studio平台的场景为例，这种局部主题设定的核心代码如下：import｛ConfigProvider，theme｝fromantd；exportdefault（）｛return（｛暗色模式只需套一个CP并设定算法，里面的Toolbar就是暗色的了｝ConfigProvidertheme｛｛algorithm：theme。darkAlgorithm｝｝ToolbarConfigProvider｛其余部分默认是亮色｝ProTableEditorstyle｛｛height：calc（100vh40px）｝｝）；｝；复制代码
　　这样局部主题的定制可以极大程度地提升样式定制的灵活度。像暗色主题的一个泛化是深色主题，比较典型的就是类似海兔这样的深色背景头图场景。基于上面写的用法示例，理论上只需做一个深色主题算法，就可以实现在不魔改antd样式的情况下做到风格兼容。
　　花活用法：组件级风格自定义
　　当大家对主题能力切换有了基础的感知之后，我们再来看看组件级别的主题风格定制能力。在antdv4及以前，自定义一个popup的提示组件是非常难的。下面则演示了一个需要自定义为主题色的popup提示说明（代码示例：codesandbox。iospopoveri）为了达成较好的视觉效果，样式覆写可能会比组件的声明都要多，但仍然难以达到完美状态。所以antdv4才会经常被诟病说很难做自定义。
　　那在V5中，使用ConfigProvider可以非常简单地完成样式的自定义，且非常符合直觉。import｛theme，Popover，Checkbox，Button，ConfigProvider｝fromantd；exportdefaultfunctionApp（）｛const｛token｝theme。useToken（）；return（ConfigProvidertheme｛｛component字段可以聚合调整每个组件的tokencomponents：｛将Popover的文本颜色设为白色Popover：｛colorText：token。colorTextLightSolid｝，将Checkbox的文本颜色设为白色，主色设为更强一级的颜色Checkbox：｛colorPrimary：token〔blue7〕，colorText：token。colorTextLightSolid｝，将Button的颜色设为更强一级的颜色Button：｛colorPrimary：token〔blue7〕｝｝｝｝。。。业务组件代码ConfigProvider）；｝复制代码
　　产出的效果如下（示例代码：codesandbox。iosv5popove）：
　　基于CSSinJS这样的动态能力，我们可以实现在组件样式组合上非常高的灵活度，进而轻松实现一些原本在V4中很难达成的自定义样式。花活用法：组件的搭配组合
　　在antdv4中，之前被诟病的另一点就是组件的组合性不理想，比如一个典型场景是暗色模式下的弹窗与表格组合使用。可以看到由于暗色模式下Modal的底色与页面基础的Layout底色不同，最终呈现的感觉就是table陷进去了一层，看起来就会很奇怪。
　　但这种场景在antd层面往往无能为力，因为组件本身并不限制业务应用如何使用组件。最后的结果就是应用中的体验细节有瑕疵。如果修正这些瑕疵，在V4中可能需要做很多hack才能实现，ROI划不来。而在V5中则可以非常轻松地达到预期的效果。当然，也是通过ConfigProvider的嵌套特性达成。importReactfromreact；import｛Modal，ConfigProvider，theme｝fromantd；importTablefrom。Table；constApp：React。FC（）｛const｛token｝theme。useToken（）；return（Modalopen｛true｝width｛800｝title｛在Modal中的表格｝ConfigProvidertheme｛｛token：｛colorBgContainer：token。colorBgElevated｝｝｝TableConfigProviderModalTable）；｝；exportdefaultApp；复制代码
　　只需在Modal中的table外层嵌套一个ConfigProvider作为夹心层，然后将token的colorBgContainer参数设为colorBgElevated，我们就得到了响应Modal背景色的表格样式。
　　同时，利用一些颜色计算库，我们甚至可以非常轻松地调整出比Modal的背景色更加突出的效果。这样的操作，在v4中几乎是不敢想的。
　　而它的代码，只需简单地微调即可。importReactfromreact；import｛Modal，ConfigProvider，theme｝fromantd；importTablefrom。Table；import｛lighten｝frompolished；constApp：React。FC（）｛const｛token｝theme。useToken（）；return（Modalopen｛true｝width｛800｝title｛在Modal中的表格｝ConfigProvidertheme｛｛把colorBgElevated的颜色提亮4作为容器基础色token：｛colorBgContainer：lighten（0。04，token。colorBgElevated）｝｝｝TableConfigProviderModalTable）；｝；exportdefaultApp；复制代码花活总结：v5的起点将会是其他组件库的天花板
　　在这么几个月的探索使用中，我愈发感觉V5的CSSinJS动态能力，搭配我们独一无二的Token体系，放眼全球都是极其领先的存在。尝过这些能力的甜头之后，我甚至很笃定地认为未来就是CSSinJS的天下。
　　借用云谦老师的话：选择很重要，有些方案的起点可能就是另一些方案的天花板。而上文所提到的行活与花活，也只是V5的起点，灵活性课题在CY23还会进一步延展下去：语义化组件DOM类、组件级Token、Stylish、主题编辑器2。0、antd应用级CSSinJS方案等等当然，整条产研消费链路中组件库只是其中一环，上下游的协同也非常重要，但在这里就不多展开了。
　　既然这篇文章的标题起的是（上），那么势必还会有个（下），那在下一篇中将会和大家聊聊在实际应用中，我们应该如何用工程化的方式接入antdv5的这些特性，并将上面提到的诸多花活统统收到囊中。
　　关于V5Token体系的详细介绍，后续会作为独立的系列更新，并在完善后同步到官网，敬请期待