How to Make Dark Mode on a blog: 100% WORK
On this occasion, I will give a tutorial on how to make dark mode on the 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.
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 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 * /
Step 6: Save
The final word :
Until here the tutorial on how to make dark mode on the blog, the tutorial that I gave this I have tried on my blog, so the results can be ascertained successful, if you want to see a demo, can see below.
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.
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 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 Jejakdzgn */
.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 Jejakdzgn */
.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}<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><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, the tutorial that I gave this I have tried on my blog, so the results can be ascertained successful, if you want to see a demo, can see below.