Notification texts go here. Contact Us Buy Now!
$10.00
10
$000

Get your blog ready With details you won't find anywhere.

How to Create Dark Mode Feature (Light / Dark) For Blogspot

abdalrahman
Please wait 0 seconds...
Scroll Down and click on Go to Link for destination
Congrats! Link is Generated

Currently, the Drake Mode trend is quite popular in blogs. Depending on the theme, your website may or may not have this feature. So, in this article, I will show you how to add this feature to your blog.



<style>.dark-mode{width:66px}.toggle,.mode{position:relative;float:right;outline:0;border:0;padding:0;overflow:hidden;cursor:pointer}.toggle{margin-left:10px;border-radius:10px;width:33px;height:20px}.toggle,.mode::before,.dark .mode::after{background:#ccc}.dark .toggle{background:#444}.auto .toggle{background:#6d6!important}.toggle::before,.mode::before,.mode::after{position:absolute;content:''}.toggle::before{top:1px;left:1px;transition:.4s;background:#fff;width:18px;height:18px}.auto .toggle::before{left:14px}.toggle::before,.mode,.mode::before,.mode::after{border-radius:50%}.dark .mode{top:2px;left:-2px;overflow:visible}.dark .mode,.dark .mode::before{border-radius:0}.mode,.dark .mode::before,.mode::after{background:#999}.mode{width:20px;height:20px}.dark .mode,.mode::before,.mode::after{width:16px;height:16px}.mode::before{top:2px;left:2px}.dark .mode::before{top:0;left:0;transform:rotate(45deg)}.mode::after{top:-3px;left:7px}.dark .mode::after{top:1px;left:1px;width:14px;height:14px}</style><script>//<![CDATA[/*Dark mode made by duy-pham.blogspot.com*/function auto(){document.body.classList.add('auto');if(new Date().getHours()>21||new Date().getHours()<7){document.body.classList.add('dark');localStorage.setItem('799738dark','true')}else{document.body.classList.remove('dark');localStorage.setItem('799738dark','false')}}function dark(){localStorage.getItem('799738dark')=='true'?document.body.classList.add('dark'):document.body.classList.remove('dark')}if(localStorage.getItem('799738auto')=='true'){auto()}else{localStorage.getItem('799738dark')==null?auto():dark()}function toggle(){localStorage.setItem('799738auto',localStorage.getItem('799738auto')=='true'?'false':'true');localStorage.getItem('799738auto')=='true'?auto():document.body.classList.remove('auto')}function mode(){document.body.classList.remove('auto');localStorage.removeItem('799738auto');localStorage.setItem('799738dark',localStorage.getItem('799738dark')=='true'?'false':'true');dark()}//]]></script>

Step 3: Insert the following code where you want it to display

<div class='dark-mode'> <button class='toggle' onclick='toggle()' type='button'/> <button class='mode' onclick='mode()' type='button'/></div>

Step 4: Find the CSS snippet of the form:

.header{background-color:#FFFFFF;color:#000000;}

Then you convert the above code to:

.header{background-color:#FFFFFF;color:#FFFFFF;}.dark .header{background-color:#FFFFFF;color:#FFFFFF;}

Note: Change FFFFFF to the color code you want (you can get the color code here )


Step 5: Save the topic and see the results!

EPILOGUE

Just take a moment, you can add a new widget to the blog. If you have any questions or leave a comment, we will solve it together!

Read Also

Getting Info...

Post a Comment

Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.