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:,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:
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?
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: '';
}
.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.