Cara membuat mode dark atau mode gelap dengan Icon Lampu

Daftar Isi [Tampil]

Hello sobat Desain 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

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

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),$("#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>

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

.modedark{display:inline-block;float: right;margin-top: 3px;position:absolute;right:45px;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 */

.Night #wrapper {background: #292e38;}

.Night #HTML3 {background:#1d2129;}

.Night #footer-widget-container {background:#1d2129;}

.Night .share-this-pleaseeeee {background:#292e38;}

.Night .related-post h4{background:#292e38;}

.Night #label-info-th {background:#1d2129;}

.Night body {background:#1d2129;}

.Night .post-body {color:#cccccc}

.Night #baca-juga h2 {color:#cccccc;background:#1d2129}

.Night .label-info-th a {color:#cccccc;background:#3d4658}

.Night li.recent-posts a{color:#cccccc}

.Night .recent-posts-title h2{color:#cccccc}

.Night .Recent_Post_Mas_Tamvan .recent-post-mas-tamvan span.mastamvan_title a{color:#cccccc}

.Night .post-info {color:#cccccc}

.Night {background:#1d2129;}

.Night h2.post-title a {color:#9e9e9e;}

.Night h2.post-title a:hover {color:#f17f43}

.Night .post-title {color:#1e90ff}

.Night ul.nav-social {color:#1d2129}

.Night .post-snippet {color:#cccccc}

.Night #Label1{background:#292e38;}

.Night .post{background:#292e38;border-bottom-color: #252a33;}

.Night .PopularPosts h2{background:#343944;}

.Night .latest-post-title h2{background:#292e38;border-bottom-color: #313640;}

.Night .newspaptext{color:#9e9e9e}

.Night .PopularPosts h2 span{color:#9e9e9e}

.Night .list-label-widget-content ul li {border-bottom-color: #313640;}

.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 #footer-container{background:#12161f;}

.Night #footer-navmenu{background:#171b25;}

.Night .sidebar h2 {color:#b7b7b7;border-bottom-color: #313640;}

.Night .sidebar-sticky h2 {color:#b7b7b7;border-bottom-color: #313640;}

.Night .latest-post-title h2 {color:#b7b7b7;border-bottom-color: #313640;}

.Night .above-post-widget h2 {color:#b7b7b7;border-bottom-color: #313640;}

.Night .comments h3 {color:#b7b7b7;border-bottom-color: #313640;}

.Night .breadcrumbs {color:#b7b7b7;border-bottom-color: #313640;}

.Night .btnsocialshare {background:#383c44;}

.Night .label-line::before{background: #1d2129;}

.Night .label-line-c::before {background: #333740;}

.Night a.showcontent:hover {background: #373a42;}

.Night a.showcontent{background: #292e38}

.Night #ignielNewsletter input{background: #272b33;border-color:#2b303a;}

.Night .comments .comments-content .comment-content {color:#ffffff}

.Night div#Label1 h2 {border-bottom: 1px solid #272b33;background: #343944;}

.Night .related-post-style-3 .related-post-item-title {color: #bbb;}

.Night #baca-juga ul {border: 2px solid #333740;}

.Night #baca-juga h2 {border: 2px solid #292e38;}

.Night #comments a.hiddencontent {background: #424854;}

.Night .comments .comments-content .comment-thread ol {background: #292e38;}

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

Sebagi saran dari saya kamu bisa meletakkan kodenya tepat diatas kode </header>

Berikut adalah kode untuk menampilkan mode dark dan untuk menjalankan fungsinya

<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="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 🤨

Follow

Desain Limited Content Creator, Writer, Vidio Creator, Design Website, Design Template, Design Grafis

Bagikan Artikel ini