Mode Malam
| Mode Tampilan
Penulis : admin

Home » Programming » Cara Membuat Darkmode Mode Gelap Di Blog dan Web
Cara Membuat Darkmode Mode Gelap Di Blog dan Web

Cara Membuat Darkmode Mode Gelap Di Blog dan Web


Fitur dark mode mejadi fitur yang sekarang banyak di terapkan di berbagai jenis aplikasi bahkan sistem operasi. Dark mode memungkinkan pengguna untuk menampilkan latar belakan dengan warna yang lebih gelap dan teks yang lebih terang. Bukan hanya membuat tampilan menjadi lebih menarik, fitur dark mode dapat membuat nyaman user ketika di kondisi minim cahaya sehingga beban kerja mata menjadi lebih ringan. Kelebihan lainnya adalah jika kita menggunakan dark mode pada device yang menggunakan batrai dan layar amoled, batrai akan lebih awet.

advertisement

Pada kesempatan kali ini, kita akan belajar bagaimana cara membuat fitur dark mode di blog ataupun website.

Disini saya tidak akan berbagi code yang bisa di implementasikan pada blog atau website sahabat sekalian, karena desain dan struktur tag html web setiap orang  berbeda-beda. Sehingga cara terbaik adalah kita belajar konsep dasarnya agar temen-teman semua bisa mengatur warna dark mode sesukanya.

Langung saja ke tutorialnya.

Note: Penulis berasumsi bahwa pembaca sudah familiar dengan html, css dan javascript

Membuat CSS Dark Mode

Untuk membuat dark mode, maka step pertama adalah kita perlu menyiapkan styling dark mode nya. Kita tidak akan membuat styling untuk setiap tag html pada halaman website kita. Kita cukup mengatur baground color pada tag parent (contoh: tag body) dan membiarkan tag childnya transparant agar bisa menyesuaikan dengan tag parent nya. Jika kita ingin membuat warna yang berbeda dari tag parentnya kita perlu mengaturnya. 

Contoh kodenya

//Ini style ketika normal mode(tag parent)
body{
    background-color: #172531;
    color: rgb(235, 235, 235);
}
//Ini Style Ketika dark mode (tag parent)
body.dark{
    background-color: #172531;
    color: rgb(235, 235, 235);
}
//Ini style ketika normal mode (tag child of body)
.header,.navbar,.content,.footer{
{
    background-color: #fff;
    color: rgb(87, 87, 87);
}
//Ini style ketika dark mode (tag child of body)
.header.dark,.navbar.dark,.content.dark,.footer.dark{
{
    background-color: #00353e;
    color: rgb(189, 189, 189);
}

Membuat Toogle Darkmode

Toogle ini yang akan kita gunakan sebagai tombol switch untuk merubah dari tampilan default(terang) ke dark mode. Untuk membuatnya kita akan pergunakan  boostrap toogle. Silahkan masukan code berikut di dalam tag head html kita.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" >
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" ></script>
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>

Kemudian kita buat togglenya, bisa kalian letakan di header, footer atau sticky.

<input type="checkbox" id="darktoggle" onchange="DarkMode();" data-toggle="toggle">

Membuat Script Darkmode

Disini kita menggunakan jquery untuk mengnambahkan class dark mode yang sudah kita buat di styling  ke dalam tag html yang ingin kita atur, contoh kodenya.

function ChangeMode() {
    try {
        if ($('#darkModeToggle').prop("checked")) {
            $('body').addClass("dark");
            $('.header').addClass("dark");
            $('.navbar').addClass("dark");
            $('.content').addClass("dark");
            $('.footer').addClass("dark");
            localStorage.setItem("darkmode",1);
        } else {
            $('body').removeClass("dark");
            $('.header').removeClass("dark");
            $('.navbar').removeClass("dark");
            $('.content').removeClass("dark");
            $('.footer .widget').removeClass("dark");
            localStorage.setItem("darkmode",0);
        }
    } catch (e) {
        console.log(e.message);
    }
}
function CheckModeSaved()
{
    try {
        var dm = localStorage.getItem("darkmode")==1
        $('#darkModeToggle').prop("checked",dm);
        ChangeMode();
    } catch (e) {
       console.log(e.message);
    }
}
CheckModeSaved();

Penjelasan: 

*Kode "$('#darktoggle').prop("checked")", berfungsi untuk mengecek apakah toggle dark mode dalam keadaan aktif atau tidak, jika iya maka kita menambahkan class dark pada body, header, navbar, content dan footer. Jika tidak maka class dark di hapus pada element-element tersebut. 

*Kode "localStorage.setItem("darkmode",value)", berfungsi untuk menyimpan perubahan mode.

*Kode "function CheckModeSaved()", berfungsi untuk mengecek apakah dark mode dalam keadaan aktif atau tidak terakhir kali sebelum halaman di refresh.

advertisement

Opsional:

Agar halamannya tampil setelah javascript di eksekusi sehingga tidak terjadi blink saat di refresh, di tag body silahkan "style='visibility:hidden'" dan di atas penutup tag bodi (</body>) tambahkan kode "$('body').css({'visibility': 'visible'});".

Trick Mengimplementasikan Dark Mode Di Website Yang Sudah Jadi

Tutorial di atas akan mudah di implementasikan pada web atau blog yang dalam tahap pengembangan. Tapi gimana kalo kita ingin membuat fitur dark mode di web yang sudah jadi dengan struktur dan style yang kompleks?. Triknya adalah dengan menggunakan inspect tools dari google chrome. Caranya sebagai berikut,

1. Buka web kalian menggunakan browser chrome

2. Tekan ctr+shift+i pada keryboard atau klik kanan dan klik inspect.

3. Klik tanda panah seperti pada gambar,

Cara Membuat Darkmode Mode Gelap Di Blog dan Web

4. Kemudian sorot bagian yang ingin kamu atur warna dark modenya, contohnya saya ingin mengatur warna header ketika mode dark mode,

Cara Membuat Darkmode Mode Gelap Di Blog dan Web

5. Kita atur background-colornya pada kolom style, dan catat class atau tagnya beserta warna yang kita ubah,

Cara Membuat Darkmode Mode Gelap Di Blog dan Web

Pada gambar di atas, saya mencoba merubah background color pada class header.

6. Sekarang kita tinggal buat style nya, bisa di dalam tag head atau file css, pada langkah sebelumnya saya mencoba membuat fitur dark mode untuk header. Maka style yang saya tulis seperti berikut.

.header.dark{
{
    background-color: #2b2b2b;
}

7. Dan kode javascriptnya seperti berikut,

advertisement

function ChangeMode() {
    try {
        if ($('#darkModeToggle').prop("checked")) {
            $('.header').addClass("dark");
            localStorage.setItem("darkmode",1);
        } else {
            $('.header').removeClass("dark");
            localStorage.setItem("darkmode",0);
        }
    } catch (e) {
        console.log(e.message);
    }
}
function CheckModeSaved()
{
    try {
        var dm = localStorage.getItem("darkmode")==1
        $('#darkModeToggle').prop("checked",dm);
        ChangeMode();
    } catch (e) {
       console.log(e.message);
    }
}
CheckModeSaved();

Sekian dulu tutorial singkat cara membuat fitur dark mode pada web atau blog. Jangan lupa di share jika kalian merasa artikel ini bermanfaat, kalau ada pertanyaan silahkan tulis di kolom komentar. Good Luck!

Tags: #darkmode #javascript #css
Bagikan :

Komentar:

Silahkan berkomentar dengan baik dan bijak!

Name * :
Email :
Website :
Comment :


This website uses cookies to ensure you get the best experience on our website

learn more