JS: Button to Switch to Dark Theme

By Xah Lee. Date: .

Press the following buttons to toggle dark theme.

Here is the HTML code:

<button id="buttonBlack" type="button">Dark Theme</button>
<button id="buttonWhite" type="button">Light Theme</button>

Here is the JavaScript code:

"use strict";
{
    const xbody = document.body;
    const buttonWhite = document.getElementById("buttonWhite");
    const buttonBlack = document.getElementById("buttonBlack");
    buttonWhite.addEventListener("click", () => {
        xbody.style.color = "black";
        xbody.style.backgroundColor = "white";
    }, false);
    buttonBlack.addEventListener("click", () => {
        xbody.style.color = "white";
        xbody.style.backgroundColor = "black";
    }, false);
}

Dark Theme

BUY ΣJS JavaScript in Depth