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 giao diện tối trong hệ điều hành. Người dùng có thể chọn không tham gia giao diện tối bằng cách tắt chế độ 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. Nhờ đó, bạn có thể kiểm tra hiệu suất của Giao diện tối tự động liên quan đến KPI của bạn.

Hãy xem 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ý 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ị

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:

  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 rồi chọn Hiển thị.
  3. Chọn Enable (Bật) trong tuỳ chọn Emulate auto dark mode (Mô phỏng chế độ tối tự động).

Trên điện thoại Android

Cách thử nghiệm 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 đó, 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, nếu 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ù chúng tôi hướng đến việc Giao diện tối tự động sẽ tạo ra 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 phần tử 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 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.

Đang phát hiện Giao diện tối tự động

Để phát hiện xem người dùng có đang ở 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 được tính toán cho nền không phải là 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>-<sche>me: 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 phần tử

Giải pháp trên có thể khó mở rộng nếu bạn cần tuỳ chỉnh số lượng phần tử lớn 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 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 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 để cung cấp cho lập trình viên một API biểu cảm hơn cho việc chọn không tham gia. 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 tham gia 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 nhiều lợi ích cho người dùng, chẳng hạn 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 được tuyển chọn của riêng mình để tôn trọng lựa chọn ưu tiên của người dùng và giữ lại những lợi ích đó.

Tuy nhiên, trong trường hợp bạn không thể triển khai giao diện tối của riêng mình 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,

Sử 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 đề của trang. Ưu điểm của việc sử dụng thẻ meta là ngăn chặn hoàn toàn 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 nhấp nháy nội dung tối".

<head>
  <meta name="color-scheme" content=&q>uot;onl<y lig>ht"
  ...
/head

Chọn không tham gia cho từng 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ù có thể sử dụng tính năng chọn không tham gia cho mỗi phần tử để chọn không tham gia Chế độ tối tự động cho 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 tham gia cho 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 tham gia 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 tìm kiếm ý kiến phản hồi về mọi khía cạnh của quá trình triển khai: từ kết quả của thuật toán làm tối đến API của nhà phát triển để tuỳ chỉnh và chọn không tham gia 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:

Ảnh của Félix Besombes.