THE section of code with the querySelectorAll('*') does not work.
JavaScript:
//changes the color theme of the UI
eleTheme.addEventListener('change', (event) => {
if (event.target.value === "matrix") {
document.getElementById('contMain').style.backgroundColor = 'rgb(33, 33, 33)'
document.getElementById('input').style.color = 'rgb(0, 255, 0)'
document.getElementById('input').style.borderColor = 'grey'
document.getElementById('option').style.backgroundColor = 'rgb(33, 33, 33)'
let eleClasses = document.querySelectorAll('*')
eleClasses.forEach(ele => {
ele.style.color = 'rgb(46, 214, 219)'
ele.style.borderColor = 'grey'
})
}
if (event.target.value === "ocean") {
document.getElementById('contMain').style.backgroundColor = 'rgb(18, 19, 41)'
document.getElementById('input').style.color = 'rgb(46, 214, 219)'
document.getElementById('input').style.borderColor = 'grey'
let eleClasses = document.querySelectorAll('.contCenter')
eleClasses.forEach(contCenter => {
contCenter.style.color = 'rgb(46, 214, 219)'
contCenter.style.borderColor = 'grey'
})
eleClasses = document.querySelectorAll('.cont')
eleClasses.forEach(cont => {
cont.style.color = 'rgb(46, 214, 219)'
cont.style.borderColor = 'grey'
})
eleClasses = document.querySelectorAll('.contColumn')
eleClasses.forEach(contColumn => {
contColumn.style.color = 'rgb(46, 214, 219)'
contColumn.style.borderColor = 'grey'
})
eleClasses = document.querySelectorAll('.contRow')
eleClasses.forEach(contRow => {
contRow.style.color = 'rgb(46, 214, 219)'
contRow.style.borderColor = 'grey'
})
eleClasses = document.querySelectorAll('select')
eleClasses.forEach(select => {
select.style.color = 'rgb(46, 214, 219)'
select.style.borderColor = 'grey'
})
eleClasses = document.querySelectorAll('option')
eleClasses.forEach(option => {
option.style.color = 'rgb(46, 214, 219)'
option.style.borderColor = 'grey'
option.style.backgroundColor = 'rgb(18, 19, 41)'
})
eleClasses = document.querySelectorAll('p')
eleClasses.forEach(p => {
p.style.color = 'rgb(46, 214, 219)'
})
}