el.className is the whole class string (overwriting it clobbers other classes). el.classList is the surgical API: add, remove, toggle, contains. Driving appearance by toggling classes (styled in CSS) is the DHTML pattern that aged best — it keeps logic and presentation separate.
<!doctype html><html><head><meta charset="utf-8"><style>.open{color:#06040d;background:#b388ff}</style></head>
<body style="background:#06040d;color:#e6e0ff;padding:20px"><button id="b">toggle</button>
<script>const b=document.getElementById('b');b.onclick=()=>b.classList.toggle('open');</script></body></html>