javascriptthemesbloggerdarkmode

Add dark mode button to blogspot

I am using my own custom contempo theme and use code dark mode in this video.It worked tap the button with the letter a as the icon as circled in image 1:image 1,but when tap the button with the letter a as the icon, next to the search icon on collasped bar of contempo theme it didn't worked as circled in image 2:image 2 I add this javascript code to the before /body tag:

<script type='text/javascript'>//<![CDATA[$(document).ready(function(){$("body").toggleClass(localStorage.toggled),$("#modedark").on("click",function(){"Night"!=localStorage.toggled?($("body").toggleClass("Night",!0),localStorage.toggled="Night",$(".section-center").css("display","block")):($("body").toggleClass("Night",!1),localStorage.toggled="",$(".section-center").css("display",""))}),$("body").hasClass("Night")?$("#modedark").prop("checked",!0):$("#modedark").prop("checked",!1)});//]]></script>

I add this css code to the before /head tag:

<style>/* Button Dark Mode */ .modedark{display:inline-block;float: right;margin-top: 3px;position:absolute;right:45px;top: 0;z-index:999;} .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; }.Night {background: #353535;}</style>

I add this html code to the after widget Blogsearch:

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

How can i how can i make that button work in image 2?

Solution

  • Ok, this is an adptation from your code with the one I found here: https://www.twistblogg.com/2020/04/add-night-mode-in-blogger-blog.html that it's basically a more expanded one, specially on the CSS... Anyway, I tested on my test and it works. First, the CSS. Placed it anywhere before </head>:

    <style type='text/css'>
/* Button Dark Mode */

.modedark {
    display: inline-block;
    float: right;
    margin-top: 3px;
    position: fixed;
    right: 45px;
    top: 0;
    z-index: 999;
border-radius: 100px;
background: rgba(0, 0, 0, .1) radial-gradient(circle, transparent 2%, rgba(0, 0, 0, .1) 2%) center/15000%;
}

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

.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, .5) radial-gradient(circle, transparent 2%, rgba(0, 0, 0, .5) 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} 
.Night {
  background:#15202B;
  color:rgba(255,255,255,.7)
  }
.Night #outer-wrapper,
.Night #sidebar-wrapper {
  background:#323232;
  color:#fff!important
  }

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

    As you can see, I changed the .modedark styles from position:absolute to position:fixed and added the styles from the hover part, wich I also increased the opacity. On the hover part, I decreased the opacity a bit so that there's still an hover effect.

    The HTML part, placed it just before the tag </header>:

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

    I did this because I tried your code with the same results you did. My guess is that Blogger is duplicating the element button on the scrolling header, resulting in duplicate IDs (class='check' id='modedark' title='Mode Dark'), wich in return cause the issue of only one element working properly.

    Finally the javascript, and since you said it worked before I assume that you already have jQuery installed, so all you need is to place it before </body>:

    <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(){"Night"!=localStorage.toggled?($("body").toggleClass("Night",!0),localStorage.toggled="Night",$(".section-center").css("display","block")):($("body").toggleClass("Night",!1),localStorage.toggled="",$(".section-center").css("display",""))}),$("body").hasClass("Night")?$("#modedark").prop("checked",!0):$("#modedark").prop("checked",!1)});
//]]>
</script>

    This is exactly the code I tested on my blog that worked and it should solve your problem.