Assalamu’alaikum Warahmatullahi Wabarakaatuh,
Halo Sobat Mas Rizky, berjumpa lagi ya di Website yang sama, dalam kesempatan kali ini admin Masrizky.web.id akan berbagi Tutorial Bootstrap 5 Tentang Dark Mode.
Bootstrap 5 adalah salah satu framework CSS paling populer yang digunakan untuk mengembangkan desain web yang responsif dan modern.
Tutorial Bootstrap 5 Tentang Dark Mode
Salah satu fitur yang banyak dicari oleh pengembang saat ini adalah dark mode, yang memberikan tampilan gelap pada website atau aplikasi web, sehingga lebih nyaman bagi pengguna yang lebih senang dengan tampilan yang tidak terlalu terang, terutama di malam hari.
Dalam tutorial ini, kita akan membahas cara mengimplementasikan dark mode menggunakan Bootstrap 5.
Pertama, pastikan Anda sudah mengintegrasikan Bootstrap 5 ke dalam proyek Anda. Anda dapat melakukannya dengan menambahkan link CDN Bootstrap ke dalam file HTML Anda:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Belajar Bootstrapo</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
</head>
<body>
<header class="bg-primary py-5">
<div class="container">
<h1 class="display-4 text-white text-center">Hello, world!</h1>
</div>
</header>
<div class="container">
<p class="mt-5">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Neque vitae tempus quam pellentesque nec nam aliquam sem et. Duis at consectetur lorem donec massa sapien faucibus. Elit ut aliquam purus sit amet luctus venenatis lectus. Commodo nulla facilisi nullam vehicula. Habitasse platea dictumst quisque sagittis. Urna neque viverra justo nec ultrices dui sapien eget mi. Pretium aenean pharetra magna ac placerat vestibulum lectus. Imperdiet proin fermentum leo vel orci porta non pulvinar neque. Lacinia at quis risus sed vulputate. Aliquet nibh praesent tristique magna. Risus viverra adipiscing at in tellus integer. Laoreet suspendisse interdum consectetur libero id faucibus nisl tincidunt eget. Eu non diam phasellus vestibulum lorem sed risus. Elementum nibh tellus molestie nunc non.</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
</body>
</html>
Menambahkan JavaScript
Langkah pertama adalah penambahan JavaScript. Simpan JS ini di atas </head>
<script> /*! * Color mode toggler for Bootstrap's docs (https://getbootstrap.com/) * Copyright 2011-2024 The Bootstrap Authors * Licensed under the Creative Commons Attribution 3.0 Unported License. */ (() => { 'use strict' const storedTheme = localStorage.getItem('theme') const getPreferredTheme = () => { if (storedTheme) { return storedTheme } return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light' } const setTheme = function (theme) { if (theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches) { document.documentElement.setAttribute('data-bs-theme', 'dark') } else { document.documentElement.setAttribute('data-bs-theme', theme) } } setTheme(getPreferredTheme()) const showActiveTheme = (theme, focus = false) => { const themeSwitcher = document.querySelector('#bd-theme') if (!themeSwitcher) { return } const themeSwitcherText = document.querySelector('#bd-theme-text') const activeThemeIcon = document.querySelector('.theme-icon-active use') const btnToActive = document.querySelector(`[data-bs-theme-value="${theme}"]`) const svgOfActiveBtn = btnToActive.querySelector('svg use').getAttribute('href') document.querySelectorAll('[data-bs-theme-value]').forEach(element => { element.classList.remove('active') element.setAttribute('aria-pressed', 'false') }) btnToActive.classList.add('active') btnToActive.setAttribute('aria-pressed', 'true') activeThemeIcon.setAttribute('href', svgOfActiveBtn) const themeSwitcherLabel = `${themeSwitcherText.textContent} (${btnToActive.dataset.bsThemeValue})` themeSwitcher.setAttribute('aria-label', themeSwitcherLabel) if (focus) { themeSwitcher.focus() } } window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => { if (storedTheme !== 'light' || storedTheme !== 'dark') { setTheme(getPreferredTheme()) } }) window.addEventListener('DOMContentLoaded', () => { showActiveTheme(getPreferredTheme()) document.querySelectorAll('[data-bs-theme-value]') .forEach(toggle => { toggle.addEventListener('click', () => { const theme = toggle.getAttribute('data-bs-theme-value') localStorage.setItem('theme', theme) setTheme(theme) showActiveTheme(theme, true) }) }) }) })() </script>
Kode HTML
Ini adalah kode HTML berikut SVG icon untuk tombol Dark Mode, silahkan simpan kode ini di bawah <body>
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;"> <symbol id="check2" viewBox="0 0 16 16"> <path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"/> </symbol> <symbol id="circle-half" viewBox="0 0 16 16"> <path d="M8 15A7 7 0 1 0 8 1v14zm0 1A8 8 0 1 1 8 0a8 8 0 0 1 0 16z"/> </symbol> <symbol id="moon-stars-fill" viewBox="0 0 16 16"> <path d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z"/> <path d="M10.794 3.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387a1.734 1.734 0 0 0-1.097 1.097l-.387 1.162a.217.217 0 0 1-.412 0l-.387-1.162A1.734 1.734 0 0 0 9.31 6.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387a1.734 1.734 0 0 0 1.097-1.097l.387-1.162zM13.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.156 1.156 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.156 1.156 0 0 0-.732-.732l-.774-.258a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732L13.863.1z"/> </symbol> <symbol id="sun-fill" viewBox="0 0 16 16"> <path d="M8 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z"/> </symbol> </svg> <div class="dropdown position-fixed bottom-0 end-0 mb-3 me-3 bd-mode-toggle"> <button class="btn btn-bd-primary py-2 dropdown-toggle d-flex align-items-center" id="bd-theme" type="button" aria-expanded="false" data-bs-toggle="dropdown" aria-label="Toggle theme (auto)"> <svg class="bi my-1 theme-icon-active" width="1em" height="1em"><use href="#circle-half"></use></svg> <span class="visually-hidden" id="bd-theme-text">Toggle theme</span> </button> <ul class="dropdown-menu dropdown-menu-end shadow" aria-labelledby="bd-theme-text"> <li> <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="light" aria-pressed="false"> <svg class="bi me-2 opacity-50 theme-icon" width="1em" height="1em"><use href="#sun-fill"></use></svg> Light <svg class="bi ms-auto d-none" width="1em" height="1em"><use href="#check2"></use></svg> </button> </li> <li> <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="dark" aria-pressed="false"> <svg class="bi me-2 opacity-50 theme-icon" width="1em" height="1em"><use href="#moon-stars-fill"></use></svg> Dark <svg class="bi ms-auto d-none" width="1em" height="1em"><use href="#check2"></use></svg> </button> </li> <li> <button type="button" class="dropdown-item d-flex align-items-center active" data-bs-theme-value="auto" aria-pressed="true"> <svg class="bi me-2 opacity-50 theme-icon" width="1em" height="1em"><use href="#circle-half"></use></svg> Auto <svg class="bi ms-auto d-none" width="1em" height="1em"><use href="#check2"></use></svg> </button> </li> </ul> </div>
Penambahan CSS
Walaupun Bootstrap merupaka Framework CSS, terkadang satu saat kita perlu menambah CSS Custom untuk memoles. Simpan CSS ini di atas </head> di bawah JavaScript yang pertama.
<style> .btn-bd-primary { --bd-violet-bg: #712cf9; --bd-violet-rgb: 112.520718, 44.062154, 249.437846; --bs-btn-font-weight: 600; --bs-btn-color: var(--bs-white); --bs-btn-bg: var(--bd-violet-bg); --bs-btn-border-color: var(--bd-violet-bg); --bs-btn-hover-color: var(--bs-white); --bs-btn-hover-bg: #6528e0; --bs-btn-hover-border-color: #6528e0; --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb); --bs-btn-active-color: var(--bs-btn-hover-color); --bs-btn-active-bg: #5a23c8; --bs-btn-active-border-color: #5a23c8; } .bd-mode-toggle { z-index: 1500; } .bi { vertical-align: -.125em; fill: currentColor; } </style>
Pemasangan Dark Mode Selesai, tetapi Blok biru tidak ikut menjadi Dark karena warna paten.
Apabila kita ingin tetap merubah Blok Biru di bagian header menjadi Gelap, silahkan tambahkan kode CSS seperti ini. Silahkan atur warnanya.
[data-bs-theme="dark"] header{background:#111 !important}
Maka hasilnya seperti pada demo.
Penempatan Button Toggle Dark Mode
Untuk penempatan Button Dark Mode kita bisa sesuaikan pada bagian ini.
<div class="dropdown position-fixed bottom-0 end-0 mb-3 me-3 bd-mode-toggle">
Demikian informasi tentang Tutorial Bootstrap 5 Tentang Dark Mode yang dapat kami sampaikan, semoga bermanfaat.
Jika informasi ini bermanfaat, Jangan lupa Share ya sobat mas rizky, Terima Kasih.
Wassalamu’alaikum Warahmatullahi Wabarakaatuh.
