Trang này được dịch bởi Cloud Translation API.

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

André Cipriani Bandarra

Chrome 96 ra mắt bản dùng thử theo nguyên gốc 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ể trong 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 thử hiệu suất của Giao diện tối tự động so với KPI của bạn.

Hãy truy cập vào tài liệu để tìm hiểu cách thiết lập bản dùng thử theo nguyên gốc, sau đó đăng ký 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:

Nhấp vào trình đơn có biểu tượng ba dấu chấm.
Chọn Công cụ khác rồi chọn Kết xuất.
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 thử Giao diện tối tự động trên điện thoại Android:

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

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

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

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

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

Lưu ý: Việc sử dụng truy vấn nội dung nghe nhìn prefer-color-scheme: dark để tuỳ chỉnh các thành phần sẽ hoạt động khi áp dụng Giao diện tối tự động. Tuy nhiên, tính năng này cũng sẽ được áp dụng trên các trình duyệt khác không có Giao diện tối tự động, dẫn đến một trang có giao diện sáng, nhưng chỉ có một phần giao diện bị tối.

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

Cách phát hiện xem người dùng có đang dùng Giao diện tối tự động hay không: 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 cho nền không phải là màu trắng (rgb(255, 255, 255)), sau đó áp dụng Giao diện tối tự độ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 thay thế 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 điểm đánh dấu vào phần 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 đó, 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 theo từng phần tử vẫn đang trong quá trình 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 để cung cấp cho nhà phát triển một API có ý nghĩa hơn đối với việc 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 mang lại các 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 tuyển chọn của riêng mình, nhằm tôn trọng lựa chọn ưu tiên của người dùng và duy trì những 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 đạt yêu cầu, bạn có thể chọn không sử dụng tính năng này,

Dùng thẻ meta

Cách đầu tiên để 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 của bạn. Ưu điểm của việc sử dụng thẻ meta là tính năng này hoàn toàn ngăn được việc á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 mỗi phần tử

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

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

Bạn vẫn có thể sử dụng phương pháp này để chọn không sử dụng Giao diện tối tự động cho toàn bộ trang bằng cách đặt 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 mong nhận được ý kiến phản hồi trên mọi khía cạnh của việc triển khai: từ kết quả của thuật toán làm tối cho 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 ý kiến phản hồi cho chúng tôi qua nhiều kênh:

Thông qua khảo sát dành cho nhà phát triển.
Báo cáo lỗi trên dự án Chromium.
Thông qua biểu mẫu phản hồi về Bản dùng thử theo nguyên gốc.

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