How to Change the color Schemes on Blogger With Buttons? [Day-Night Mode]

Switch On Dark and Light Color Schemes

I just wrote a simple script for you using which you can create two buttons which will allow users to change the text color and background color for any container on your site. You can play with this script using MBT HTML Editor 51.

<div  id="switcher-day" >Text Displayed at Day </div>
<div  id="switcher-night" >Text Displayed at Night</div>
<button onClick="Modenight()">Night Mode</button>
<button onClick="Modeday()">Day Mode</button>
<script type='text/javascript'>
function Modeday() {
var element = document.getElementById("switcher-day");
element.style.backgroundColor='#333';
element.style.color='white';
element.style.textAlign='center';
}
</script>

<script type='text/javascript'>
function Modenight() {
var element = document.getElementById("switcher-night");
element.style.backgroundColor='#ddd';
element.style.color='#333';
element.style.textAlign='center';
}
</script>

I created two DIV containers with ID’s switcher-day and switcher-night respectively. When a user will clicks the Night mode button, it activates the Modenight() function which switches on the dark background with white text.

Similarly when a user will clicks the Day mode button, it activates the Modeday() function which switches on the White background with Dark text.

You now use it on your blog with slight customization for post-body div. I am here for all help