M

MLOG

Tiếng Việt

Triển khai chế độ tối trên website của bạn với hướng dẫn toàn diện này. Tìm hiểu về CSS media query, nút chuyển đổi JavaScript, các lưu ý về khả năng truy cập và thực hành tốt nhất cho trải nghiệm người dùng liền mạch.

Triển khai Chế độ Tối: Hướng dẫn Toàn diện với CSS và JavaScript

Chế độ tối ngày càng trở nên phổ biến, mang lại trải nghiệm xem thoải mái hơn, đặc biệt trong môi trường ánh sáng yếu. Hướng dẫn này cung cấp một cái nhìn tổng quan toàn diện về cách triển khai chế độ tối trên trang web của bạn bằng CSS và JavaScript, đảm bảo trải nghiệm người dùng liền mạch và dễ tiếp cận cho khán giả toàn cầu.

Tại sao nên Triển khai Chế độ Tối?

Có một số lý do thuyết phục để xem xét việc triển khai chế độ tối:

Các phương pháp Triển khai Chế độ Tối

Có một số cách tiếp cận để triển khai chế độ tối, mỗi cách đều có ưu và nhược điểm riêng. Chúng ta sẽ khám phá các phương pháp phổ biến nhất:

1. Triển khai Chế độ Tối bằng Truy vấn Media CSS

Truy vấn media CSS prefers-color-scheme cho phép bạn phát hiện chế độ màu ưa thích của người dùng và áp dụng các kiểu khác nhau cho phù hợp. Đây là cách đơn giản và hiệu quả nhất để triển khai chế độ tối cho những người dùng đã cài đặt tùy chọn hệ thống của họ.

Ví dụ về Mã nguồn

Thêm đoạn mã CSS sau vào tệp stylesheet của bạn:

/* Chủ đề Mặc định (Sáng) */
body {
  background-color: #fff;
  color: #000;
}

/* Chủ đề Tối */
@media (prefers-color-scheme: dark) {
  body {
    background-color: #222;
    color: #fff;
  }
  /* Điều chỉnh các phần tử khác nếu cần */
  h1, h2, h3 {
    color: #ddd;
  }
  a {
    color: #8ab4f8;
  }
}

Giải thích:

Ưu điểm

Nhược điểm

2. Triển khai Chế độ Tối bằng Nút chuyển đổi JavaScript

Sử dụng nút chuyển đổi JavaScript cung cấp cho người dùng một công tắc thủ công để kiểm soát chủ đề của trang web. Điều này cho phép người dùng kiểm soát nhiều hơn và cho phép họ ghi đè tùy chọn hệ thống của mình. Cách tiếp cận này rất quan trọng để phục vụ người dùng trên nhiều thiết bị và nền tảng khác nhau có thể không hỗ trợ hoặc hiển thị cài đặt chế độ tối trên toàn hệ thống một cách nhất quán.

Cấu trúc HTML

Đầu tiên, thêm một phần tử chuyển đổi vào HTML của bạn:

<label class="switch">
  <input type="checkbox" id="darkModeToggle">
  <span class="slider round"></span>
</label>

Điều này tạo ra một công tắc chuyển đổi đơn giản bằng cách sử dụng hộp kiểm và một số kiểu CSS tùy chỉnh.

Tạo kiểu CSS (Tùy chọn)

Bạn có thể tạo kiểu cho công tắc chuyển đổi bằng CSS. Đây là một ví dụ:

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Thanh trượt bo tròn */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

Mã JavaScript

Bây giờ, hãy thêm đoạn mã JavaScript sau để xử lý chức năng chuyển đổi:

const darkModeToggle = document.getElementById('darkModeToggle');
const body = document.body;

// Hàm để chuyển đổi chế độ tối
function toggleDarkMode() {
  body.classList.toggle('dark-mode');

  // Lưu tùy chọn của người dùng vào localStorage
  if (body.classList.contains('dark-mode')) {
    localStorage.setItem('darkMode', 'enabled');
  } else {
    localStorage.setItem('darkMode', 'disabled');
  }
}

// Kiểm tra localStorage để tìm tùy chọn đã lưu
if (localStorage.getItem('darkMode') === 'enabled') {
  body.classList.add('dark-mode');
  darkModeToggle.checked = true;
}

// Thêm trình lắng nghe sự kiện vào nút chuyển đổi
darkModeToggle.addEventListener('change', toggleDarkMode);

Giải thích:

Tạo kiểu CSS cho Chế độ Tối (sử dụng class)

Cập nhật CSS của bạn để sử dụng lớp dark-mode để áp dụng các kiểu chủ đề tối:

