Let's use our knowledge of conditionals to build a webpage with buttons that switch between light, dark, and ninja modes.

<html>
<head>
<style>

div {
font-family: "Verdana", Sans-serif;
text-align: center;
border-radius: 7px;
margin-bottom: 5px;
}

.theme {
height: 300px;
padding-top: 3px;
}

.options {
height: 70px;
background-color: gainsboro;
}

button {
height: 40px;
width: 70px;
font-size: 17px;
margin: 15px 5px 5px 0;
border-radius: 5px;
border: none;
}


img {
height: 150px;
width: 150px;
border-radius: 10px;
}

.current {
font-size: 30px;
}

.darkBtn {
background-color: lightsteelblue;
}

.lightBtn {
background-color: ghostwhite;
}

.ninjaBtn {
background-color: darkgray;
}

</style>
</head>
<body>
<div class="theme" id="theme" style="background-color: ghostwhite">
<p id="current" class="current">Light Mode</p>
<img id="themeImg" src="https://mimo.app/i/light-icon.png">
</div>
<div class="options">
<button id="dark" class="darkBtn" onclick="updateColor(this.id)">dark</button>
<button id="light" class="lightBtn" onclick="updateColor(this.id)">light</button>
<button id="ninja" class="ninjaBtn" onclick="updateColor(this.id)">ninja</button>
</div>
<script>
function updateColor(button) {

var theme = document.getElementById(button).textContent;

var color = "ghostwhite";
var image = "https://mimo.app/i/light-icon.png";
var label = "Light Mode";

if (theme === "dark") {
color = "darkslateblue";
image = "https://mimo.app/i/dark-icon.png";
label = "Dark Mode";
} else if (theme === "light") {
color = "ghostwhite";
image = "https://mimo.app/i/light-icon.png";
label = "Light Mode";
} else {
color = "dimgray";
image = "https://mimo.app/i/ninja-icon.png";
label = "Ninja Mode";
}


document.getElementById("themeImg").src = image;
document.getElementById("theme").style.backgroundColor=color;
document.getElementById("current").innerHTML = label;

}
</script>
</body>
</html>]]>