(function flavors() {
// Metadata only — colors are defined in the per-flavor CSS files.
const FLAVORS = {
mocha: { label: "Mocha", dot: "#f5c2e7" },
macchiato: { label: "Macchiato", dot: "#f5bde6" },
frappe: { label: "Frappé", dot: "#f4b8e4" },
latte: { label: "Latte", dot: "#ea76cb" },
};
const ORDER = ["mocha", "macchiato", "frappe", "latte"];
const root = document.documentElement;
const ls = window.localStorage;
function apply(name) {
const f = FLAVORS[name] || FLAVORS.mocha;
root.setAttribute("data-flavor", name); // CSS does the rest
const meta = document.querySelector('meta[name="theme-color"]');
if (meta) meta.setAttribute("content", f.dot);
}
let current = ls.getItem("ctpFlavor");
if (!ORDER.includes(current)) current = "mocha";
apply(current); // the snippet already set this to avoid a flash
// ---- top-right corner icon button ----
const bar = document.createElement("div");
bar.className = "beta-bar";
bar.innerHTML = `
`;
// Group the single-item widgets (now-playing + theme toggle) into one
// top bar. On mobile they sit side by side; on desktop both stay
// position:fixed, so this wrapper is zero-size and invisible.
let topbar = document.querySelector(".topbar");
if (!topbar) {
topbar = document.createElement("div");
topbar.className = "topbar";
document.body.insertBefore(topbar, document.body.firstChild);
const np = document.getElementById("now-playing");
// Don't hijack the presence card when it's the centerpiece of the
// dedicated /discord page (it lives inside .presence-stage there).
if (np && !np.closest(".presence-stage")) topbar.appendChild(np);
}
topbar.appendChild(bar);
const btn = bar.querySelector("#flavor-btn");
const icon = bar.querySelector(".beta-icon");
function paintBtn() {
const f = FLAVORS[current];
icon.src = `/assets/theme/${current}.png`; // e.g. /assets/theme/mocha.png
icon.alt = f.label;
btn.title = `Theme: ${f.label} (click to cycle)`;
}
paintBtn();
btn.addEventListener("click", () => {
current = ORDER[(ORDER.indexOf(current) + 1) % ORDER.length];
ls.setItem("ctpFlavor", current);
apply(current);
paintBtn();
});
// ---- cat collection button (sits next to the theme button) ----
const catBtn = document.createElement("button");
catBtn.className = "beta-btn";
catBtn.id = "cat-btn";
catBtn.type = "button";
catBtn.title = "Cat collection";
catBtn.setAttribute("aria-label", "Open cat collection");
catBtn.innerHTML = ``;
bar.appendChild(catBtn);
catBtn.addEventListener("click", () => {
if (typeof window.toggleCatPicker === "function") window.toggleCatPicker();
});
})();