Membuat Dark Mode pada web blogger bagian 1 : Pasang kode HTML dan CSS

Seperti kita ketahui saat ini Dark Mode atau mode gelap sudah menjadi hal umum ditemui pada sebuah tampilan, baik pada website, aplikasi, sistem operasi, dan yang lainnya. Dan juga penggunaannya tidak tetap, atau dengan kata lain kita bisa merubahnya hanya dengan menekan sebuah tombol sebagai pilihan untuk menggunakan mode gelap atau terang.

/* Button Dark Mode */
.modedark {display:inline;float: right;margin-top: 10px;position:absolute;right:20px;top: 12px;z-index:100;}
.modedark svg {width:24px;height:24px;vertical-align: -5px;background-repeat: no-repeat !important;content: '';}
.modedark svg path {fill:#fff;}
.modedark .check {display:none;}
.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 {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;}
/* Additional Custom BGS */
.header.filled .modedark svg path{fill:#000}

/* Warna Dark Mode */
.DarkMode #wrapper {background: #292e38;}
.DarkMode #HTML3 {background:#1d2129;}
.DarkMode #footer-widget-container {background:#1d2129;}
.DarkMode .share-this-pleaseeeee {background:#292e38;}
.DarkMode .related-post h4{background:#292e38;}
.DarkMode #label-info-th {background:#1d2129;}
.DarkMode body {background:#1d2129;}
.DarkMode .post-body {color:#1d2129}
.DarkMode #baca-juga h2 {color:#cccccc;background:#1d2129}
.DarkMode .label-info-th a {color:#cccccc;background:#3d4658}
.DarkMode li.recent-posts a{color:#cccccc}
.DarkMode .recent-posts-title h2{color:#cccccc}
.DarkMode .Recent_Post_Mas_Tamvan .recent-post-mas-tamvan span.mastamvan_title a{color:#cccccc}
.DarkMode span.mastamvan_title a .Recent_Post_Mas_Tamvan .recent-post-mas-tamvan {color:#cccccc;background:#1d2129}
.DarkMode .Recent_Post_Mas_Tamvan .recent-post-mas-tamvan .widget-content {color:#cccccc;background:#1d2129}
.DarkMode .post-info {color:#cccccc}
.DarkMode {background:#1d2129;}
.DarkMode h2.post-title a {color:#9e9e9e;}
.DarkMode h2.post-title a:hover {color:#f17f43}
.DarkMode .post-title {color:#1e90ff}
.DarkMode ul.nav-social {color:#1d2129}
.DarkMode .post-snippet {color:#cccccc}
.DarkMode #ignielNewsletter {background:#292e38;}
.DarkMode #Label1{background:#292e38;}
.DarkMode .post{background:#292e38;border-bottom-color: #252a33;}
.DarkMode .PopularPosts h2{background:#343944;}
.DarkMode .latest-post-title h2{background:#292e38;border-bottom-color: #313640;}
.DarkMode .newspaptext{color:#9e9e9e}
.DarkMode .PopularPosts h2 span{color:#9e9e9e}
.DarkMode .list-label-widget-content ul li {border-bottom-color: #313640;}
.DarkMode .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;}
.DarkMode #ignielNewsletter .medsos__ {border-top-color: #313640;}
.DarkMode #footer-container{background:#12161f;}
.DarkMode #footer-navmenu{background:#171b25;}
.DarkMode .sidebar h2 {color:#b7b7b7;border-bottom-color: #313640;}
.DarkMode .sidebar-sticky h2 {color:#b7b7b7;border-bottom-color: #313640;}
.DarkMode .latest-post-title h2 {color:#b7b7b7;border-bottom-color: #313640;}
.DarkMode .above-post-widget h2 {color:#b7b7b7;border-bottom-color: #313640;}
.DarkMode .comments h3 {color:#b7b7b7;border-bottom-color: #313640;}
.DarkMode .breadcrumbs {color:#b7b7b7;border-bottom-color: #313640;}
.DarkMode .btnsocialshare {background:#383c44;}
.DarkMode .label-line::before{background: #1d2129;}
.DarkMode .label-line-c::before {background: #333740;}
.DarkMode a.showcontent:hover {background: #373a42;}
.DarkMode a.showcontent{background: #292e38}
.DarkMode #ignielNewsletter input{background: #272b33;border-color:#2b303a;}
.DarkMode .comments .comments-content .comment-content {color:#ffffff}
.DarkMode div#Label1 h2 {border-bottom: 1px solid #272b33;background: #343944;}
.DarkMode .related-post-style-3 .related-post-item-title {color: #bbb;}
.DarkMode #baca-juga ul {border: 2px solid #333740;}
.DarkMode #baca-juga h2 {border: 2px solid #292e38;}
.DarkMode #comments a.hiddencontent {background: #424854;}
.DarkMode .comments .comments-content .comment-thread ol {background: #292e38;}
.DarkMode .comments .comments-content .inline-thread {background: #292e38;}
/* Additional Custom BGS */
.DarkMode .section.about h1 {color: #fff}
.DarkMode #ct-wrapper{background: #292e38}
.DarkMode a.btn,.btn{padd ing:2px 0 0;display:inline-block;vertical-align:top;font-size:12px;color:#fff;letter-spacing:.2em;font-weight:500;line-height:12px;text-transform:uppercase;cursor:pointer;box-shadow:inset 0 -2px 0 #ff8c00;-moz-box-shadow:inset 0 -2px 0 #ff8c00;-webkit-box-shadow:inset 0 -2px 0 #ff8c00;-khtml-box-shadow:inset 0 -2px 0 #ff8c00;transition:all .4s ease 0;-moz-transition:all .4s ease 0;-webkit-transition:all .4s ease 0;-o-transition:all .4s ease 0}
.DarkMode a.btn:hover,.btn:hover{box-shadow:inset 0 -14px 0 #ff8c00;-moz-box-shadow:inset 0 -14px 0 #ff8c00;-webkit-box-shadow:inset 0 -14px 0 #ff8c00;-khtml-box-shadow:inset 0 -14px 0 #ff8c00}

<!-- DarkMode Button -->
<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>

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