Cara Membuat Tombol Light Dark

Cara Membuat Tombol Light Dark

Codepelajar.com - Halo Sob, senang rasanya masih terus memberikan tutorial-tutorial bermanfaat untuk ilmu & sebagai refrensi web desain kalian. Pada kesempatan kali ini Code Pelajar. akan memberikan tutorial yang memang sebenarnya mudah dan implementasinya pun gampang sekali.


Tapi saya mengingatkan kembali, buat kalian yang masih awam atau yang sudah pro pun harap baca tutorial ini perlahan agar tidak terjadi error atau jadi bingung sendiri, karena saya menulis tutorial ini secara bertahap dan berkesinambungan jadi harap baca perlahan supaya paten, hehe.

Cara Membuat Light-Dark Switcher

Sebelum memulai, sobat sudah harus memahami penempatan2 Kode/Script dan juga harus sudah memahami Id & Class pada sebuah struktur HTML, agar tidak bingung saat mengikuti tutorial kali ini.

Buatlah sebuah toggle switch

  1. Kita akan membuat sebuah element Toggle Switch
  2. Salin dan terapkan CSS berikut kedalam CSS sobat, bisa di file style.css atau tag <style> </style>
  3. /*== CSS SWITCHER - Codepelajar.com ==*/
    .change-theme {
        position: absolute;
        display: inline-block;
        top: 15px;
        right: 15px;
    }
    .change-theme label {
        display: inline-block;
        position: relative;
        top: -2px;
    }
    .change-theme .switch {
        display: inline-block;
        width: 50px;
        height: 15px;
        background: #8888;
        border-radius: 50px;
        transition: .5s;
        position: relative;
    }
    .change-theme .switch::before {
        content: "";
        position: absolute;
        height: 25px;
        width: 25px;
        top: -5px;
        left: 0;
        background: #fff;
        border-radius: 30px;
        transition: .5s;
        transform: translate(-);
    }
    .change-theme .switch.active::before {
        content: "";
        position: absolute;
        transform: translate(100%);
      background:#222;
    }
    
  4. Lalu salin dan terapkan kode html berikut dimana kamu ingin meletakkan switch toggle
  5. <!-- Saklar Sederhana - Codepelajar.com-->
    <div class="change-theme">
    <a class="switch active" href="javascript:void(0)" id="CodePelajar-btn"></a>
    </div>
  6. Salin dan terapkan kode JavaScript berikut sebelum tag </body>
  7. 
    <script>//<![CDATA[//
    $('#CodePelajar-btn').click(function(){
      if  ($(this).hasClass('active')){
        $(this).removeClass(sessionStorage.dataActive)
        $('body').removeClass(sessionStorage.dataTheme)
        sessionStorage.dataTheme = ''
        sessionStorage.dataActive = ''
      } else {
        sessionStorage.dataActive = 'active'
        sessionStorage.dataTheme = 'dark'
        $(this).addClass(sessionStorage.dataActive)
        $('body').addClass(sessionStorage.dataTheme)
      }
    })
    setInterval(function(){
    $('#CodePelajar-btn').addClass(sessionStorage.dataActive)
    $('body').addClass(sessionStorage.dataTheme)
    },10)//]]>//
    </script>
  8. Save Template

Langkah selanjutnya adalah memasang CSS Dark-Light nya

Perlu kalian ketahui tutorial ini sebenarnya cukup mudah sekali, jika theme sobat keadaan awal adalah Light maka sobat hanya perlu megubahnya menjadi dark (gelap) atau terserah sobat jika ingin dikreasikan dengan warna lain.

  1. Salin dan terapkan CSS berikut, di bawah CSS yang sobat letakkan di atas tadi.
  2. 
    /*== Opsional Color Theme ===*/
    body.dark{
    background: #000;
    }
    Kenali Class element yang ingin sobat jadikan parameter untuk di ubah warnanya.
  3. Misal saya ingin membuat element yang mempunyai class="post-outer" menjadi warna dark, maka source yang di buat seperti berikut
  4. body.dark .post-outer{background:#333}

    maka kesimpulan alur souce nya akan seperti ini

    body.dark .ClassElement{CSS}
    .ClassElement adalah Class dari Element yang akan kita jadikan parameternya

Baik mungkin segitu saja untuk tutorial kali ini, mungkin beberapa dari kalian masih bingung karena tidak ada gambar contoh, tapi sobat bisa langsung lihat Blog lama saya saja sebagai refrensi Disini. Mungkin masih ada yang bingung juga dalam peletakkan CSS bisa buka halaman F.A.Q

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel