<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>]]>