Cara membuat mode dark dengan Icon Lampu

Hello sobat IcloudZer apakah blog kamu mempunyai fitur mode gelap, jika belum! Nah berikut kami akan memberikan informasi seputar mode Gelap atau dark mode untuk dipakai dalam sebuah template

Pengertian mode dark

Mode dark atau mode gelap adalah sebuah tampilan dalam bentuk icon didalam sebuah template, dan biasanya mode gelap berada ada header blog tepatnya disebelah atau disamping pada tampilan blog

Info: Bisa juga berada pada tempat yang lainnya sesuai keinginan para pemilik situs blog

Fungsi mode dark

Dengan mode dark didalam sebuah template membuat blog kamu semakin keren dan menambah kenyamanan untuk pengguna kamu

Bagaimana tidak 🤔 pengguna bisa gelap gelapan dengan fitur mode dark selain itu pengguna juga bisa lebih nyaman untuk membaca jika blognya memiliki tampilan mode gelap untuk membuat mata pengguna yang membaca tidak kelelahan

Icon Mode Dark

Oke icon mode dark yang saya bagikan disini berbentuk seperti lampu, jika pada tampilan Defeult nya (terang) akan menampilkan icon Lampu

Dan untuk Tampilan gelapnya memiliki Tampilan seperti contoh berikut ini

Info: Bagaimana sobat sudah tertarik ingin membuatnya 🤓

Cara penerapan

Dibawah ini kami akan memberikan informasi mengenai bagaimana cara membuat mode Dark atau mode gelap dalam Tampilan yang keren ok 👌

Nah untuk memulai kamu bisa simpan kode Script dibawah ini tepat diatas kode </body>

<script type='text/javascript'>
//<![CDATA[$(document).ready(function(){$("body").toggleClass(localStorage.toggled),$("#rah-darkMode").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")?$("#rah-darkMode").prop("checked",!0):$("#rah-darkMode").prop("checked",!1)});//]]>
</script>

Pasang kode CSS

Langkah selanjutnya kamu bisa memasang kode CSS berikut ini untuk diletakkan didalam Template kamu, tepatnya diatas kode ]]</b;skin> atau sebelum kode ]]</b;skin>

/* Css Button Dark Mode by Icloudice */
.rah-darkMode{display:inline-block;float: right;margin-top: 3px;position:absolute;right:45px;top: 0;z-index:999;}
.rah-darkMode svg{width:24px;height:24px;vertical-align: -5px;background-repeat: no-repeat !important;content: '';}
.rah-darkMode svg path{fill:#fff;}.rah-darkMode .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;}
.rah-darkMode .iconmode .openmode{display:block;}.rah-darkMode .iconmode .closemode{display:none;}.rah-darkMode .check:checked ~ .iconmode .openmode{display:none;}.rah-darkMode .check:checked ~ .iconmode .closemode{display:block;}
/* Warna Dark Mode by Icloudice */
.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:#cccccc}.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 .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 #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 #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;}

Tampilkan Mode Dark

Dibawah ini adalah script kode untuk menampilkan Icon dan fitur mode darknya, sobat bisa menaruh kode ini dimana saja yang jelas harus meletakkan ditempat pengguna yang senang menjangkaunya

Saran: Sebagai saran dari saya kamu bisa meletakkan kodenya tepat diatas kode </header>

Berikut adalah kode untuk menampilkan mode dark dan untuk menjalankan fungsinya

<div class='rah-darkMode'><input class='check' id='rah-darkMode' title='Dark Mode' type='checkbox'/><label class='iconmode' for='rah-darkMode'><svg class='openmode' viewBox='0 0 24 24'> <path d="M20,11H23V13H20V11M1,11H4V13H1V11M13,1V4H11V1H13M4.92,3.5L7.05,5.64L5.63,7.05L3.5,4.93L4.92,3.5M16.95,5.63L19.07,3.5L20.5,4.93L18.37,7.05L16.95,5.63M12,6A6,6 0 0,1 18,12C18,14.22 16.79,16.16 15,17.2V19A1,1 0 0,1 14,20H10A1,1 0 0,1 9,19V17.2C7.21,16.16 6,14.22 6,12A6,6 0 0,1 12,6M14,21V22A1,1 0 0,1 13,23H11A1,1 0 0,1 10,22V21H14M11,18H13V15.87C14.73,15.43 16,13.86 16,12A4,4 0 0,0 12,8A4,4 0 0,0 8,12C8,13.86 9.27,15.43 11,15.87V18Z"/></svg><svg class='closemode' viewBox='0 0 24 24'><path d="M12,6A6,6 0 0,1 18,12C18,14.22 16.79,16.16 15,17.2V19A1,1 0 0,1 14,20H10A1,1 0 0,1 9,19V17.2C7.21,16.16 6,14.22 6,12A6,6 0 0,1 12,6M14,21V22A1,1 0 0,1 13,23H11A1,1 0 0,1 10,22V21H14M20,11H23V13H20V11M1,11H4V13H1V11M13,1V4H11V1H13M4.92,3.5L7.05,5.64L5.63,7.05L3.5,4.93L4.92,3.5M16.95,5.63L19.07,3.5L20.5,4.93L18.37,7.05L16.95,5.63Z"/></svg></label></div>

Oke sobat desain begitulah informasi kita kali ini untuk lebih jelaskan anda bisa menanyakan nya didalam form komentar, ok 🤨