Select Theme Type:
`;
document.body.append(themeEditor);
setTimeout(() => {
document.querySelectorAll(".stats-btn__share-btn")[1].querySelector("rect").remove();
const themeTypeSelect = document.getElementById("theme-type-select");
const colorTab = document.getElementById("theme_editor_color");
const gradientTab = document.getElementById("theme_editor_gradient");
const imageTab = document.getElementById("theme_editor_image");
const gradientAngleDiv = document.getElementById("theme-editor-gradient_angle");
themeTypeSelect.addEventListener("change", function() {
const selectedOption = themeTypeSelect.value;
switch (selectedOption) {
case "Static Color":
colorTab.style.display = "flex";
gradientTab.style.display = "none";
imageTab.style.display = "none";
break;
case "Gradient":
colorTab.style.display = "none";
gradientTab.style.display = "flex";
imageTab.style.display = "none";
break;
case "Image / Gif":
colorTab.style.display = "none";
gradientTab.style.display = "none";
imageTab.style.display = "flex";
break;
default:
colorTab.style.display = "flex";
gradientTab.style.display = "none";
imageTab.style.display = "none";
}
});
const colorInputs = document.querySelectorAll("#theme_editor_color .colorInput");
colorInputs.forEach(input => {
input.addEventListener("input", function() {
const bgColorInput = document.getElementById("theme-editor-bgcolorinput").value;
const textColorInput = document.getElementById("theme-editor-colorinput").value;
applyColorTheme(bgColorInput, textColorInput);
});
});
const gradientInputs = document.querySelectorAll("#theme_editor_gradient .colorInput");
gradientInputs.forEach(input => {
input.addEventListener("input", function() {
const gColor1 = document.getElementById("theme-editor-gcolor1").value;
const gColor2 = document.getElementById("theme-editor-g_color").value;
const gTextColor = document.getElementById("theme-editor-gcolor2").value;
const gAngle = document.getElementById("g_angle").value;
const gradientType = document.getElementById("gradient-type").value;
applyGradientTheme(gColor1, gColor2, gTextColor, gAngle, gradientType);
});
});
const imageInputs = document.querySelectorAll("#theme_editor_image .colorInput");
imageInputs.forEach(input => {
input.addEventListener("input", function() {
const imageLinkInput = document.getElementById("theme-editor-imagelink").value;
const textColorImageInput = document.getElementById("theme-editor-textcolorImage").value;
let img;
if(imageLinkInput == "") {
img = "https://i.ibb.co/k6hn4v0/Galaxy-Example.png"
} else {
img = imageLinkInput;
}
applyImageTheme(img, textColorImageInput);
});
});
const image_preview = document.getElementById("image_preview");
const image_link = document.getElementById("theme-editor-imagelink");
let isWriting = false;
let timeoutId;
image_link.addEventListener("input", () => {
if (!isWriting) {
isWriting = true;
} else {
clearTimeout(timeoutId);
}
timeoutId = setTimeout(() => {
const imageLinkInput = image_link.value;
const textColorImageInput = document.getElementById("theme-editor-textcolorImage").value;
let img;
if (imageLinkInput === "") {
img = "https://i.ibb.co/k6hn4v0/Galaxy-Example.png";
} else {
img = imageLinkInput;
}
applyImageTheme(img, textColorImageInput);
isWriting = false;
}, 1000);
});
const gradientTypeSelect = document.getElementById("gradient-type");
const angleInput = document.getElementById("g_angle");
gradientTypeSelect.addEventListener("change", function() {
const selectedType = gradientTypeSelect.value;
gradientAngleDiv.style.display = selectedType === "linear" ? "flex" : "none";
const gColor1 = document.getElementById("theme-editor-gcolor1").value;
const gColor2 = document.getElementById("theme-editor-g_color").value;
const gTextColor = document.getElementById("theme-editor-gcolor2").value;
const gAngle = document.getElementById("g_angle").value;
applyGradientTheme(gColor1, gColor2, gTextColor, gAngle, selectedType);
});
angleInput.addEventListener("input", function() {
const gradient_angle_text = document.getElementById("gradient_angle_text");
gradient_angle_text.innerText = `Angle (${angleInput.value}deg): `;
const gColor1 = document.getElementById("theme-editor-gcolor1").value;
const gColor2 = document.getElementById("theme-editor-g_color").value;
const gTextColor = document.getElementById("theme-editor-gcolor2").value;
const gAngle = document.getElementById("g_angle").value;
const gradientType = document.getElementById("gradient-type").value;
applyGradientTheme(gColor1, gColor2, gTextColor, gAngle, gradientType);
});
function applyColorTheme(bgColor, textColor) {
const previewDivs = document.querySelectorAll("#theme_editor_color .themes_preview");
previewDivs.forEach(previewDiv => {
previewDiv.style.backgroundColor = bgColor;
const textSpan = previewDiv.querySelector("span.text");
textSpan.style.color = textColor;
});
}
function applyGradientTheme(gColor1, gColor2, gTextColor, gAngle, gradientType) {
const previewDivs = document.querySelectorAll("#theme_editor_gradient .themes_preview");
previewDivs.forEach(previewDiv => {
const gradient = gradientType === "linear"
? `linear-gradient(${gAngle}deg, ${gColor1}, ${gColor2})`
: `radial-gradient(circle, ${gColor1}, ${gColor2})`;
previewDiv.style.background = gradient;
const textSpan = previewDiv.querySelector("span.text");
textSpan.style.color = gTextColor;
});
}
function applyImageTheme(imageLink, textColor) {
const previewDivs = document.querySelectorAll("#theme_editor_image .themes_preview");
previewDivs.forEach(previewDiv => {
previewDiv.style.backgroundImage = `url('${imageLink}')`;
const textSpan = previewDiv.querySelector("span.text");
textSpan.style.color = textColor;
});
}
const createTheme = document.getElementById("createTheme");
createTheme.addEventListener("click", () => {
themeEditor.style.display = "block";
});
const closeThemeEditor = document.getElementById("closeThemeEditor");
closeThemeEditor.addEventListener("click", () => {
themeEditor.style.display = "none";
});
let themesDiv = document.getElementById("themes")
const saveColorThemeBtn = document.getElementById("saveColorTheme");
const saveGradientThemeBtn = document.getElementById("saveGradientTheme");
const saveImageThemeBtn = document.getElementById("saveImageTheme");
saveColorThemeBtn.addEventListener("click", () => {
const name = document.getElementById("colorThemeName").value;
const bgColorInput = document.getElementById("theme-editor-bgcolorinput").value;
const textColorInput = document.getElementById("theme-editor-colorinput").value;
if(name == "") return
const theme = {
name: name,
background: bgColorInput,
text: textColorInput
};
const themeCard = document.createElement("div");
themeCard.classList.add("theme");
let themeBG;
if (theme.background.includes("http")) {
themeBG = `background: url(${theme.background})`;
} else {
themeBG = `background: ${theme.background}`;
}
themeCard.innerHTML = `