How to make dark mode on a blog- 100% working

How to make dark mode on a blog: 100% WORK 

touchtogain.blogspot.com - On this occasion, I will give a tutorial on how to make dark mode on the blog. how-to-make-dark-mode-on-blog Many of the bloggers who try to present a content so that the visitors are more comfortable, not only content but they also try to enhance the appearance of the blog. One example is to create a dark mode display on a blog.

Apny blog mai dark mode kesy add kary?
This dark mode feature is useful for changing the theme of the blog to dark so that the lighting is reduced, this feature itself is very good for the visitors. Well, if you are interested in making dark mode like footprint, you can follow the steps below.

How to make a dark mode on the blog 
🔼Step 1: log in to your blogger account
🔼Step 2: go to Themes >> Edit HTML 
🔼Step 3: copy the code below, then paste the code directly above the code / * NAV MENU * /

/* Button Dark Mode touchtogain.blogspot.com */.modedark{display:inline-block;float: right;margin-top: 3px;position:absolute;right:30px;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;}
/* Warna dark Mode touchtogain.blogspot.com */.Night #wrapper {background:#1d2129;}.Night body {background:#1d2129;}.Night #HTML3 {background:#1d2129;}.Night {background:#1d2129;}.Night #header-container {background:#292929;color:#fff;}.Night #cssmenu > ul > li > a {color: #fff;}.Night #footer-container {background:#292929;}.Night #cssmenu > ul {background-color: #292929;}.Night #cssmenu ul li {background:#292929;color:#b7b7b7}.Night .teknsearch .search .check:checked ~ .icon > svg path{fill:#292929;}
.Night .breadcrumbs {background: #292e38;border-bottom: 1px solid rgba(255,255,255,0.12);}
.Night .img-thumbnail img {background: #252931 linear-gradient(to right, rgba(255, 255, 255, 0) 5%, rgb(49, 54, 64) 20%, rgba(255, 255, 255, 0) 30%);background-size: 800px 104px;}.Night .post{background:#292e38;border-bottom-color: #252a33;}.Night h2.post-title a {color:#fff;}.Night h2.post-title a:hover {color:#17a2b8}.Night h1.post-title {border-image: linear-gradient(to right,transparent,#17a2b8,transparent);border-image-slice: 1;border-bottom: 3px solid;}.Night .post-snippet {color:#eaeaea;}.Night .post-info {color:#b7b7b7;}.Night .post-body {color:#eaeaea;}.Night blockquote {background:#213040;}
.Night .idnxmusNavigation .NavMenu ul li.xprofil {background: #213040;border-bottom:1px solid #393939;}.Night .idnxmusNavigation .NavMenu ul li.xprofil ul li.name {background: #213040;color:#fff;}.Night .idnxmusNavigation .NavMenu ul li.xprofil ul li.follow a:hover {padding:none;}.Night .idnxmusNavigation .NavMenu ul li:hover {background:rgba(0,0,0,.2) radial-gradient(circle,transparent 2%,rgba(0,0,0,.2) 2%) center/15000%;;color:#17a2b8}.Night .idnxmusNavigation .NavMenu {background: #292e38;color:#fff;}.Night .idnxmusNavigation .NavMenu ul li a {color:#eaeaea;}.Night .idnxmusNavigation .NavMenu ul li.social {background: #213040;border-top:1px solid #393939;}.Night .idnxmusNavigation .NavMenu:before,.idnxmusNavigation .NavMenu:after {border:none;}.Night .idnxmusNavigation label:hover {border-radius:100px;background:rgba(0,0,0,.2) radial-gradient(circle,transparent 2%,rgba(0,0,0,.2) 2%) center/15000%;}.Night .idnxmusNavigation label:active {border-radius:100px;background-color:#fff;background-size:100%;transition:background 0s;}.Night .idnxmusNavigation .NavMenu img {border:1px solid #393939;}
.Night .tabbed-toc .toc-content,.tabbed-toc .toc-line {width: 80%;float: right;background-color: transparent;border-left: 5px solid rgba(64,64,64,0.1);box-sizing: border-box;}
.Night .label-info svg path{fill:#b7b7b7;}.Night .status-msg-body {background: #213040;color:#fff;}
.Night .popular-posts {background: #292e38;color: #ddd;}.Night .popular-posts ul li a:hover {background: #3d4658;color:#17a2b8}.Night .PopularPosts .widget-content ul li {border-top: 1px solid rgba(255,255,255,0.12);}
.Night .author-profile {background:#213040;}.Night .author-profile .writer-name {color:#17a2b8;}.Night .writer > span {color:#ddd;}
.Night .latest-post-title h2 {background:#292e38;}.Night .PopularPosts h2 {background:#292e38;}.Night .sidebar h2 {background:#292e38;}.Night .comments h3 {background:#292e38;color:#fff;}.Night h1.post-title {color:#17a2b8;}
.Night .contact-form-error-message-with-border {background: #213040;color: #fff;border: 1px solid #b7b7b7;}.Night .contact-form-email {background: #213040;border: 1px solid #b7b7b7;}.Night .contact-form-name {background: #213040;border: 1px solid #b7b7b7;}.Night .contact-form-email-message {background: #213040;border: 1px solid #b7b7b7;}
.Night div.Label h2 {border-bottom: 1px solid rgba(255,255,255,0.12);}.Night div.Label {background:#292e38}.Night .list-label-widget-content ul li a {background:#292e38;border-bottom: 1px solid rgba(255,255,255,0.12);}.Night .list-label-widget-content ul li a:hover{background:#3d4658}.Night .related-post-style-3 .related-post-item-title {color:#b7b7b7;}
.Night #blog-pager-older-link a {background: #213040;color: #fff;}.Night #blog-pager-newer-link a {background: #213040;color: #fff;}.Night #blog-pager-older-link a:hover {background: #17a2b8;}.Night #blog-pager-newer-link a:hover {background: #17a2b8;}
.Night .commentBodyContainer {background: #292e38;color: #b7b7b7}.Night #comments .comment-thread ol > li {background: #292e38;border: 1px solid #292e38;}.Night .comments .comments-content .icon.blog-author::after {color: #fff}.Night .comments .comments-content .user {color: #fff}.Night .comments .comment-block {background: #292e38;}.Night .comments .thread-toggle {background: #213040;color:#fff;}.Night .comments .comment .comment-actions a {background: #17a2b8;}.Night .comments .comment .comment-actions a:hover, .comments .continue a:hover{background: #155724;}.Night .comments .comments-content .comment-content {color: #ddd;}.Night .comments .comments-content .comment-header {border-bottom: 1px solid rgba(255,255,255,0.12);}.Night [class~=pesan-jejak] {background: #213040;color: #b7b7b7;}.Night .pesan-jejak h5 {color: #fff}.Night .pesan-jejak h5:before {color: #fff}

🔼Step 4: Then copy the code below, then paste the code directly above the code </header>, if the code </header> contains the code <div class = 'clear' />, then paste it above the code <div class = 'clear '/>

<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='M7,10A2,2 0 0,1 9,12A2,2 0 0,1 7,14A2,2 0 0,1 5,12A2,2 0 0,1 7,10M17,7A5,5 0 0,1 22,12A5,5 0 0,1 17,17H7A5,5 0 0,1 2,12A5,5 0 0,1 7,7H17M7,9A3,3 0 0,0 4,12A3,3 0 0,0 7,15H17A3,3 0 0,0 20,12A3,3 0 0,0 17,9H7Z'/></svg>
<svg class='closemode' viewBox='0 0 24 24'><path d='M17,10A2,2 0 0,1 19,12A2,2 0 0,1 17,14A2,2 0 0,1 15,12A2,2 0 0,1 17,10M17,7A5,5 0 0,1 22,12A5,5 0 0,1 17,17H7A5,5 0 0,1 2,12A5,5 0 0,1 7,7H17M7,9A3,3 0 0,0 4,12A3,3 0 0,0 7,15H17A3,3 0 0,0 20,12A3,3 0 0,0 17,9H7Z'/></svg>
</label>
</div>

 🔼Step 5: Next copy the code below, then paste the code directly above the code </body>

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

🔼Step 6: Save

The final word : 

Until here the tutorial on how to make dark mode on the blog, I have tried this tutorial on my blog, so the results have been confirmed to be successful, if you want to see a demo, you can see below.

Subscribe Our Newsletter