Add color fading

- Add color fading, by using a JS interval that changes the color every 10ms.
- Add option in Dribbblish settings to change the fading duration.
- Fixed a few types in the Dribbblish settings.

Thanks for making such an awesome extension!

dribbblish-dynamic.js

@@ -170,7 +170,7 @@ function toggleDark(setDark) {
     setRootColor('subtext', setDark ? "#EAEAEA" : "#3D3D3D")
     setRootColor('notification', setDark ? "#303030" : "#DDDDDD")
 
-    updateColors(textColor, sidebarColor)
+    updateColors(textColor, sidebarColor, false)
 }
 
 /* Init with current system light/dark mode */
@@ -198,20 +198,70 @@ DribbblishShared.config.register({
     }
 });
 
-function updateColors(textColHex, sideColHex) {
+var currentColor;
-    let isLightBg = isLight(textColorBg)
+var currentSideColor;
-    if (isLightBg) textColHex = LightenDarkenColor(textColHex, -15) // vibrant color is always too bright for white bg mode
+var colorFadeInterval = false;
 
-    let darkColHex = LightenDarkenColor(textColHex, isLightBg ? 12 : -20)
+function updateColors(textColHex, sideColHex, animate=false) {
-    let darkerColHex = LightenDarkenColor(textColHex, isLightBg ? 30 : -40)
+    let update = (textColHex, sideColHex) => {
-    let buttonBgColHex = setLightness(textColHex, isLightBg ? 0.90 : 0.14)
+        currentColor = textColHex;
-    setRootColor('text', textColHex)
+        currentSideColor = sideColHex;
-    setRootColor('button', darkerColHex)
+
-    setRootColor('button-active', darkColHex)
+        let isLightBg = isLight(textColorBg)
-    setRootColor('selected-row', darkerColHex)
+        if (isLightBg) textColHex = LightenDarkenColor(textColHex, -15) // vibrant color is always too bright for white bg mode
-    setRootColor('tab-active', buttonBgColHex)
+
-    setRootColor('button-disabled', buttonBgColHex)
+        let darkColHex = LightenDarkenColor(textColHex, isLightBg ? 12 : -20)
-    setRootColor('sidebar', sideColHex)
+        let darkerColHex = LightenDarkenColor(textColHex, isLightBg ? 30 : -40)
+        let buttonBgColHex = setLightness(textColHex, isLightBg ? 0.90 : 0.14)
+        setRootColor('text', textColHex)
+        setRootColor('button', darkerColHex)
+        setRootColor('button-active', darkColHex)
+        setRootColor('selected-row', darkerColHex)
+        setRootColor('tab-active', buttonBgColHex)
+        setRootColor('button-disabled', buttonBgColHex)
+        setRootColor('sidebar', sideColHex)
+    };
+
+    clearInterval(colorFadeInterval); // clear any interval that might be running
+
+    if(!animate) {
+        update(textColHex, sideColHex);
+        return;
+    }
+
+    let clamp = (num,min,max) => Math.min(Math.max(num, min), max);
+    let lerp = (a,b,u) => (1-u) * a + u * b;
+    let toMS = s => parseFloat(s) * (/\ds$/.test(s) ? 1000 : 1);
+
+    let interval = 10; // 10 ms between each call
+    var duration = toMS(getComputedStyle(document.documentElement).getPropertyValue("--song-transition-speed"));
+    if(duration < 1) duration = 1;
+    let startC1 = hexToRgb(currentColor);
+    let startC2 = hexToRgb(currentSideColor);
+
+    let endC1 = hexToRgb(textColHex);
+    let endC2 = hexToRgb(sideColHex);
+
+    var start;
+
+    colorFadeInterval = setInterval(function(){
+        if(!start) { start = performance.now() }
+        let elapsed = performance.now()-start;
+        let ratio = clamp(elapsed/duration, 0, 1)
+
+        let currentC1 = [];
+        let currentC2 = [];
+        for(var i = 0; i < 3; i++){
+            currentC1[i] = lerp(startC1[i], endC1[i], ratio);
+            currentC2[i] = lerp(startC2[i], endC2[i], ratio);
+        }
+
+        update(rgbToHex(currentC1), rgbToHex(currentC2));
+
+        console.log(elapsed+">"+duration+"->"+(elapsed>duration))
+        if (elapsed>duration){ clearInterval(colorFadeInterval) }
+
+    }, interval);
 }
 
 let nearArtistSpanText = ""
@@ -294,7 +344,7 @@ function pickCoverColor(img) {
             sidebarColor = swatches[lightCols[col]].getHex()
             break
         }
-    updateColors(textColor, sidebarColor)
+    updateColors(textColor, sidebarColor, true)
 }
 
 function hookCoverChange(pick) {
@@ -363,6 +413,7 @@ document.styleSheets[0].addRule('.Root__top-container::before',
     backface-visibility: hidden;
     will-change: transform;
     opacity: calc(0.07 + 0.03 * var(--is_light, 0));
-    z-index: +3;`)
+    z-index: +3;
+    transition: background-image var(--song-transition-speed) linear;`)
 
 document.documentElement.style.setProperty('--warning_message', ' ');

dribbblish.js

@@ -131,7 +131,7 @@ DribbblishShared.config.register({
     type: "checkbox",
     key: "rightBigCover",
     name: "Right expanded cover",
-    description: "Have the expanded cover Image on the right instead of onn the left.",
+    description: "Have the expanded cover Image on the right instead of on the left",
     defaultValue: true,
     onChange: (val) => {
         if (val) {
@@ -146,7 +146,7 @@ DribbblishShared.config.register({
     type: "checkbox",
     key: "roundSidebarIcons",
     name: "Round Sidebar Icons",
-    description: "If the Sidebar Iconns should be round instead of square",
+    description: "If the Sidebar Icons should be round instead of square",
     defaultValue: false,
     onChange: (val) => {
         if (val) {
@@ -157,13 +157,26 @@ DribbblishShared.config.register({
     }
 });
 
+DribbblishShared.config.register({
+    type: "select",
+    options: ["No fade", "0.25s", "0.5s", "1s", "5s"],
+    key: "fadeDuration",
+    name: "Color Fade Duration",
+    description: "Select the duration of the color fading transition",
+    defaultValue: 0,
+    onChange: (val) => {
+        let values = ["0s", "0.25s", "0.5s", "1s", "5s"];
+        document.documentElement.style.setProperty("--song-transition-speed", values[val]);
+    }
+});
+
 waitForElement(["#main"], () => {
     DribbblishShared.config.register({
         type: "select",
         options: ["None", "None (With Top Padding)", "Solid", "Transparent"],
         key: "winTopBar",
         name: "Windows Top Bar",
-        description: "Have differennt top Bars (Ore none at all)",
+        description: "Have different top Bars (or none at all)",
         defaultValue: 0,
         onChange: (val) => {
             switch (val) {

user.css

@@ -8,6 +8,7 @@
     --playbar-movement-anim-speed: 0.5s;
     --image-radius: 10px;
     --sidebar-icons-border-radius: 50%;
+    --song-transition-speed: 3s;
 }
 
 @font-face {
@@ -1068,4 +1069,3 @@ html.right-expanded-cover.buddyfeed-visible .main-coverSlotExpanded-container {
 
 .main-actionBar-ActionBarRow button:not(.main-playButton-primary) {
   color: var(--spice-subtext);
-}