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 tính năng Tự động chuyển sang giao diện tối 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 chuyển đến tài liệu để tìm hiểu cách thiết lập bản dùng thử theo nguồn gốc, sau đó đăng ký bản dùng thử theo nguồn gốc AutoDarkMode để nhận mã thông báo.

Kiểm thử tính năng Tự động chuyển sang giao diện tối trên thiết bị

Bằng 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 More Tools (Công cụ khác) rồi chọn Rendering (Hiển thị).
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ử tính năng Tự động chuyển sang giao diện tối trên điện thoại Android:

Chuyển đến chrome://flags và bật thử nghiệm #darken-websites-checkbox-in-theme-setting.
Sau đó, hãy 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, sau đó đá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 phần tử

Mặc dù chúng tôi hướng đến việc Chế độ tối tự động mang lại kết quả tốt trong mọi trường hợp, nhưng các cuộc trò chuyện ban đầu với nhà phát triển cho thấy 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 và cảm nhận mà họ mong muốn.

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

Lưu ý: Việc sử dụng truy vấn nội dung đa phương tiện prefer-color-scheme: dark để tuỳ chỉnh các phần tử sẽ hoạt động khi bạn áp dụng tính năng Tự động chuyển sang giao diện tối. 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 được làm tối.

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

Để phát hiện xem người dùng có đang ở chế độ Tự động chuyển sang giao diện tối 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 được tính toán cho nền không phải là màu trắng (rgb(255, 255, 255)), thì Chế độ 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 ở trên có thể khó mở rộng 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 Tự động phát hiện giao diện tối để 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 đó, 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 theo 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 để cung cấp cho nhà phát triển một API rõ ràng 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 Chế độ 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ị, giao diện tối còn mang lại lợi ích cho người dùng như cải thiện thời lượng pin và hỗ trợ tiếp cận. Thay vì chọn không sử dụng tính năng Tự động chuyển sang giao diện tối, bạn nên triển khai giao diện tối do mình tuyển chọn để 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 tính năng Tự động chuyển sang giao diện tối 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,

Sử dụng thẻ meta

Phương án thay thế đầ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 đề của trang. Ưu điểm của việc sử dụng thẻ meta là 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 " Flash nội dung bị tối".

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

Chọn không sử dụng cho mỗi phần tử

Cách thứ hai để chọn không tham gia là đặt giá trị của thuộc tính CSS color-scheme thành only light. Mặc dù bạn có thể sử dụng chế độ chọn không sử dụng cho mỗi phần tử để chọn không sử dụng toàn bộ trang trong Chế độ tối tự động, 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ể trên 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 áp 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 đến các API dành cho nhà phát triển về việc 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 bản khảo sát dành cho nhà phát triển.
Gửi lỗi trên dự án Chromium.
Thông qua Biểu mẫu phản hồi về chương trình Thử nghiệm Origin.

Ảnh của Félix Besombes.