From 8539ef806ed155f854dc307a1a90745de84e0f85 Mon Sep 17 00:00:00 2001
From: Julien Maille <julien.maille@gmail.com>
Date: Thu, 3 Jun 2021 21:37:39 +0200
Subject: [PATCH] NEW: smooth color transition

---
 dribbblish-dynamic.js | 32 ++++++++++++++++++++++++++++++--
 1 file changed, 30 insertions(+), 2 deletions(-)

diff --git a/dribbblish-dynamic.js b/dribbblish-dynamic.js
index d485bd9..90f24fa 100644
--- a/dribbblish-dynamic.js
+++ b/dribbblish-dynamic.js
@@ -1,5 +1,6 @@
-let current = '1.0'
+let current = '2.3'
 
+/* css needed for system mode detection */
 document.styleSheets[0].insertRule(`
     :root {
         --system_is_dark: 1;
@@ -11,6 +12,33 @@ document.styleSheets[0].insertRule(`
         }
     }`)
 
+/* css for color transition */
+document.styleSheets[0].insertRule(`
+    @property --spice-sidebar {
+      syntax: '<color>';
+      initial-value: magenta;
+      inherits: true;
+    }`)
+
+document.styleSheets[0].insertRule(`
+    @property --spice-main {
+      syntax: '<color>';
+      initial-value: magenta;
+      inherits: true;
+    }`)
+
+document.styleSheets[0].insertRule(`
+    @property --spice-button {
+      syntax: '<color>';
+      initial-value: magenta;
+      inherits: true;
+    }`)
+    
+document.styleSheets[0].insertRule(`
+    html {
+        transition: --spice-sidebar 1s, --spice-main 1s, --spice-button 1s;
+    }`)
+
 function waitForElement(els, func, timeout = 100) {
     const queries = els.map(el => document.querySelector(el));
     if (queries.every(a => a)) {
@@ -239,7 +267,7 @@ waitForElement([".cover-art-image"], (queries) => {
     Spicetify.showNotification("Applied system " + (systemDark ? "dark" : "light") + " theme.")
 })()
 
-/* translucid background cover */
+/* css for translucid background cover */
 document.styleSheets[0].addRule('.main-view-container__scroll-node-child::before',
 `   content: '';
     background-image: var(--image_url);