Picklet Theme Switcher

Color Themes for Picklet! (first ever picklet script lets go)
Ask a question, post a review, or report the script.
Wrap lines
// ==UserScript==
// @name         Picklet Theme Switcher
// @namespace    http://tampermonkey.net/
// @version      1.1
// @description  Color Themes for Picklet! (first ever picklet script lets go)
// @match        https://*.picklet.party/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    const themeCSS = {
        red: `body, html, main {
    background-image: url("https://c00lestkiddever.nekoweb.org/assets/redbackground.png") !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
}
:root { --accent: oklch(63% .27 25); --accent-dark: oklch(47% .19 25); }
.primary-button.svelte-18sv61c { background-color: var(--accent) !important; box-shadow: 0 5px var(--accent-dark) !important; }
.primary-button.svelte-18sv61c:hover { box-shadow: 0 7px var(--accent-dark) !important; }
.primary-button.svelte-18sv61c:active { box-shadow: 0 3px var(--accent-dark) !important; }
.hover\\:text-green-500:hover { color: var(--accent) !important; }
.toast, .svelte-toast, .toast-container *, ._toastItem { background: var(--accent) !important; color: white !important; border-color: var(--accent-dark) !important; }
.toast-bar, .toast-progress { background: var(--accent-dark) !important; }
input:focus, textarea:focus, select:focus { outline: none !important; box-shadow: 0 0 0 3px var(--accent) !important; }`,

        orange: `body, html, main {
    background-image: url("https://c00lestkiddever.nekoweb.org/assets/orangebackground.png") !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
}
:root { --accent: oklch(72% .27 70); --accent-dark: oklch(57% .19 70); }
.primary-button.svelte-18sv61c { background-color: var(--accent) !important; box-shadow: 0 5px var(--accent-dark) !important; }
.primary-button.svelte-18sv61c:hover { box-shadow: 0 7px var(--accent-dark) !important; }
.primary-button.svelte-18sv61c:active { box-shadow: 0 3px var(--accent-dark) !important; }
.hover\\:text-green-500:hover { color: var(--accent) !important; }
.toast, .svelte-toast, .toast-container *, ._toastItem { background: var(--accent) !important; color: white !important; border-color: var(--accent-dark) !important; }
.toast-bar, .toast-progress { background: var(--accent-dark) !important; }
input:focus, textarea:focus, select:focus { outline: none !important; box-shadow: 0 0 0 3px var(--accent) !important; }`,

        yellow: `body, html, main {
    background-image: url("https://c00lestkiddever.nekoweb.org/assets/yellowbackground.png") !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
}
:root { --accent: oklch(90% .15 100); --accent-dark: oklch(70% .12 100); }
.primary-button.svelte-18sv61c { background-color: var(--accent) !important; box-shadow: 0 5px var(--accent-dark) !important; }
.primary-button.svelte-18sv61c:hover { box-shadow: 0 7px var(--accent-dark) !important; }
.primary-button.svelte-18sv61c:active { box-shadow: 0 3px var(--accent-dark) !important; }
.hover\\:text-green-500:hover { color: var(--accent) !important; }
.toast, .svelte-toast, .toast-container *, ._toastItem { background: var(--accent) !important; color: black !important; border-color: var(--accent-dark) !important; }
.toast-bar, .toast-progress { background: var(--accent-dark) !important; }
input:focus, textarea:focus, select:focus { outline: none !important; box-shadow: 0 0 0 3px var(--accent) !important; }`,

        green: "",

        blue: `body, html, main {
    background-image: url("https://c00lestkiddever.nekoweb.org/assets/bluebackground.png") !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
}
:root { --accent: oklch(52% .27 280); --accent-dark: oklch(40% .19 280); }
.primary-button.svelte-18sv61c { background-color: var(--accent) !important; box-shadow: 0 5px var(--accent-dark) !important; }
.primary-button.svelte-18sv61c:hover { box-shadow: 0 7px var(--accent-dark) !important; }
.primary-button.svelte-18sv61c:active { box-shadow: 0 3px var(--accent-dark) !important; }
.hover\\:text-green-500:hover { color: var(--accent) !important; }
.toast, .svelte-toast, .toast-container *, ._toastItem { background: var(--accent) !important; color: white !important; border-color: var(--accent-dark) !important; }
.toast-bar, .toast-progress { background: var(--accent-dark) !important; }
input:focus, textarea:focus, select:focus { outline: none !important; box-shadow: 0 0 0 3px var(--accent) !important; }`,

        purple: `body, html, main {
    background-image: url("https://c00lestkiddever.nekoweb.org/assets/purplebackground.png") !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
}
:root { --accent: oklch(60% .27 320); --accent-dark: oklch(45% .19 320); }
.primary-button.svelte-18sv61c { background-color: var(--accent) !important; box-shadow: 0 5px var(--accent-dark) !important; }
.primary-button.svelte-18sv61c:hover { box-shadow: 0 7px var(--accent-dark) !important; }
.primary-button.svelte-18sv61c:active { box-shadow: 0 3px var(--accent-dark) !important; }
.hover\\:text-green-500:hover { color: var(--accent) !important; }
.toast, .svelte-toast, .toast-container *, ._toastItem { background: var(--accent) !important; color: white !important; border-color: var(--accent-dark) !important; }
.toast-bar, .toast-progress { background: var(--accent-dark) !important; }
input:focus, textarea:focus, select:focus { outline: none !important; box-shadow: 0 0 0 3px var(--accent) !important; }`,

        pink: `body, html, main {
    background-image: url("https://c00lestkiddever.nekoweb.org/assets/pinkbackground.png") !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
}
:root { --accent: oklch(70% .27 340); --accent-dark: oklch(55% .19 340); }
.primary-button.svelte-18sv61c { background-color: var(--accent) !important; box-shadow: 0 5px var(--accent-dark) !important; }
.primary-button.svelte-18sv61c:hover { box-shadow: 0 7px var(--accent-dark) !important; }
.primary-button.svelte-18sv61c:active { box-shadow: 0 3px var(--accent-dark) !important; }
.hover\\:text-green-500:hover { color: var(--accent) !important; }
.toast, .svelte-toast, .toast-container *, ._toastItem { background: var(--accent) !important; color: white !important; border-color: var(--accent-dark) !important; }
.toast-bar, .toast-progress { background: var(--accent-dark) !important; }
input:focus, textarea:focus, select:focus { outline: none !important; box-shadow: 0 0 0 3px var(--accent) !important; }`,

        black: `body, html, main {
    background-image: url("https://c00lestkiddever.nekoweb.org/assets/blackbackground.png") !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
}
:root { --accent: #222; --accent-dark: #000; }
.primary-button.svelte-18sv61c { background-color: var(--accent) !important; box-shadow: 0 5px var(--accent-dark) !important; }
.primary-button.svelte-18sv61c:hover { box-shadow: 0 7px var(--accent-dark) !important; }
.primary-button.svelte-18sv61c:active { box-shadow: 0 3px var(--accent-dark) !important; }
.hover\\:text-green-500:hover { color: var(--accent) !important; }
.toast, .svelte-toast, .toast-container *, ._toastItem { background: var(--accent) !important; color: white !important; border-color: var(--accent-dark) !important; }
.toast-bar, .toast-progress { background: var(--accent-dark) !important; }
input:focus, textarea:focus, select:focus { outline: none !important; box-shadow: 0 0 0 3px var(--accent) !important; }`,

        brown: `body, html, main {
    background-image: url("https://c00lestkiddever.nekoweb.org/assets/brownbackground.png") !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
}
:root { --accent: oklch(50% .25 35); --accent-dark: oklch(35% .18 35); }
.primary-button.svelte-18sv61c { background-color: var(--accent) !important; box-shadow: 0 5px var(--accent-dark) !important; }
.primary-button.svelte-18sv61c:hover { box-shadow: 0 7px var(--accent-dark) !important; }
.primary-button.svelte-18sv61c:active { box-shadow: 0 3px var(--accent-dark) !important; }
.hover\\:text-green-500:hover { color: var(--accent) !important; }
.toast, .svelte-toast, .toast-container *, ._toastItem { background: var(--accent) !important; color: white !important; border-color: var(--accent-dark) !important; }
.toast-bar, .toast-progress { background: var(--accent-dark) !important; }
input:focus, textarea:focus, select:focus { outline: none !important; box-shadow: 0 0 0 3px var(--accent) !important; }`
    };

    const sidebarColors = {
        red: { bg: "#ff4d4d", shadow: "#b30000" },
        orange: { bg: "#ff9a4d", shadow: "#b36b00" },
        yellow: { bg: "#ffea4d", shadow: "#b3a300" },
        green: { bg: "", shadow: "" },
        blue: { bg: "#4da6ff", shadow: "#0066b3" },
        purple: { bg: "#b84dff", shadow: "#6600b3" },
        pink: { bg: "#ff4da6", shadow: "#b30066" },
        black: { bg: "#222", shadow: "#000" },
        brown: { bg: "#8B4513", shadow: "#5C2D00" }
    };

    let style = document.createElement("style");
    style.id = "theme-style";
    document.head.appendChild(style);

    function applyTheme(theme) {
        style.innerText = themeCSS[theme] || "";
        document.querySelectorAll(".sidebar.svelte-129hoe0").forEach(sb => {
            if (theme === "green") {
                sb.style.backgroundColor = "";
                sb.style.boxShadow = "";
            } else {
                sb.style.backgroundColor = sidebarColors[theme].bg;
                sb.style.boxShadow = `8px 0 ${sidebarColors[theme].shadow}`;
            }
        });
        localStorage.setItem("pickletTheme", theme);
    }

    applyTheme(localStorage.getItem("pickletTheme") || "green");

    const observer = new MutationObserver(() => applyTheme(localStorage.getItem("pickletTheme") || "green"));
    observer.observe(document.body, { childList: true, subtree: true });

    function addThemeButton() {
        const logoutBtn = document.querySelector("button.red-button.picklet-button");
        if (!logoutBtn) return setTimeout(addThemeButton, 500);

        const themeBtn = logoutBtn.cloneNode(true);
        themeBtn.innerHTML = `<i class="fas fa-paintbrush" style="margin-right:0.5em;"></i> Change Theme`;

        const dropdown = document.createElement("div");
        dropdown.style.position = "absolute";
        dropdown.style.background = "#222";
        dropdown.style.color = "white";
        dropdown.style.border = "1px solid #555";
        dropdown.style.borderRadius = "8px";
        dropdown.style.padding = "5px";
        dropdown.style.display = "none";
        dropdown.style.flexDirection = "column";
        dropdown.style.zIndex = 9999;

        const order = ["red","orange","yellow","green","blue","purple","pink","black","brown"];
        order.forEach(key => {
            const item = document.createElement("button");
            item.textContent = key.charAt(0).toUpperCase() + key.slice(1);
            item.style.margin = "2px 0";
            item.style.padding = "4px 8px";
            item.style.background = "#333";
            item.style.color = "white";
            item.style.border = "none";
            item.style.cursor = "pointer";
            item.style.borderRadius = "4px";
            item.addEventListener("click", () => {
                applyTheme(key);
                dropdown.style.display = "none";
            });
            item.addEventListener("mouseenter", () => item.style.background = "#555");
            item.addEventListener("mouseleave", () => item.style.background = "#333");
            dropdown.appendChild(item);
        });

        document.body.appendChild(dropdown);

        themeBtn.style.position = "relative";
        themeBtn.addEventListener("click", e => {
            e.stopPropagation();
            const rect = themeBtn.getBoundingClientRect();
            dropdown.style.top = `${rect.bottom + window.scrollY + 5}px`;
            dropdown.style.left = `${rect.left + window.scrollX}px`;
            dropdown.style.display = dropdown.style.display === "flex" ? "none" : "flex";
        });

        document.addEventListener("click", () => dropdown.style.display = "none");
        logoutBtn.parentNode.insertBefore(themeBtn, logoutBtn.nextSibling);
    }

    addThemeButton();
})();