Design a HTML to switch web page from Light & Dark Theme with CSS and Javascript.
Now a days, most of websites allows you to change the theme dynamically i.e. switching from light mode to dark mode and vice versa.
The following example shows you how to change the theme.
Solution:
<html><head>
<title>Change Mode</title>
</head>
<body id="changeMode">
<form align="right">
Switch to:
<input type="radio" value="lightmode" name="mode" onchange="ChangeMode(this.value)" checked> Light Mode
<input type="radio" value="darkmode" name="mode" onchange="ChangeMode(this.value)"> Dark Mode
</form><br>
This blog is developed and maintained by <font color="blue" size="+3"> Govardhan</font><br>
<p>If you want to change the theme of web page from light mode to dark mode and vice versa. Select appropriate radio button to change the theme.</p>
<script type="text/javascript">
function ChangeMode(m){
if(m=='lightmode'){
document.getElementById('changeMode').style.cssText="color: black;background-color: white;";
}
else if(m=='darkmode'){
document.getElementById('changeMode').style.cssText="color: white;background-color: black;";
}
}
</script>
</body>
</html>