add option to insert custom CSS

CHANGELOG.md

@@ -2,6 +2,7 @@ Added:
 - A spinning loader at startup while spotify is not ready (Can be disabled in settings)
 - The old search box in the top bar (Can be disabled in settings)
 - Ability to disable the progress transition to improve performance `Playbar > Progress Transition` (#118)
+- Option to insert custom CSS
 
 Fixed:
 - Checking for update every 10 Minutes not working

package.json

@@ -8,7 +8,7 @@
     "devDependencies": {
         "@material-icons/svg": "^1.0.22",
         "clean-webpack-plugin": "^4.0.0",
-        "sass": "^1.43.4",
+        "sass": "^1.43.5",
         "sass-loader": "^12.2.0",
         "webpack": "^5.58.2",
         "webpack-cli": "^4.9.0"

src/js/main.js

@@ -329,6 +329,27 @@ Dribbblish.on("ready", () => {
         onChange: (val) => $("html").css("--song-transition-speed", `${val}s`)
     });
 
+    Dribbblish.config.registerArea({ name: "Advanced", order: 998 });
+
+    Dribbblish.config.register({
+        area: "Advanced",
+        type: "textarea",
+        key: "customCss",
+        name: "Custom CSS",
+        description: `
+            Put custom CSS here. It is recommended that you use some kind of online editor like [CodePen](https://codepen.io/pen/), or even an IDE like [VS Code](https://code.visualstudio.com/) and paste the CSS here.
+        `,
+        onChange: (val) => {
+            let styleElem = document.querySelector("#dribbblish-custom-styles");
+            if (!styleElem) {
+                styleElem = document.createElement("style");
+                styleElem.id = "dribbblish-custom-styles";
+                document.body.appendChild(styleElem);
+            }
+            styleElem.innerHTML = val;
+        }
+    });
+
     Dribbblish.config.registerArea({ name: "About", order: 999 });
 
     Dribbblish.config.register({