const themeToggle = document.getElementById('themeToggle');
const topbar = document.getElementById('topbar');
const toolContainers = document.querySelectorAll('.tool-div');
const visit = document.getElementById('visit');
const welcome = document.getElementById('welcome');
let isLightMode = false;
themeToggle.addEventListener('click', function () {
if (!isLightMode) {
isLightMode = true;
document.body.style.backgroundColor = '#C8C8C8';
topbar.style.backgroundColor = "#B0B0B0E1";
topbar.style.borderColor = "#aeaeaeE1";
toolContainers.forEach(toolContainer => {
const toolChildren = toolContainer.children;
for (let i = 0; i < toolChildren.length; i++) {
toolChildren[i].style.color = "#1E1E1E";
}
toolContainers.style.backgroundColor = "#B0B0B0";
toolContainers.style.borderColor = "#aeaeae";
});
const welcomeChildren = welcome.querySelectorAll('*');
welcomeChildren.forEach(child => {
child.style.color = "#1E1E1E";
});
if (visit) {
visit.style.backgroundColor = "#8CC8A5";
visit.style.borderColor = "#A0DCB9";
}
themeToggle.innerHTML = `
`;
} else {
isLightMode = false;
document.body.style.backgroundColor = '#2a2a2a';
topbar.style.backgroundColor = "rgba(59, 59, 59, 0.885)";
topbar.style.borderColor = "#505050E1";
toolContainers.forEach(toolContainer => {
const toolChildren = toolContainer.children;
for (let i = 0; i < toolChildren.length; i++) {
toolChildren[i].style.color = "#f0f0f0";
toolChildren[i].style.backgroundColor = "";
toolChildren[i].style.borderColor = "";
}
});
const welcomeChildren = welcome.querySelectorAll('*');
welcomeChildren.forEach(child => {
child.style.color = "#f0f0f0";
});
if (visit) {
visit.style.backgroundColor = "#3c7855";
visit.style.borderColor = "#4b8764";
}
themeToggle.innerHTML = `
`;
}
});