🐛 Update index.injectColourScheme to be same as `extension.injectCo…

…lourScheme`
spicetify · Dec 4, 2021 · 8aa5177 · 8aa5177
1 parent 4d50048
commit 8aa5177
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 10 deletions.
diff --git a/extension.js b/extension.js
@@ -98,15 +98,16 @@ const getParamsFromGithubRaw = (url) => {
         document.body.appendChild(script);
     };
 
+    // NOTE: Keep in sync with index.js
     const injectColourScheme = (scheme) => {
         try {
             // Remove default scheme
             const existingColorsCSS = document.querySelector("link[href='colors.css']");
             if (existingColorsCSS) existingColorsCSS.remove();
 
             // Remove any existing marketplace scheme
-            const existingMarketplaceThemeCSS = document.querySelector("style.marketplaceCSS.marketplaceScheme");
-            if (existingMarketplaceThemeCSS) existingMarketplaceThemeCSS.remove();
+            const existingMarketplaceSchemeCSS = document.querySelector("style.marketplaceCSS.marketplaceScheme");
+            if (existingMarketplaceSchemeCSS) existingMarketplaceSchemeCSS.remove();
 
             // Add new marketplace scheme
             const schemeTag = document.createElement("style");
@@ -224,8 +225,8 @@ const getParamsFromGithubRaw = (url) => {
 
         // Remove default css
         // TODO: what about if we remove the theme? Should we re-add the user.css/colors.css?
-        const existingUserThemeCSS = document.querySelector("link[href='user.css']");
-        if (existingUserThemeCSS) existingUserThemeCSS.remove();
+        // const existingUserThemeCSS = document.querySelector("link[href='user.css']");
+        // if (existingUserThemeCSS) existingUserThemeCSS.remove();
 
         // Remove any existing marketplace theme
         const existingMarketplaceThemeCSS = document.querySelector("link.marketplaceCSS");

diff --git a/index.js b/index.js
@@ -377,14 +377,20 @@ class Grid extends react.Component {
         this.setState({});
     }
 
+    // NOTE: Keep in sync with extension.js
     injectColourScheme (scheme) {
+        // Remove default scheme
+        const existingColorsCSS = document.querySelector("link[href='colors.css']");
+        if (existingColorsCSS) existingColorsCSS.remove();
+
         // Remove any existing marketplace scheme
-        const existingMarketplaceThemeCSS = document.querySelector("style.marketplaceCSS");
-        if (existingMarketplaceThemeCSS) existingMarketplaceThemeCSS.remove();
+        const existingMarketplaceSchemeCSS = document.querySelector("style.marketplaceCSS.marketplaceScheme");
+        if (existingMarketplaceSchemeCSS) existingMarketplaceSchemeCSS.remove();
 
         // Add new marketplace scheme
-        const themeTag = document.createElement("style");
-        themeTag.classList.add("marketplaceCSS");
+        const schemeTag = document.createElement("style");
+        schemeTag.classList.add("marketplaceCSS");
+        schemeTag.classList.add("marketplaceScheme");
         // const theme = document.querySelector('#theme');
         let injectStr = ":root {";
         const themeIniKeys = Object.keys(scheme);
@@ -393,11 +399,12 @@ class Grid extends react.Component {
             injectStr += `--spice-rgb-${key}: ${hexToRGB(scheme[key])};`;
         });
         injectStr += "}";
-        themeTag.innerHTML = injectStr;
-        document.head.appendChild(themeTag);
+        schemeTag.innerHTML = injectStr;
+        document.head.appendChild(schemeTag);
     }
 
     // TODO: this isn't used yet. It would be great if we could add/remove themes without reloading the page
+    // NOTE: Keep in sync with extension.js
     // eslint-disable-next-line
     applyTheme(theme) {
         // Remove default css