Working Dark mode - Night mode for Bloger Blogspot

 

Working Dark mode helps your readers to comfortably read the text on screens.It also help's the users to stay your website longer then usual, since texts on white backgrounds might hurt the eyes of the user and force's the user to easily leave your website. While this might drive tangible problem and losses to you if you are selling something and made an ad promoting the products, becouse of bad user experience.

On the other hand, it's also very important to your blogger blog while it can help you boost your personal seo Experience.

So today we just gonna helping you step by step Tutorial on how to add Switchable dark-Mode Or night Mode to your Blogger Blog successfully.

How to Add Dark Mode - Night Mode to your Bloggger Blog

Note: back-up your whole blog Before Adding anything to it.

The first Step is to Add the html code into your blogger.
To add go to Theme > Edit html and search for </head> Or &lt;/head&gt;&lt;!--<head/>--&gt; and paste the following code above it.

<div class='modedark'><input class='check' id='modedark' title='Mode Dark' type='checkbox'/>
<label class='iconmode' for='modedark'>
<svg class='openmode' viewBox='0 0 24 24'><path d='M12,18C11.11,18 10.26,17.8 9.5,17.45C11.56,16.5 13,14.42 13,12C13,9.58 11.56,7.5 9.5,6.55C10.26,6.2 11.11,6 12,6A6,6 0 0,1 18,12A6,6 0 0,1 12,18M20,8.69V4H15.31L12,0.69L8.69,4H4V8.69L0.69,12L4,15.31V20H8.69L12,23.31L15.31,20H20V15.31L23.31,12L20,8.69Z'/></svg>
<svg class='closemode' viewBox='0 0 24 24'><path d='M14.3,16L13.6,14H10.4L9.7,16H7.8L11,7H13L16.2,16H14.3M20,8.69V4H15.31L12,0.69L8.69,4H4V8.69L0.69,12L4,15.31V20H8.69L12,23.31L15.31,20H20V15.31L23.31,12L20,8.69M10.85,12.65H13.15L12,9L10.85,12.65Z'/></svg>
</label>
</div>

Next Add the Jquery Script Code below on above </body> or &lt;!--</body>
Warning - This code Nevewr work if you dont load the jquery.min.js

<script src='//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script>

<script type='text/javascript'>
//<![CDATA[
/* Night Mode/Dark Mode Feature - By TwistBlogg.com */ 
/* Keep the Credit Intact */ 
$(document).ready(function(){$("body").toggleClass(localStorage.toggled),$("#modedark").on("click",function(){"nightmode"!=localStorage.toggled?($("body").toggleClass("nightmode",!0),localStorage.toggled="nightmode",$(".section-center").css("display","block")):($("body").toggleClass("nightmode",!1),localStorage.toggled="",$(".section-center").css("display",""))}),$("body").hasClass("nightmode")?$("#modedark").prop("checked",!0):$("#modedark").prop("checked",!1)});
//]]>
</script>

No add the css part anywhere between head Section

<style type="text/css">
/*---- Night Mode/Dark Mode Feature - By TwistBlogg.com ----*/ 
.modedark {
    background: linear-gradient(to right, #eb3349 40%, #f45c43); //Background color of icon
    float: left;
    position: fixed;
    bottom: 0;             //Change this for position 
    z-index: 999;
    opacity:0.7            //Opacity Degree Of Icon 
}

.modedark svg {
    width: 24px;
    height: 24px;
    vertical-align: -5px;
    background-repeat: no-repeat!important;
    content: ''
}

.modedark svg path {
    fill: #fff
}

.modedark .check:checked~.NavMenu {
    opacity: 1;
    visibility: visible;
    top: 45px;
    min-width: 200px;
    transition: all .3s ease;
    z-index: 2
}

.iconmode {
    cursor: pointer;
    display: block;
    padding: 8px;
    background-position: center;
    transition: all .5s linear
}

.iconmode:hover {
    border-radius: 100px;
    background: rgba(0, 0, 0, .2) radial-gradient(circle, transparent 2%, rgba(0, 0, 0, .2) 2%) center/15000%
}

.check {
    display: none
}

.modedark .iconmode .openmode {
    display: block
}

.modedark .iconmode .closemode {
    display: none
}

.modedark .check:checked~.iconmode .openmode {
    display: none
}

.modedark .check:checked~.iconmode .closemode {
    display: block
}

/*----- Start adding Elements From here -----*/ 
// Below are some samples only 
// Start with .nightmode followed by element(class or id) {their_properties} 
.nightmode{background:#15202B;color:rgba(255,255,255,.7)}
.nightmode #outer-wrapper,.nightmode #sidebar-wrapper{background:#323232;color:#fff!important}

/* ---   Add More Elements --- */
</style>

/* ---   but you must find your theme working Elemens f.e --- */

.nightmode .header-menu {
    background: #2B2B2B;
    color: #fff!important
}

.nightmode .header-menu a,
.nightmode .header-menu span {
    color: #EEEEEE!important
}

.nightmode #outer-wrapper,
.nightmode #sidebar-wrapper {
    background: #323232;
    color: #fff!important
}

.nightmode #PopularPosts1,
.nightmode #Label3,
.nightmode #Label1 {
    background: #323232;
}

.nightmode #PopularPosts1 a,
.nightmode #PopularPosts1 .title,
.nightmode #Label1 a,
.nightmode #Label3 a,
.nightmode #Label1 .title,
.nightmode #Label3 .title  {
    color: #eeeeee!important
}

.nightmode .post-body h1,
.nightmode .post-body h2,
.nightmode .post-body h3,
.nightmode .post-body h4,
.nightmode .post-title,
.nightmode .index-post .post-info > h2 > a {
    color: #fff!important
}

/*----- findme here -----*/


.nightmode .post {
  Background: #413839;
} 

.nightmode .post-outer {
background-color:#413839;
} 

.nightmode .jump-link a {
 color: #FFFFFF;
}

This website use the dark mode button .....

NEW !!! Dark mode is Reay but maby some articles are not Optimized in Night mode yet
NEW !!!Participate in the wordpress911 team to ask and answer questions to upload articles and videos register » Here - download the best WordPress Woocommerce templates HERE