🐛 Remove any existing Spicetify user.css when applying themes

spicetify · Dec 4, 2021 · 8b63585 · 8b63585
1 parent 8aa5177
commit 8b63585
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 3 deletions.
diff --git a/extension.js b/extension.js
@@ -101,7 +101,7 @@ const getParamsFromGithubRaw = (url) => {
     // NOTE: Keep in sync with index.js
     const injectColourScheme = (scheme) => {
         try {
-            // Remove default scheme
+            // Remove any existing Spicetify scheme
             const existingColorsCSS = document.querySelector("link[href='colors.css']");
             if (existingColorsCSS) existingColorsCSS.remove();
 
@@ -131,6 +131,10 @@ const getParamsFromGithubRaw = (url) => {
 
     const injectUserCSS = (userCSS) => {
         try {
+            // Remove any existing Spicetify user.css
+            const existingUserThemeCSS = document.querySelector("link[href='user.css']");
+            if (existingUserThemeCSS) existingUserThemeCSS.remove();
+
             // Remove any existing marketplace scheme
             const existingMarketplaceUserCSS = document.querySelector("style.marketplaceCSS.marketplaceUserCSS");
             if (existingMarketplaceUserCSS) existingMarketplaceUserCSS.remove();

diff --git a/index.js b/index.js
@@ -379,7 +379,7 @@ class Grid extends react.Component {
 
     // NOTE: Keep in sync with extension.js
     injectColourScheme (scheme) {
-        // Remove default scheme
+        // Remove any existing Spicetify scheme
         const existingColorsCSS = document.querySelector("link[href='colors.css']");
         if (existingColorsCSS) existingColorsCSS.remove();
 
@@ -411,6 +411,7 @@ class Grid extends react.Component {
         // 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 existingColorsCSS = document.querySelector("link[href='colors.css']");
         if (existingColorsCSS) existingColorsCSS.remove();
 
@@ -426,7 +427,7 @@ class Grid extends react.Component {
         newUserThemeCSS.href = cssUrl;
         newUserThemeCSS.rel = "stylesheet";
         newUserThemeCSS.classList.add("userCSS", "marketplaceCSS");
-        document.body.appendChild(newUserThemeCSS);
+        document.head.appendChild(newUserThemeCSS);
     }
 
     async componentDidMount() {