关于运行时多主题切换的探讨与实现

[hooray]

我有这样一个需求，就是运行时的多主题切换。

由于 element-plus 并不支持在编译时就生成多套主题的样式（或许有方案），所以我只能在运行时去动态覆盖生成的 css var 属性。

但目前遇到一个比较麻烦的问题就是，比如我动态覆盖 --el-color-primary 后，--el-color-primary-light-3 --el-color-primary-light-5 ... 这一系列和 --el-color-primary 有关联的属性并没有变化。因为它们是在编译时通过 scss 的函数计算出来的，而编译生成 css var 后之间就没有直接关系了，所以通过覆盖 css var 时，需要将每一个属性都单独进行覆盖。而我希望能做到只修改覆盖一处，该颜色相关的色彩阶梯都能一并自动处理，就像很多组件背景色的 css var 是依赖 --el-bg-color 和 --el-bg-color-page ，我只需要覆盖 --el-bg-color 和 --el-bg-color-page ，这些组件的 css var 都一并生效了，不需要我修改覆盖太多 css var

于是我想到的第一个方案是，用 rgb 的半透明来实现色彩阶梯，例如生成的 css var 可以是这样：

:root {
  --el-color-primary-value: 64 158 255;
  --el-color-primary: rgb(var(--el-color-primary-value));
  --el-color-primary-light-3: rgb(var(--el-color-primary-value) / 0.9);
  --el-color-primary-light-5: rgb(var(--el-color-primary-value) / 0.7);
  ...
}

但这又带来一个问题，半透明的效果应用在背景色上显然有点不合适，例如 el-button 这类组件，如果底色不是纯色，半透明的效果会影响视觉观感。

于是我思考其实可以将 --el-color-primary-value 进一步拆分成 --el-color-primary-value-r --el-color-primary-value-g --el-color-primary-value-b 保存，因为我将默认生成的 --el-color-primary 转成 rgb 后发现，色彩阶梯实际上是有一定规律的：

:root {
  --el-color-primary: #409eff;
  --el-color-primary-light-3: #79bbff;
  --el-color-primary-light-5: #a0cfff;
  --el-color-primary-light-7: #c6e2ff;
  --el-color-primary-light-8: #d9ecff;
  --el-color-primary-light-9: #ecf5ff;
  --el-color-primary-dark-2: #337ecc;
}

/* 转成 rgb 后 */
:root {
  --el-color-primary: rgb(64 158 255);
  --el-color-primary-light-3: rgb(121 187 255);
                               /* +39 +20 +0 */
  --el-color-primary-light-5: rgb(160 207 255);
                               /* +38 +19 +0 */
  --el-color-primary-light-7: rgb(198 226 255);
                               /* +19 +10 +0 */
  --el-color-primary-light-8: rgb(217 236 255);
                               /* +19 +9  +0 */
  --el-color-primary-light-9: rgb(236 245 255);
  --el-color-primary-dark-2: rgb(51 126 204);
}

因为生成的 css var 并没有 --el-color-primary-light-1 --el-color-primary-light-2 --el-color-primary-light-4 --el-color-primary-light-6 ，如果我把这4个阶梯色值补上，并按照观察出的规律（即每个相邻的色值阶梯：red+19或20，green+9或10 ），大致应该是这样：

:root {
  --el-color-primary:         rgb(64 158 255);
                               /* +19 +10 +0 */
  --el-color-primary-light-1: rgb(83 168 255);
                               /* +19 +10 +0 */
  --el-color-primary-light-2: rgb(102 178 255);
                               /* +19 +9  +0 */
  --el-color-primary-light-3: rgb(121 187 255);
                               /* +19 +10 +0 */
  --el-color-primary-light-4: rgb(140 197 255);
                               /* +20 +10 +0 */
  --el-color-primary-light-5: rgb(160 207 255);
                               /* +19 +10 +0 */
  --el-color-primary-light-6: rgb(179 217 255);
                               /* +19 +9  +0 */
  --el-color-primary-light-7: rgb(198 226 255);
                               /* +19 +10 +0 */
  --el-color-primary-light-8: rgb(217 236 255);
                               /* +19 +9  +0 */
  --el-color-primary-light-9: rgb(236 245 255);
}

--el-color-primary-dark-2 比较特殊，因为就只有一个，也分析不出递减规律，就直接拿它和 --el-color-primary 相减取一个固定值吧

:root {
  --el-color-primary:        rgb(64 158 255);
                             /* -13 -32 -41 */
  --el-color-primary-dark-2: rgb(51 126 204);
}

这样一顿分析后，似乎得到了我想要的结果，是否可以将 css var 生成成这样：

