Bài 9. Biểu tượng và chế độ màu sáng/tối

Một số khái niệm

Thuộc tính data-bs-theme="dark" đặt trên <html> để cả trang chuyển tối, hoặc trên một phần tử để chỉ phần đó tối. Để chế độ tối đẹp, hãy dùng các lớp màu ngữ nghĩa như bg-body, bg-body-tertiary, text-body-secondary, border thay vì bg-white, text-dark cố định.

Bootstrap Icons

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/Địa chỉ email này đang được bảo vệ từ spam bots, bạn cần kích hoạt Javascript để xem nó. Bạn cần kích hoạt Javascript để xem nó..1/font/bootstrap-icons.min.css">
<i class="bi bi-house"></i>  <i class="bi bi-github"></i>  <i class="bi bi-check-circle-fill text-success fs-3"></i>

<div class="d-flex gap-3 fs-3 mb-2"><i class="bi bi-house"></i><i class="bi bi-book text-success"></i><i class="bi bi-code-slash text-primary"></i><i class="bi bi-database text-warning"></i><i class="bi bi-phone text-danger"></i><i class="bi bi-github"></i></div>
<button class="btn btn-outline-success"><i class="bi bi-play-circle me-1"></i>Bắt đầu học</button>

Nút chuyển sáng/tối

<div class="p-3 rounded border bg-body" id="vung" data-bs-theme="light">
  <div class="d-flex justify-content-between align-items-center mb-2"><strong>Giao diện</strong>
    <button class="btn btn-sm btn-outline-secondary" onclick="const v=document.getElementById('vung');v.dataset.bsTheme=v.dataset.bsTheme==='dark'?'light':'dark'"><i class="bi bi-circle-half"></i> Đổi sáng/tối</button></div>
  <div class="card"><div class="card-body"><h6 class="card-title">Thẻ tự đổi màu</h6><p class="card-text text-body-secondary small">Không cần viết CSS cho chế độ tối.</p><span class="badge text-bg-success">Bootstrap 5.3</span></div></div>
</div>

// Theo hệ điều hành và nhớ lựa chọn
const luu = localStorage.getItem('theme');
const he = matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
document.documentElement.dataset.bsTheme = luu || he;
function doiTheme() {
  const moi = document.documentElement.dataset.bsTheme === 'dark' ? 'light' : 'dark';
  document.documentElement.dataset.bsTheme = moi;
  localStorage.setItem('theme', moi);
}