Add JavaScript based wallpaper changer

This is entirely optional, but allows easy changing of wallpapers without editing the css.
Thanks to @harbassan for letting me use parts of their code (https://github.com/harbassan/spicetify-galaxy/issues/28)

color.ini

@@ -42,7 +42,7 @@ notification       = 1a181e
 notification-error = fb7c7c
 misc               = 0c0e14
 
-[summer]
+[lush]
 text               = ffffff
 subtext            = 68fdab
 main               = 0c0e14

manifest.json

@@ -1,8 +1,22 @@
-{
+[
+    {
         "name": "Retroblur",
         "description": "Theme with a background, blur, animations, gradients and reflections.",
         "preview": "preview/dream.jpg",
         "usercss": "user.css",
         "schemes": "color.ini",
+        "include": ["https://raw.githubusercontent.com/Motschen/Retroblur/fresh/theme.js"],
+        "tags": ["retro", "blur", "animations", "gradients"],
         "readme": "README.md"
-}
+    },
+    {
+        "name": "Retroblur Classic",
+        "description": "Theme with a background, blur, animations and reflections.",
+        "preview": "preview/playlist.png",
+        "usercss": "user.css",
+        "schemes": "color.ini",
+        "readme": "README.md",
+        "tags": ["retro", "blur", "animations"],
+        "branch": "main"
+    }
+]

theme.js

@@ -0,0 +1,188 @@
+/* Based on https://github.com/harbassan/spicetify-galaxy/blob/main/galaxy.js
+   Credits to harbassan
+*/
+(function retroblur() {
+    const YouTubeSVG = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><g fill="gray"><rect width="14.3" height="3.7" x=".8" y="11.5" ry=".1"/><rect width="5" height="5.6" x="-9.6" y="8.2" rx="0" ry=".1" transform="matrix(.63163 -.77527 .80715 .59035 0 0)"/><rect width="4.5" height="4.6" x="-1.3" y="13.1" rx="0" ry=".1" transform="matrix(.9021 -.43155 .62218 .78288 0 0)"/></g><g fill="#fff"><rect width="16" height="1.6" ry=".8"/><rect width="16" height="1.6" y="14.4" ry=".8"/><rect width="1.5" height="15.9" y=".1" ry=".8"/><rect width="1.7" height="15.9" x="14.3" ry=".8"/><ellipse cx="11.2" cy="4.4" rx="1.8" ry="1.9"/><rect width="2.7" height=".5" x="6.3" y="4.2" ry=".2"/><rect width="2.7" height=".5" x="4.9" y="7.1" ry=".2" transform="rotate(-14)"/><rect width="2.1" height=".5" x="6.6" y="-11.3" ry=".2" transform="rotate(90)"/><rect width="2.7" height=".5" x="7.1" y=".1" ry=".2" transform="rotate(18)"/><rect width="2.7" height=".5" x="-4.6" y="11.6" ry=".2" transform="rotate(-67)"/><rect width="2.7" height=".5" x="10" y="-9.6" ry=".2" transform="rotate(70)"/><rect width="2.7" height=".5" x=".1" y="10.5" ry=".2" transform="rotate(-43)"/></g></svg>`
+    if (!(Spicetify.Player.data && Spicetify.Platform)) {
+      setTimeout(retroblur, 100);
+      return;
+    }
+  
+    console.log("retroblur wallpaper changer running");
+  
+    Object.keys(localStorage).forEach(item => {
+      if (item.includes("retroblur:temp")) localStorage.removeItem(item);
+    });
+  
+    const config = {}
+  
+    function parseOptions() {
+      config.matchWallpaperToTheme = JSON.parse(localStorage.getItem("matchWallpaperToTheme"));
+    }
+    parseOptions()
+  
+    let isDim = false;
+  
+    function loopOptions(page) {
+        setBg(startImage);
+    }
+  
+    var defImage = `https://github.com/Motschen/Retroblur/blob/main/assets/background_purple.jpg?raw=true`;
+    console.log(getComputedStyle(document.body).getPropertyValue("--spice-button"))
+    switch (getComputedStyle(document.body).getPropertyValue("--spice-button")) {
+        case " #00bbff": {
+            console.log("setting default wallpaper to water");
+            defImage = "https://images.unsplash.com/photo-1502933691298-84fc14542831?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80";
+            break;
+        }
+        case " #b0fd68": {
+            console.log("setting default wallpaper to lush");
+            defImage = "https://images3.alphacoders.com/356/35627.jpg";
+            break;
+        }
+        case " #ceeb26": {
+            console.log("setting default wallpaper to sun");
+            defImage = "https://images.unsplash.com/photo-1516370873344-fb7c61054fa9?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80";
+            break;
+        }
+        case " #ebb726": {
+            console.log("setting default wallpaper to sunset");
+            defImage = "https://4kwallpapers.com/images/walls/thumbs_3t/4928.jpg";
+            break;
+        }
+        case " #a10003": {
+            console.log("setting default wallpaper to mercy");
+            defImage = "https://images3.alphacoders.com/356/35627.jpg";
+            break;
+        }
+    }
+    let startImage = localStorage.getItem("retroblur:startupBg") || defImage;
+    if (config.matchWallpaperToTheme) startImage = defImage;
+  
+    function setBg(imageData) {
+      var image = imageData;
+      if (config.matchWallpaperToTheme) image = defImage;
+      document.body.style.backgroundImage = "url("+image+")";
+      console.log("setBG"+image)
+    }
+  
+    // input for custom background images
+    const bannerInput = document.createElement("input");
+    bannerInput.type = "file";
+    bannerInput.className = "banner-input";
+    bannerInput.accept = ["image/jpeg", "image/apng", "image/avif", "image/gif", "image/png", "image/svg+xml", "image/webp"].join(",");
+  
+    // when user selects a custom background image
+    bannerInput.onchange = () => {
+      if (!bannerInput.files.length) return;
+  
+      const file = bannerInput.files[0];
+      const reader = new FileReader();
+      reader.onload = event => {
+        const result = event.target.result;
+          try {
+            localStorage.setItem("retroblur:startupBg", result);
+          } catch {
+            Spicetify.showNotification("File too large");
+            return;
+          }
+          document.querySelector("#wallpaper-select img").src = result;
+      };
+      reader.readAsDataURL(file);
+    };
+  
+    const wallpaperEdit = new Spicetify.Menu.Item(
+        "Edit Wallpaper",
+        false,
+        () => {
+            const content = document.createElement("div");
+            content.innerHTML = `
+            <div class="main-playlistEditDetailsModal-albumCover" id="wallpaper-select">
+              <div class="main-entityHeader-image" draggable="false">
+                <img aria-hidden="false" draggable="false" loading="eager" class="main-image-image main-entityHeader-image main-entityHeader-shadow"></div>
+              <div class="main-playlistEditDetailsModal-imageChangeButton">
+                <div class="main-editImage-buttonContainer">
+                  <button class="main-editImageButton-image main-editImageButton-overlay" aria-haspopup="true" type="button">
+                    <div class="main-editImageButton-icon icon">
+                      <svg role="img" height="48" width="48" aria-hidden="true" viewBox="0 0 24 24" class="Svg-sc-1bi12j5-0 EQkJl"><path d="M17.318 1.975a3.329 3.329 0 114.707 4.707L8.451 20.256c-.49.49-1.082.867-1.735 1.103L2.34 22.94a1 1 0 01-1.28-1.28l1.581-4.376a4.726 4.726 0 011.103-1.735L17.318 1.975zm3.293 1.414a1.329 1.329 0 00-1.88 0L5.159 16.963c-.283.283-.5.624-.636 1l-.857 2.372 2.371-.857a2.726 2.726 0 001.001-.636L20.611 5.268a1.329 1.329 0 000-1.879z"></path></svg><span class="Type__TypeElement-goli3j-0 gAmaez main-editImageButton-copy">Choose photo</span></div></button></div></div><div class="main-playlistEditDetailsModal-imageDropDownContainer"><button class="main-playlistEditDetailsModal-imageDropDownButton" type="button"><svg role="img" height="16" width="16" viewBox="0 0 16 16" class="Svg-sc-1bi12j5-0 EQkJl"><path d="M1.47 1.47a.75.75 0 011.06 0L8 6.94l5.47-5.47a.75.75 0 111.06 1.06L9.06 8l5.47 5.47a.75.75 0 11-1.06 1.06L8 9.06l-5.47 5.47a.75.75 0 01-1.06-1.06L6.94 8 1.47 2.53a.75.75 0 010-1.06z"></path></svg><span class="hidden-visually">Edit photo</span></button></div></div>`;
+        
+            const optionList = document.createElement("div");
+        
+            function createOption(name, desc, defVal) {
+              const optionRow = document.createElement("div");
+              optionRow.classList.add("retroblurOptionRow");
+              optionRow.innerHTML = `
+              <span class="retroblurOptionDesc">${desc}</span>
+              <button class="retroblurOptionToggle">
+                <span class="toggleWrapper">
+                  <span class="toggle"></span>
+                </span>
+              </button>`;
+              optionRow.setAttribute("name", name);
+              optionRow.querySelector("button").addEventListener("click", () => {
+                optionRow.querySelector(".toggle").classList.toggle("enabled");
+              });
+              const isEnabled = JSON.parse(localStorage.getItem(name)) ?? defVal;
+              optionRow.querySelector(".toggle").classList.toggle("enabled", isEnabled);
+              optionList.append(optionRow);
+            }
+        
+            const srcInput = document.createElement("input");
+            srcInput.type = "text";
+            srcInput.classList.add("main-playlistEditDetailsModal-textElement", "main-playlistEditDetailsModal-titleInput");
+            srcInput.id = "src-input";
+            srcInput.placeholder = "Wallpaper image URL (recommended)";
+            content.append(srcInput);
+        
+            createOption("matchWallpaperToTheme", "Match wallpaper to the color scheme", true);
+        
+            content.append(optionList);
+        
+            img = content.querySelector("img");
+            img.src = localStorage.getItem("retroblur:startupBg") || defImage;
+            const editButton = content.querySelector(".main-editImageButton-image.main-editImageButton-overlay");
+            editButton.onclick = () => {
+              bannerInput.click();
+            };
+            const removeButton = content.querySelector(".main-playlistEditDetailsModal-imageDropDownButton");
+            removeButton.onclick = () => {
+              content.querySelector("img").src = defImage;
+            };
+        
+            const saveButton = document.createElement("button");
+            saveButton.id = "wallpaper-save";
+            saveButton.innerHTML = "Save";
+        
+            saveButton.addEventListener("click", () => {
+              // update changed bg image
+              startImage = srcInput.value || content.querySelector("img").src;
+              localStorage.setItem("retroblur:startupBg", startImage);
+        
+              // save options to local storage
+              [...optionList.children].forEach(option => {
+                localStorage.setItem(option.getAttribute("name"), option.querySelector(".toggle").classList.contains("enabled"));
+                console.log(`retroblur: ${option.getAttribute("name")} set to ${option.querySelector(".toggle").classList.contains("enabled")}`);
+              });
+              parseOptions();
+              loopOptions("/")
+            });
+        
+            content.append(saveButton);
+        
+            const issueButton = document.createElement("a");
+            issueButton.classList.add("issue-button");
+            issueButton.innerHTML = "Report Issue";
+            issueButton.href = "https://github.com/Motschen/Retroblur/issues";
+            content.append(issueButton);
+        
+            Spicetify.PopupModal.display({ title: "Retroblur Settings", content: content });
+          },
+        YouTubeSVG
+    ).register()
+
+    let trackContextMenu = new Spicetify.ContextMenu.Item("Edit Wallpaper", () => {}, true, YouTubeSVG)
+    trackContextMenu.register()
+  
+    // startup parse
+    loopOptions("/");
+  })();

user.css

@@ -13,11 +13,11 @@
  -> Here are some cartoon wallpapers that suit their theme well:
  Bridge (Dream): https://github.com/Motschen/Retroblur/blob/fresh/assets/background_purple.jpg?raw=true
  Bridge (Mercy): https://github.com/Motschen/Retroblur/blob/fresh/assets/background_red.jpg?raw=true
- Bridge (Summer): https://github.com/Motschen/Retroblur/blob/fresh/assets/background_green.jpg?raw=true
+ Bridge (Lush): https://github.com/Motschen/Retroblur/blob/fresh/assets/background_green.jpg?raw=true
  Bridge (Sun): https://github.com/Motschen/Retroblur/blob/fresh/assets/background_yellow.jpg?raw=true
  Bridge (Water: https://github.com/Motschen/Retroblur/blob/fresh/assets/background_blue.jpg?raw=true
     Bridge Wallpaper Source: https://wallpapercave.com/wp/wp5003466.jpg
- Forest (Summer): https://i.imgur.com/hnpaDeR.jpg
+ Forest (Lush): https://i.imgur.com/hnpaDeR.jpg
 
  -> Here are some real life wallpapers that suit their theme well:
  Beach (Sun): https://wallpapercave.com/wp/wp5922621.jpg
@@ -27,7 +27,7 @@
     Source: https://4kwallpapers.com/flowers/red-flower-red-rose-10670.html
  Evening Clouds (Sunset): https://4kwallpapers.com/images/walls/thumbs_3t/4928.jpg
     Source: https://4kwallpapers.com/nature/sunset-mountain-range-silhouette-landscape-orange-sky-4928.html
- Waterfalls (Summer): https://images3.alphacoders.com/356/35627.jpg
+ Waterfalls (Lush): https://images3.alphacoders.com/356/35627.jpg
     Source: https://wall.alphacoders.com/big.php?i=35627
  Surfing (Sun): https://images.unsplash.com/photo-1516370873344-fb7c61054fa9?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80
     Source: https://unsplash.com/de/fotos/xarhNpLSHTk
@@ -37,7 +37,7 @@
 body {
     /* Set the wallpaper link below */
     /* vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv */
-    background-image: url("https://github.com/Motschen/Retroblur/blob/fresh/assets/background_purple.jpg?raw=true") !important;
+    background-image: linear-gradient(left, #000000, #000000);
     /* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ */
     background-repeat: no-repeat;
     background-size: 100%;
@@ -594,8 +594,9 @@ path[d="M23 0C10.298 0 0 10.297 0 23c0 12.702 10.298 23 23 23 12.703 0 23-10.298
 } */
 /* modals */
 .main-trackCreditsModal-container, .main-aboutRecsModal-container, .main-playlistEditDetailsModal-container, .profile-userEditDetails-container, .artist-artistAbout-modal {
-
+  background-color: rgba(30, 30, 30, 0.4);
   border-radius: var(--border-radius-1) !important;
+  backdrop-filter: blur(14px);
 }
 .main-playlistEditDetailsModal-titleInput, .main-playlistEditDetailsModal-descriptionTextarea, .main-playlistEditDetailsModal-titleInput:focus, .main-playlistEditDetailsModal-descriptionTextarea:focus, .playlist-inlineSearchBox-filterInput {
   background-color: rgba(30, 30, 30, 0.4) !important;
@@ -902,6 +903,7 @@ CANVAS!!!
   background-size: 200% 200%;
   animation: gradientFade 3s linear infinite alternate;
 }
+#wallpaper-save,
 .ButtonInner-lg-iconOnly,
 .playlist-item__img.folder,
 .main-rootlist-rootlistItemLinkActive, .main-rootlist-rootlistItemLinkActive:hover, .VBBDTqhWgM6gWFAMJSUV, .VBBDTqhWgM6gWFAMJSUV:hover,
@@ -912,6 +914,7 @@ CANVAS!!!
   background-size: 200% 200% !important;
   animation: gradientFade 3s ease infinite alternate;
 }
+#wallpaper-save:hover,
 .main-rootlist-rootlistItemLinkActive, .main-rootlist-rootlistItemLinkActive:hover, .VBBDTqhWgM6gWFAMJSUV, .VBBDTqhWgM6gWFAMJSUV:hover,
 .ac0df040748287f39652cc42e3b762ba-scss._926f2bd73c2ddb23fb86b430a2f48707-scss, .main-collectionLinkButton-selected, .main-collectionLinkButton-collectionLinkButton.active,
 .main-navBar-navBarLinkActive, .main-navBar-navBarLinkActive:hover, .main-navBar-navBarLinkActive:active, .main-navBar-navBarLinkActive:focus {
@@ -985,3 +988,111 @@ CANVAS!!!
 .control-button {
   color: var(--spice-subtext) !important;
 }
+/*
+-------------------
+HOME POPUP 
+-------------------
+*/
+#wallpaper-select {
+  width: 100%;
+  height: 200px;
+  margin-bottom: 20px;
+}
+div[aria-label="Retroblur Settings"] .main-trackCreditsModal-mainSection {
+  overflow-y: hidden;
+  padding: 24px;
+}
+.main-trackCreditsModal-container {
+  max-height: 620px;
+}
+.main-trackCreditsModal-originalCredits {
+  padding-bottom: 0;
+}
+.main-userWidget-dropDownMenu li.main-contextMenu-menuItem > div {
+  left: calc(225px + 185px) !important;
+  width: 225px;
+}
+.retroblurOptionRow {
+  display: flex;
+  justify-content: space-between;
+  align-items: initial;
+}
+button.retroblurOptionToggle {
+  display: flex;
+  background-color: transparent;
+  border: hidden;
+}
+span.toggleWrapper {
+  width: 42px;
+  height: 24px;
+  background-color: var(--spice-button);
+  border-radius: 12px;
+  display: flex;
+  align-items: center;
+}
+span.toggleWrapper:disabled {
+  background-color: gray;
+}
+span.toggle {
+  width: 20px;
+  height: 20px;
+  border-radius: 10px;
+  background-color: black;
+  margin-left: 2px;
+}
+span.toggle.enabled {
+  margin-left: 20px;
+}
+#src-input {
+  margin-bottom: 15px;
+}
+#wallpaper-save {
+  margin-top: 15px;
+  box-sizing: border-box;
+  font-family: var(--font-family, spotify-circular),Helvetica,Arial,sans-serif;
+  -webkit-tap-highlight-color: transparent;
+  font-size: 1rem;
+  line-height: 1.5rem;
+  font-weight: 700;
+  background-color: transparent;
+  border: 0;
+  border-radius: 500px;
+  display: inline-block;
+  position: relative;
+  text-align: center;
+  text-decoration: none;
+  text-transform: none;
+  touch-action: manipulation;
+  transition-duration: 33ms;
+  transition-property: background-color,border-color,color,box-shadow,filter,transform;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+  vertical-align: middle;
+  transform: translate3d(0,0,0);
+  padding: 0;
+  min-inline-size: 0px;
+  align-self: center;
+  position: relative;
+  border-radius: 500px;
+  font-size: inherit;
+  padding-block: 12px;
+  padding-inline: 32px;
+  color: black;
+  background-color: var(--spice-button);
+}
+/* report issue link */
+.issue-button {
+  display: initial;
+  vertical-align: -webkit-baseline-middle;
+  font-size: 0.8em;
+  width: fit-content;
+  margin-left: 210px;
+}
+#wallpaper-select > div.main-playlistEditDetailsModal-imageDropDownContainer > button > svg,
+#wallpaper-select > div.main-playlistEditDetailsModal-imageChangeButton > div > button > div {
+  fill: var(--spice-text)
+}
+#wallpaper-select > div.main-playlistEditDetailsModal-imageChangeButton > div > button {
+  border-radius: 10px;
+}