:root {
  --el-color-primary-value-r: 64;
  --el-color-primary-value-g: 158;
  --el-color-primary-value-b: 255;
  --el-color-primary: rgb(var(--el-color-primary-value-r) var(--el-color-primary-value-g) var(--el-color-primary-value-b));
  --el-color-primary-light-3: rgb(calc(var(--el-color-primary-value-r) + 19 * 3) calc(var(--el-color-primary-value-g) + 10 * 3) var(--el-color-primary-value-b));
  --el-color-primary-light-5: rgb(calc(var(--el-color-primary-value-r) + 19 * 5) calc(var(--el-color-primary-value-g) + 10 * 5) var(--el-color-primary-value-b));
  --el-color-primary-light-7: rgb(calc(var(--el-color-primary-value-r) + 19 * 7) calc(var(--el-color-primary-value-g) + 10 * 7) var(--el-color-primary-value-b));
  --el-color-primary-light-8: rgb(calc(var(--el-color-primary-value-r) + 19 * 8) calc(var(--el-color-primary-value-g) + 10 * 8) var(--el-color-primary-value-b));
  --el-color-primary-light-9: rgb(calc(var(--el-color-primary-value-r) + 19 * 9) calc(var(--el-color-primary-value-g) + 10 * 9) var(--el-color-primary-value-b));
  --el-color-primary-dark-2: rgb(calc(var(--el-color-primary-value-r) - 13) calc(var(--el-color-primary-value-g) - 32) calc(var(--el-color-primary-value-b) - 41));
}

这样一来，实现运行时主题切换，就只需要覆盖 --el-color-primary-value-r --el-color-primary-value-g --el-color-primary-value-b 这 3 个色值即可，而无需关注色彩阶梯里的每个阶梯色的变化，会让主题切换变得轻松很多。

其它如 success / warning / danger 也同理。

[hooray]

这个思路希望能和官方团队确认下，如果行不通的话，是否有其它更好的办法能实现运行时切换主题。

否则我只能考虑采用 js 的方式去实现，通过解析 HEX ，把它转成 RGB 后再通过一系列的计算生成色彩阶梯需要的色值，再通过 js 去覆盖 css var

[sxzz]

/cc @YunYouJun

[YunYouJun]

很有趣的想法。事实上，我们的下一个目标正是构建一个主题市场，允许用户可以通过设置单一的主题色而获取不同色阶。
目前的想法理论上是可行的，不过设计师正在尝试设计一种根据主题色动态生成其他色彩的算法，但他不一定是基于 RGB 的，可能是 HSV/HCT，因此需要等待设计师确定最终方案。@huangzhongzhong

uncolor 是我此前编写的一个辅助小工具，您可以简单预览 HCT/HSB 的原理。

[hooray]

很期待这个方案的最终落地，似乎修改主题会轻松很多

[enjoy-wind]

@YunYouJun 啥时候能出方案，希望结合AI颜色算法，可以根据主题色自动生产所有的web颜色，当然这个不一定非常精确，另外通过增强局部覆盖能力，弥补AI算法缺陷.
此外希望提供通过element-plus主题增强项目主题的最佳实践，因为很多项目的诞生都没有UI、优秀的开发者及充足的时间.thanks.

[YunYouJun]

默认提供了 --el-color-primary-rgb （RGB 数值）以供用户使用。
我们之前也尝试了透明度方案，其的确在表格、浮层等组件存在瑕疵，因此目前仍旧使用 Hex 数值。

[ishowman]

好像过了挺久还是没下文……

[xuejunnan]

Any update ?
i met the same problem.Although user can defined their own theme, it only change a little part of color variables. The remaining color still need programmer defined by some function or user change by themselves

[xxholly32]

https://github.com/ant-design/antd-color-editor It may help to realize this problem, but it needs to involve some design and calculation logic. It needs to make a calculation logic similar to the theme, and after debugging, it can generate 10 gradient colors by passing in the main color. The 10 gradients of the existing default theme color may be more closely aligned with the existing 10 colors; I might open a repo to do that

https://github.com/ant-design/antd-color-editor 可能可以帮助去实现这个问题，不过需要涉及到一些设计与计算的逻辑，需要做一个类似theme的计算逻辑，并做调试后能够通过传入 主色生成10个梯度色；现有默认的主题色的10个梯度可能要更多的接近与已有的10个颜色;我可能会开个仓库去做这个事情

[xxholly32]

我参考 https://github.com/ant-design/antd-color-editor 里面的梯度代码，自己实现了一份，并用10个梯度中的 1-6，指向element-plus 的 --el-color-primary-9,8,7,5,3,--el-color-primary , 7 指向 --el-color-primary-dark-2，但实际根据主色算出来的值，和实际有所差别；如果官方有合适的设置我可以调整算法

效果可以查看：https://element-plus-theme-editor.vercel.app/

