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


#1

Is there any way of making a dynamic template? For example, many people use my blog at night with dim light (gives them a hacker kinda feeling), and have requested a ‘white text on dark background’ kind of theme. However, while it helps during night, I tried implementing it and it was terribly straining on the eye to read the blog during day (and the blog has really long tutorials so I try to keep it as comfortable to read as possible).

Is there any way I can put a button which says “night mode”/“day mode” and changes the various elements accordingly?


#2

The Dynamic way is using variable definitions provided by blogger and then manually changing the colors with a click of a mouse using the template designer but since you want the click action to be performed by users for that you can create a javascript

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.

<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 :smile: