Giao diện tối tự động

André Cipriani Bandarra

Chrome 96 ra mắt bản dùng thử ban đầu cho Giao diện tối tự động trên Android. Với tính năng này, trình duyệt sẽ áp dụng giao diện tối được tạo tự động cho các trang web có giao diện sáng khi người dùng đã chọn sử dụng giao diện tối trong hệ điều hành. Người dùng có thể chọn không sử dụng giao diện tối bằng cách tắt tuỳ chọn này ở cấp hệ điều hành hoặc trong một chế độ cài đặt cụ thể trên Chrome.

Đăng ký dùng thử theo nguyên gốc

Bạn cũng có thể bật thuật toán làm tối cho người dùng thông qua bản dùng thử theo nguyên gốc. Điều này cho phép bạn kiểm tra hiệu suất của Giao diện tối tự động theo KPI.

Hãy xem tài liệu này để tìm hiểu cách thiết lập bản dùng thử theo nguyên gốc, sau đó đăng ký bản dùng thử theo nguyên gốc AutoDarkMode để nhận mã thông báo.

Kiểm thử Giao diện tối tự động trên thiết bị

Có Công cụ cho nhà phát triển

Cách bật Giao diện tối tự động trong Công cụ cho nhà phát triển:

  1. Nhấp vào trình đơn có biểu tượng ba dấu chấm.
  2. Chọn Công cụ khác, sau đó chọn Kết xuất.
  3. Chọn Bật trên tuỳ chọn Mô phỏng chế độ tối tự động.

Trên điện thoại Android

Cách kiểm tra Giao diện tối tự động trên điện thoại Android:

  1. Chuyển đến chrome://flags và bật thử nghiệm #darken-websites-checkbox-in-theme-setting.
  2. Sau đó, nhấn vào trình đơn có biểu tượng ba dấu chấm, chọn Cài đặt rồi chọn Giao diện, rồi đánh dấu vào hộp có dòng chữ Áp dụng Giao diện tối cho các trang web (nếu có thể).

Giờ đây, các trang sáng sẽ bị làm tối trên điện thoại.

Tuỳ chỉnh theo từng phần tử

Mặc dù chúng tôi mong muốn Giao diện tối tự động tạo ra kết quả tốt trong mọi trường hợp, nhưng các cuộc trò chuyện sớm với các nhà phát triển cho rằng họ muốn điều chỉnh các thành phần cụ thể để thích ứng tốt hơn với giao diện mong muốn.

Trong bản dùng thử theo nguyên gốc này, bạn có thể tuỳ chỉnh các phần tử đó bằng cách sử dụng JavaScript để phát hiện xem người dùng có đang ở Giao diện tối tự động hay không, sau đó tuỳ chỉnh các phần tử mong muốn.

Phát hiện giao diện tối tự động

Để phát hiện xem người dùng có đang sử dụng Giao diện tối tự động hay không, hãy tạo một phần tử có background-color được đặt thành canvas và bảng phối màu được đặt thành sáng. Nếu màu tính toán được cho nền không phải màu trắng (rgb(255, 255, 255)), thì Giao diện tối tự động sẽ được áp dụng cho trang.

<div id="detection"
     style="display: none; background-color: canvas; color-scheme: light">
</div>

const detectionDiv = document.querySelector('#detection');
// If the computed style is not white then the page is in Auto Dark Theme.
const isAutoDark = getComputedStyle(detectionDiv).backgroundColor != 'rgb(255, 255, 255)';
// Update element styles when Auto Dark Theme is applied.
if (isAutoDark) {
  const myElement = document.querySelector('#my-element');
  myElement.classList.add('autoDarkOnlyStyle');
}

Tuỳ chỉnh một số lượng lớn các phần tử

Giải pháp nêu trên có thể khó mở rộng quy mô nếu bạn cần tuỳ chỉnh nhiều phần tử hơn. Một cách khác là sử dụng tính năng phát hiện Giao diện tối tự động để thêm một lớp đánh dấu vào nội dung của trang:

function setAutoDarkClass() {
  // We can also use JavaScript to generate the detection element.
  const detectionDiv = document.createElement('div');
  detectionDiv.style.display = 'none';
  detectionDiv.style.backgroundColor = 'canvas';
  detectionDiv.style.colorScheme = 'light';
  document.body.appendChild(detectionDiv);
  // If the computed style is not white then the page is in Auto Dark Theme.
  const isAutoDark = getComputedStyle(detectionDiv).backgroundColor != 'rgb(255, 255, 255)';

  // remove the detection element from the DOM.
  document.body.removeChild(detectionDiv);

  // Set the marker class on the body if in Auto Dark Theme.
  if (isAutoDark) {
    document.body.classList.add('auto-dark-theme');
  }
}
document.addEventListener("DOMContentLoaded", setAutoDarkClass);

Sau đó, hãy sử dụng CSS để tuỳ chỉnh các phần tử nếu cần:

.auto-dark-theme > #my-element {
  border-color: red;
}

API tuỳ chỉnh cho từng phần tử vẫn đang trong giai đoạn phát triển ban đầu. Chúng tôi đang làm việc với các nhóm tiêu chuẩn nhằm cung cấp cho nhà phát triển một API hữu ích hơn để chọn không sử dụng. Bạn có thể theo dõi cuộc trò chuyện về vấn đề này trên GitHub.

Cách chọn không sử dụng Giao diện tối tự động

Bên cạnh việc tôn trọng lựa chọn của người dùng trên thiết bị của họ, giao diện tối còn mang lại những lợi ích cho người dùng như cải thiện thời lượng pin và khả năng hỗ trợ tiếp cận. Thay vì chọn không sử dụng Giao diện tối tự động, bạn nên triển khai giao diện tối do bạn tự chọn lọc để tôn trọng lựa chọn ưu tiên của người dùng và giữ các lợi ích đó.

Tuy nhiên, trong trường hợp không thể triển khai giao diện tối của riêng bạn và kết quả do Giao diện tối tự động tạo ra không như ý muốn, thì bạn có thể chọn không sử dụng tính năng này,

Sử dụng thẻ meta

Một cách khác để chọn không sử dụng Giao diện tối tự động là thêm thẻ meta sau vào tiêu đề trang. Ưu điểm của việc sử dụng thẻ meta là ngăn không cho áp dụng Giao diện tối tự động, điều này có thể gây ra hiện tượng "nội dung bị tối".

<head>
  <meta name="color-scheme" content="only light">
  ...
</head>

Chọn không sử dụng theo phần tử

Lựa chọn thay thế thứ hai để chọn không sử dụng là đặt giá trị của thuộc tính CSS color-scheme thành only light. Mặc dù bạn có thể chọn không sử dụng Chế độ tối cho mỗi phần tử trên toàn bộ trang, nhưng ưu điểm của phương pháp này là chỉ cho phép chọn không sử dụng một số phần cụ thể của trang:

#my-element {
  color-scheme: only light;
}

Bạn vẫn có thể dùng phương pháp này để tắt Giao diện tối tự động trên toàn bộ trang bằng cách thiết lập bảng phối màu trên phần tử :root:

:root {
  color-scheme: only light;
}

Hãy gửi phản hồi cho chúng tôi!

Giao diện tối tự động vẫn đang được chỉ định và chúng tôi đang tìm ý kiến phản hồi về mọi khía cạnh triển khai: từ kết quả của thuật toán làm tối cho đến các API dành cho nhà phát triển để tuỳ chỉnh và chọn không sử dụng phần tử.

Bạn có thể gửi phản hồi cho chúng tôi qua nhiều kênh như:

Nhiếp ảnh gia: Félix Besombes.