add three color gradient

package/contents/ui/lib/helper.js

@@ -8,13 +8,34 @@ const batteryIcon = batteryPercent => ({
   "-1": "battery-ac-adapter"
 })[batteryPercent] ?? "audio-headphones-symbolic";
 
-const interpolateColor = (c0, c1, f) => { // https://stackoverflow.com/a/63775249
+const hex2rgb = hex => ({
+  r: parseInt(hex.slice(1, 3), 16),
+  g: parseInt(hex.slice(3, 5), 16),
+  b: parseInt(hex.slice(5, 7), 16)
+});
+const rgb2Hex = rgb => `#${((1 << 24) + (rgb.r << 16) + (rgb.g << 8) + rgb.b).toString(16).slice(1)}`;
+
+const interpolateColor = (f, c0, c1, c3) => {
   if(isNaN(f)) return "transparent";
-  c0 = c0.replace('#', '').match(/.{1,2}/g).map(oct => parseInt(oct, 16) * (1-f));
-  c1 = c1.replace('#', '').match(/.{1,2}/g).map(oct => parseInt(oct, 16) * f);
-  return "#" + [0, 1, 2]
-    .map(i => Math.min(Math.round(c0[i] + c1[i]), 255))
-    .reduce((a, v) => ((a << 8) + v), 0)
-    .toString(16)
-    .padStart(6, "0");
+  c0 = hex2rgb(c0);
+  c1 = hex2rgb(c1);
+  c3 = hex2rgb(c3);
+  let color1 = c0;
+  let color2 = c1;
+  let fade = f;
+
+  if(c3) {
+    fade *= 2;
+    if(fade >= 1) {
+      fade--;
+      color1 = c1;
+      color2 = c3;
+    }
+  }
+
+  return rgb2Hex({
+    r: parseInt(~~(color1.r + ((color2.r - color1.r) * fade)), 10),
+    g: parseInt(~~(color1.g + ((color2.g - color1.g) * fade)), 10),
+    b: parseInt(~~(color1.b + ((color2.b - color1.b) * fade)), 10),
+  });
 };