在外部 CSS 上使用 classList.toggle

Question

So I've been messing around with JS, and I wanted to make a dark theme toggle button as seen here.

However, that tutorial only shows how to make it work with the <style> tag in HTML, not using an external CSS file.

How could I make it toggle the class .d_theme from an external CSS file?

Answer 1

No difference between external and internal CSS when you use JS to toggle

 document.getElementById("chk").addEventListener("change",function() { document.getElementById("x").classList.toggle("mystyle",this.checked) })

 /* This can be in an external file */ .mystyle { width: 100%; padding: 25px; background-color: coral; color: white; font-size: 25px; box-sizing: border-box; }

 <label><input type="checkbox" id="chk">Change theme</label> <div id="x">Here is some text</div>