/* Chủ đề Mặc định (Sáng) */
body {
  background-color: #fff;
  color: #000;
}

/* Chủ đề Tối */
body.dark-mode {
  background-color: #222;
  color: #fff;
}

body.dark-mode h1, body.dark-mode h2, body.dark-mode h3 {
  color: #ddd;
}

body.dark-mode a {
  color: #8ab4f8;
}

Ưu điểm

Nhược điểm

3. Kết hợp Truy vấn Media và JavaScript

Cách tiếp cận tốt nhất thường là kết hợp các truy vấn media CSS và một nút chuyển đổi JavaScript. Điều này mang lại những lợi ích tốt nhất của cả hai thế giới: tự động phát hiện chế độ màu ưa thích của người dùng, đồng thời cho phép người dùng ghi đè thủ công tùy chọn hệ thống. Điều này phục vụ cho một lượng khán giả rộng lớn hơn, bao gồm cả những người có thể không biết hoặc không thể thay đổi cài đặt chủ đề trên toàn hệ thống của họ.

Ví dụ về Mã nguồn

Sử dụng cùng một HTML và CSS từ ví dụ Nút chuyển đổi JavaScript. Sửa đổi JavaScript để kiểm tra tùy chọn hệ thống:

const darkModeToggle = document.getElementById('darkModeToggle');
const body = document.body;

// Hàm để chuyển đổi chế độ tối
function toggleDarkMode() {
  body.classList.toggle('dark-mode');

  // Lưu tùy chọn của người dùng vào localStorage
  if (body.classList.contains('dark-mode')) {
    localStorage.setItem('darkMode', 'enabled');
  } else {
    localStorage.setItem('darkMode', 'disabled');
  }
}

// Kiểm tra localStorage để tìm tùy chọn đã lưu, sau đó kiểm tra tùy chọn hệ thống
if (localStorage.getItem('darkMode') === 'enabled') {
  body.classList.add('dark-mode');
  darkModeToggle.checked = true;
} else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
  body.classList.add('dark-mode');
  darkModeToggle.checked = true;
}

// Thêm trình lắng nghe sự kiện vào nút chuyển đổi
darkModeToggle.addEventListener('change', toggleDarkMode);

Giải thích:

Ưu điểm

Nhược điểm

Những lưu ý về Khả năng truy cập

Khi triển khai chế độ tối, điều quan trọng là phải xem xét khả năng truy cập để đảm bảo rằng trang web của bạn vẫn có thể sử dụng được cho tất cả người dùng. Hãy nhớ rằng chỉ đơn giản là đảo ngược màu sắc không tự động đảm bảo khả năng truy cập. Dưới đây là một số cân nhắc chính:

Các phương pháp hay nhất để Triển khai Chế độ Tối

Dưới đây là một số phương pháp hay nhất cần tuân theo khi triển khai chế độ tối trên trang web của bạn:

Ví dụ: Biến CSS cho Chủ đề

Các biến CSS giúp dễ dàng chuyển đổi giữa các chủ đề sáng và tối. Xác định các biến trong lớp giả :root:

:root {
  --bg-color: #fff;
  --text-color: #000;
  --link-color: #007bff;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
}

a {
  color: var(--link-color);
}

body.dark-mode {
  --bg-color: #222;
  --text-color: #fff;
  --link-color: #8ab4f8;
}

Bây giờ, khi lớp dark-mode được thêm vào body, các biến CSS sẽ được cập nhật và các kiểu sẽ được áp dụng tự động.

Kết luận

Việc triển khai chế độ tối có thể nâng cao đáng kể trải nghiệm người dùng trên trang web của bạn, cải thiện khả năng truy cập và thậm chí tiết kiệm pin. Bằng cách tuân theo các kỹ thuật và phương pháp hay nhất được nêu trong hướng dẫn này, bạn có thể tạo ra một trải nghiệm chế độ tối liền mạch và thú vị cho người dùng của mình trên toàn thế giới.

Hãy nhớ ưu tiên khả năng truy cập và kiểm tra kỹ lưỡng việc triển khai của bạn để đảm bảo rằng trang web của bạn vẫn có thể sử dụng được cho tất cả người dùng, bất kể sở thích hay khả năng thị giác của họ.

Bằng cách triển khai chế độ tối một cách chu đáo, bạn không chỉ đang theo một xu hướng mà còn tạo ra một trải nghiệm web toàn diện và thân thiện hơn với người dùng cho khán giả toàn cầu. Sự cống hiến này cho trải nghiệm người dùng có thể mang lại lợi ích lớn cho hiệu suất và sự hấp dẫn tổng thể của trang web của bạn.