Rabu, 25 January 2023

Bootstrap Sudah Mendukung Color Modes

Sejak versi bootstrap v5.3, bootstrap sepenuh nya telah mendukung fitur yang namanya color modes, karena namanya color modes, maka ini juga sudah termasuk dengan yang namanya dark mode.

Bootstrap
Released

Daftar Isi

Sejak versi bootstrap v5.3, bootstrap sepenuh nya telah mendukung fitur yang namanya color modes, karena namanya color modes, maka ini juga sudah termasuk dengan yang namanya dark mode.

Namun satu hal yang mesti di ingat, versi ini masih alpha. Belum sepenuh nya stabil, bisa saja kalian menemukan komponen-komponen yang belum didukung oleh fitur ini sampai versi ini stabil.

Mungkin kalian sendiri akan penasaran bagaimana cara menerapkan nya. Nah, dalam artikel ini saya akan menuntun Anda pelan-pelan.

Bootstrap Boilerplate

Pertama sekali, silakan buat 1 file .html untuk membuat boilerplate bootstrapnya, kurang lebih akan seperti berikut:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col">
                <h1>Bootstrap Color modes</h1>
                <p>Bootstrap now supports color modes, or themes, as of v5.3.0.</p>
            </div>
        </div>
    </div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
</body>
</html>

Menerapkan Dark Mode

By default, jika kita refresh di browser, maka harusnya background utama akan berwarna putih dengan tulisan berwarna hitam. Nah seandai nya kita tambahi attribute data-theme tepat pada tag html nya, seperti misalnya:

<html lang="en" data-bs-theme="dark">

Dengan begitu, maka harusnya sekarang jika kita lihat kembali, background akan sudah berwarna hitam dengan tulisan berwarna hitam.

Tidak itu saja, semua akan terkonfigurasi by default. Seperti misalnya komponen Card. Berikut adalah contohnya.

<div class="card">
    <div class="card-body">
        <p>
            Oobcaecati officiis perspiciatis, porro quaerat quis quod
            ratione rerum sapiente sequi sit soluta.
        </p>

        <a href="#" class="btn btn-primary">
            Getting started
        </a>
    </div>
</div>

Maka harusnya ini akan sudah otomatis terkonfigurasi juga dengan dark mode. Termasuk juga ketika kita ingin menggunakan komponen seperti dropdown. Lihat contoh berikut.

<div class="dropdown mb-4">
    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButtonDark2"
            data-bs-toggle="dropdown" aria-expanded="false">
        Dark dropdown
    </button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenuButtonDark2">
        <li><a class="dropdown-item active" href="#">Action</a></li>
        <!-- ... -->
        <li><a class="dropdown-item" href="#">Separated link</a></li>
    </ul>
</div>

Maka harusnya dropdown yang tadinya default berwarna putih, akan sudah berwarna hitam dengan tulisan putih.

Tapi ada kadang kalanya walau dark mode, kita ingin tetap dia putih. Sepertinya misalnya dropdown ini. Ya benar memang kita ingin semua bernuansa hitam, tapi kita ingin dropdown ini tetap seperti sebelumnya yaitu berwarna putih dengan tulisan hitam. Jika ingin begitu, kita bisa tinggal menambahkan attribute data-bs-theme="light" pada parent div dropdown nya seperti:

<div data-bs-theme="light" class="dropdown mb-4">
    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButtonDark2"
            data-bs-toggle="dropdown" aria-expanded="false">
        Dark dropdown
    </button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenuButtonDark2">
        <li><a class="dropdown-item active" href="#">Action</a></li>
        <!-- ... -->
        <li><a class="dropdown-item" href="#">Separated link</a></li>
    </ul>
</div>

Nesting color modes

Atau, jika kita ingin keseluruhan, seperti misalnya ingin mengelompokkan semua komponen ke dalam light mode, sementara kita sedang dark mode. Kita tinggal tambahkan attribute yang tadi.

<div data-bs-theme="light" class="card">
    <p>This is a light card.</p>

    <div class="card-body">
        <div class="dropdown mb-4">
            <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButtonDark2"
                    data-bs-toggle="dropdown" aria-expanded="false">
                Dark dropdown
            </button>
            <ul class="dropdown-menu" aria-labelledby="dropdownMenuButtonDark2">
                <li><a class="dropdown-item active" href="#">Action</a></li>
                <!-- ... -->
                <li><a class="dropdown-item" href="#">Separated link</a></li>
            </ul>
        </div>

    </div>
</div>

Maka harusnya, card dan juga semua yang ada di dalamnya akan berwarna putih seperti layaknya tidak dark mode.

Menerapkan Warna Sendiri

Kali ini sedikit berat namun santai, ini akan mudah jika kalian sudah familiar dengan yang namanya bootstrap sass, jika kalian ingin belajar tentang ini lebih lanjut, bisa tonton seri nya di youtube Parsinta.

[data-bs-theme='green'] {
    --bs-body-color: var(--bs-white);
    --bs-body-color-rgb: #{to-rgb($white)};
    --bs-body-bg: var(--bs-green);
    --bs-body-bg-rgb: #{to-rgb($green)};
    --bs-tertiary-bg: #{$green-600};

    .dropdown-menu {
        --bs-dropdown-bg: #{mix($green-500, $green-600)};
        --bs-dropdown-link-active-bg: #{$green-700};
    }

    .btn-secondary {
        --bs-btn-bg: #{mix($gray-600, $green-400, 0.5)};
        --bs-btn-border-color: #{rgba($white, 0.25)};
        --bs-btn-hover-bg: #{darken(mix($gray-600, $green-400, 0.5), 5%)};
        --bs-btn-hover-border-color: #{rgba($white, 0.25)};
        --bs-btn-active-bg: #{darken(mix($gray-600, $green-400, 0.5), 10%)};
        --bs-btn-active-border-color: #{rgba($white, 0.5)};
        --bs-btn-focus-border-color: #{rgba($white, 0.5)};
        --bs-btn-focus-box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.2);
    }
}

Kemudian, ketika kita ingin menggunakanya, mudah saja seperti:

<div data-bs-theme="green">
    ...
</div>

Dengan begitu, semua akan mengikuti warna sesuai dengan warna yang ditentukan. Nah baca semua disini ketika Anda tertarik dengan fitur ini. Saya Irsyad, semoga artikel ini bermanfaat ya.

Irsyad A. Panjaitan

Let's start living like no one can help us in any event, so that when we are helped in certain times, it becomes a plus in itself.

Irsyad A. PanjaitanGo to Irsyad A. Panjaitan profile

Follow me on

Support me

Github