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";
footer.style.backgroundColor = "#B0B0B080";
footer.style.backgroundColor = "#A5A5A580";
toolContainers.forEach(toolContainer => {
toolContainer.style.backgroundColor = "#B0B0B0";
toolContainer.style.borderColor = "#A5A5A5";
let children = toolContainer.children;
for (let i = 0; i < children.length; i++) {
children[i].style.color = "#1E1E1E";
}
});
let welcomeChildren = welcome.querySelectorAll('*');
for (let o = 0; o < welcomeChildren.length; o++) {
welcomeChildren[o].style.color = "#1E1E1E";
}
if (visit) {
visit.style.backgroundColor = "#8CC8A5";
visit.style.borderColor = "#A0DCB9";
}
themeToggle.innerHTML = ``;
} else {
isLightMode = false;
document.body.style.backgroundColor = '#2a2a2a';
toolContainers.forEach(toolContainer => {
let children = toolContainer.children;
for (let i = 0; i < children.length; i++) {
children[i].style.color = "#f0f0f0";
}
toolContainer.style.backgroundColor = "#4b4b4b";
toolContainer.style.borderColor = "#505050";
});
let welcomeChildren = welcome.querySelectorAll('*');
for (let o = 0; o < welcomeChildren.length; o++) {
welcomeChildren[o].style.color = "#f0f0f0";
}
topbar.style.backgroundColor = "rgba(59, 59, 59, 0.885)";
topbar.style.borderColor = "#505050E1";
footer.style.backgroundColor = "#3b3b3b80";
footer.style.backgroundColor = "#46464680";
if (visit) {
visit.style.backgroundColor = "#3c7855";
visit.style.borderColor = "#4b8764";
}
themeToggle.innerHTML = ``;
}
});