用纯css方式实现动态切换主题风格

• 前言

UI组件库是现代Web应用程序开发中不可或缺的一部分。动态主题风格切换是一个非常重要的功能，它可以允许应用程序用户在不同的场景下选择自己喜欢的主题。这样的一个特性可以增加用户体验的个性化，并提高应用程序的可用性和易用性。

微盟移动端组件库Titian提供了动态主题切换的能力，并且延展了主题范围。

• 背景

在以前商户店铺的品牌视觉风格往往千篇一律，同时还因为需要逐个繁琐地配置界面中元素，导致的风格错乱等问题。针对上述的痛点，本次升级在确保商户品牌风格统一的前提下，基于品牌调性提炼了具有共性的视觉特征，分别为颜色、图标、圆角。并用这些特征组合为“通用”、“潮流”、“可爱”三套风格，能够让商家随心选择，让线上店铺更贴合自身的品牌调性，提高品牌识别度，维持C端用户的品牌心智。

微盟移动端组件库Titian的主题风格包括三个维度的风格变化：

1. 主题颜色的风格切换，这里主题色可以设置任意一种色值。
2. 字体图标风格的切换，组件库中的所有图标包含三种风格，具体分为通用型，超流型和可爱型。
3. 所有组件的圆角的切换，组件库中所有圆角也分为三种风格，风格的分类和字体图标分类一致，通用型的圆角即为设计稿上的圆角，超流型的圆角则是所有的组件圆角都变成直角，可爱型的圆角则为在设计稿上的圆角的基础上加上8个像素。

我们要实现三种风格的切换是互相独立的，可以互相组合搭配。另外，图标风格的切换可以是全量一起切换，也可以是部分单独切换，而且需要运行时可以动态切换。

这些风格的切换都需要内置到组件库中，只需要给业务方提供一个变量来改变整体风格。

• 需求分析

对于主题色的风格配置，由于有些组件使用的的具有百分比透明度的主题色，所以采用rgba色值更加方便。对于图标风格切换，从一种风格增加到三种风格，能不能尽量的不要增加代码体积，毕竟小程序对包体积有严格的要求。 对于圆角风格，有些需要将设计稿的圆角加8像素，有些需要变成直角，而有些又需要单独处理成大圆角。

这都该如何设计呢？ 这么多的风格切换，如何能尽量设计少的接口来让业务方写最少的代码，不去增加业务方的记忆负担呢？ 另外需要在运行时进行风格的切换，我决定使用css原生变量的方式。

CSS变量的好处包括：

代码重用：可以在多个元素中使用同一个变量，避免了重复编写样式代码的问题。

简化维护：当需要修改样式时，只需要修改变量的值，而不是每个元素的样式。

动态更新：CSS变量可以通过JavaScript动态修改，使得样式在运行时可以动态变化。

提高可读性