Membuat Dark Mode pada web Blogger bagian 2 : Merubah Style

Setelah saya pelajari cukup banyak yang harus disesuaikan, berikut ini beberapa custom style yang telah saya rubah pada kode CSS. Pada umumnya hanya merubah bagian warna dari font dan background.

/* Button Dark Mode */
/* Additional Custom BGS */
.header.filled .modedark svg path{fill:#292929}

Pada bagian tombol belum banyak perubahan cuma mengatur posisi dan perubahan warna ketika scroll down keluar dari bagian header.

/*  Additional Custom Style  */
/* Font */
.DarkMode p {color:#999999}
.DarkMode h1 {color: #fff}
.DarkMode h2 {color: #fff}
.DarkMode h3 {color: #fff}
.DarkMode h4 {color: #fff}
.DarkMode h5 {color: #fff}
.DarkMode h6 {color: #fff}
/* Tombol DarkMode */
.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}
/* About Section */
.DarkMode .section.about h1 {color: #fff}
/* Service Section */
.DarkMode .section.services {background: #292e38}
.DarkMode .section.services .title {color: #fff}
.DarkMode .section.services .service-item .circle .icon {color: #fff}
.DarkMode .section.services .service-item .name {color: #fff}
/* Contact Section */
.DarkMode div#contact-section {background: #292e38}
.DarkMode div#contact-section .title {color: #fff}
.DarkMode .contactBox h3{color:#999}
/* Blog Posts */
.DarkMode .date-outer.col.col-m-4.col-t-4.col-d-4 {background: #292e38}
/* Related Posts */
.DarkMode #related-posts h3{color:#fff}
/* SideBar */
.DarkMode .sidebar .widget {background: #292e38}
/* Author */
.DarkMode .aisa-author {background: #292e38; border-top: 30px solid #1d2129; border-bottom: 30px solid #1d2129;}
.DarkMode .aisa-author .author-name, .aisa-author h5{color:#fff}
/* Comment */
.DarkMode #comments { background: #292e38;}
/* BackTop Icon */
.DarkMode .lnr-chevron-up-circle {color:#999999;}
/* Sitemap */
.DarkMode #sitemap .title {color:#999999;}
.DarkMode #sitemap ol li {color:#999999;}

Tampilan perubahan setelah disesuaikan dengan template web yang saya gunakan menjadi seperti pada gambar ini.

Ini adalah contoh menerapkan dark mode pada web blogger, kita harus memahami dan menyesuaikan sendiri apa saja yang harus dibuat dan dirubah pada kode HTML dan CSS atau dengan tambahan kode JavaScript.