`;
document.body.appendChild(host);
debugLog("panel-appended");
bindPanelEvents(shadow);
syncPanelValues(state.theme);
debugLog("create-panel-done");
}
function bindPanelEvents(shadow) {
const $ = (id) => shadow.getElementById(id);
$("preset").addEventListener("change", () => {
const preset = $("preset").value;
debugLog("preset-change", preset);
if (PRESETS[preset]) {
state.preset = preset;
state.theme = { ...PRESETS[preset] };
$("colors").classList.add("hidden");
applyTheme();
return;
}
state.preset = "custom";
$("colors").classList.remove("hidden");
saveState();
});
$("toggleColors").addEventListener("click", () => {
$("colors").classList.toggle("hidden");
debugLog("toggle-colors", {
hidden: $("colors").classList.contains("hidden"),
});
});
$("apply").addEventListener("click", () => {
debugLog("apply-button-click");
state.preset = "custom";
state.theme = readPanelTheme(shadow);
applyTheme();
});
$("reset").addEventListener("click", () => {
debugLog("reset-button-click");
state.preset = DEFAULT_PRESET;
state.theme = { ...PRESETS[DEFAULT_PRESET] };
$("colors").classList.add("hidden");
applyTheme();
});
$("hidePanel").addEventListener("click", () => {
debugLog("hide-panel-click");
$("panel").classList.add("hidden");
$("showPanel").classList.remove("hidden");
});
$("showPanel").addEventListener("click", () => {
debugLog("show-panel-click");
$("panel").classList.remove("hidden");
$("showPanel").classList.add("hidden");
});
}
function readPanelTheme(shadow) {
const read = (id) => shadow.getElementById(id).value;
return {
name: "Custom",
colorScheme: isLightColor(read("bg")) ? "light" : "dark",
bg: read("bg"),
surface: read("surface"),
elevated: read("elevated"),
code: read("code"),
text: read("text"),
muted: read("muted"),
border: read("border"),
link: read("link"),
};
}
function syncPanelValues(theme) {
const host = document.getElementById(PANEL_ID);
if (!host?.shadowRoot) {
return;
}
const shadow = host.shadowRoot;
const set = (id, value) => {
const element = shadow.getElementById(id);
if (element && value) {
element.value = value;
}
};
set("preset", state.preset);
set("bg", theme.bg);
set("surface", theme.surface);
set("elevated", theme.elevated);
set("code", theme.code);
set("text", theme.text);
set("muted", theme.muted);
set("border", theme.border);
set("link", theme.link);
}
function keepThemeStyleLast() {
const observer = new MutationObserver(() => {
requestAnimationFrame(() => {
applyTheme();
});
});
observer.observe(document.head || document.documentElement, {
childList: true,
});
}
})();