I referenced the gradient code from https://github.com/ant-design/antd-color-editor, implemented my own version, and used gradients 1-6 out of 10 to point to element-plus's --el-color-primary-9,8,7,5,3,--el-color-primary respectively. Gradient 7 points to --el-color-primary-dark-2. However, the values calculated based on the main color differ slightly from the actual ones. If there are suitable settings from the official source, I can adjust the algorithm accordingly.

You can see the demo at: https://element-plus-theme-editor.vercel.app/

[lv1codeman]

前言

首先讓我對@hooray前輩提出的idea致敬一下，要不是這麼細節的解說做法，我壓根沒想過色碼的原理，也不知道能轉成十進制去計算，給了我很大的啟發!

但我實作之後發現有點問題，首先遇到的是，
如果我原本的primary color太淺，那產生出來的顏色就容易一堆白色，這應該是因為只有在RGB上的R跟G上做加法的關係，而且僅有特定顏色有效，如果顏色選的不好，可能產出的顏色也達不到預期的那種深淺效果，我感覺就像是在調色盤上只有上下移動，沒有左右移動的樣子。

而且其他類型(如success, danger...等)不能直接套用，需要重新算一下RGB的間距，實在太為難我了，所以我試著找了別的方式。

我的方法

在\node_modules\element-plus\theme-chalk\src\common\var.scss裡有這麼一段程式碼

@mixin set-color-mix-level(
  $type,
  $number,
  $mode: 'light',
  $mix-color: $color-white
) {
  $colors: map.deep-merge(
    (
      $type: (
        '#{$mode}-#{$number}':
          mix(
            $mix-color,
            map.get($colors, $type, 'base'),
            math.percentage(math.div($number, 10))
          ),
      ),
    ),
    $colors
  ) !global;
}

我是SCSS菜雞，所以其實我也看不太懂，但很幸運地，我發現這個mix其實是SCSS的function，請見以下網址
https://changtsuiling.gitbooks.io/sass/content/chapter9/4-4-rgbyan-se-han-6578-mix-han-shu.html

它的功用就是將兩種顏色依照比例混合，產生新的顏色。

接下來的問題是，這個function是SCSS的，但我們要動態覆蓋生成的CSS var屬性就必須用javascript做，
於是我不要臉的問了chatgpt，他還真就幫我寫了一個可以用的javascript function，實測結果也跟elementplus算出來的顏色一樣。

function mixColors(color1, color2, weight) {
  // 解析颜色值
  const parseColor = (color) => {
    const hex = color.charAt(0) === '#' ? color.substring(1, 7) : color;
    return [
      parseInt(hex.substring(0, 2), 16), // Red
      parseInt(hex.substring(2, 4), 16), // Green
      parseInt(hex.substring(4, 6), 16)  // Blue
    ];
  };

  // 计算混合后的颜色
  const rgb1 = parseColor(color1);
  const rgb2 = parseColor(color2);

  const r = Math.round((1 - weight) * rgb1[0] + weight * rgb2[0]);
  const g = Math.round((1 - weight) * rgb1[1] + weight * rgb2[1]);
  const b = Math.round((1 - weight) * rgb1[2] + weight * rgb2[2]);

  // 转换为十六进制格式
  const componentToHex = (c) => {
    const hex = c.toString(16);
    return hex.length === 1 ? '0' + hex : hex;
  };

  const hexColor = '#' + componentToHex(r) + componentToHex(g) + componentToHex(b);

  return hexColor;
}

// 示例使用
const color1 = '#ff0000'; // 红色
const color2 = '#0000ff'; // 蓝色
const weight = 0.5; // 混合权重，0.5 表示均匀混合

const mixedColor = mixColors(color1, color2, weight);
console.log('Mixed Color:', mixedColor); // 输出混合后的颜色值

那我想到這邊已經有解答了，就把light-3,5,7,8,9和dark-2都用這個mixColors算出來即可。
以下是我的專案的部分程式碼，因為用途不同所以我全貼出來也沒啥幫助，應該...可以看懂吧。

colorCode就是原本light-3,5,7,8,9和dark-2的HEX色碼，在我的專案中是讓user去點選顏色之後幫他換算這個顏色的色階所以才會用同一個變數，而white和black則分別帶入#ffffff和#000000

let colorCodeList = [
    colorCode,
    mixColor(white, colorCode, (10 - 3) * 0.1),
    mixColor(white, colorCode, (10 - 5) * 0.1),
    mixColor(white, colorCode, (10 - 7) * 0.1),
    mixColor(white, colorCode, (10 - 8) * 0.1),
    mixColor(white, colorCode, (10 - 9) * 0.1),
    mixColor(black, colorCode, (10 - 2) * 0.1)
  ]

後記

其實我很想試著用@xxholly32前輩的方式，看了一下好像是用typescript寫的，可惜在下初學Vue，還沒學到ts怎麼寫，實在是看不懂QQ...