M

MLOG

Tiếng Việt

Khám phá sức mạnh của CSS media query và thuộc tính tùy chỉnh để tạo giao diện sáng và tối tự động, thích ứng với sở thích người dùng, nâng cao khả năng truy cập và thẩm mỹ cho khán giả toàn cầu.

Hàm Light-Dark của CSS: Tự động Thích ứng Giao diện cho Web Toàn cầu

Trong thế giới kết nối toàn cầu ngày nay, các trang web cần phải dễ truy cập và hấp dẫn về mặt hình ảnh đối với người dùng từ nhiều nền tảng và sở thích khác nhau. Một trong những cách hiệu quả nhất để đạt được điều này là thông qua việc tự động thích ứng giao diện, cụ thể là cung cấp cả giao diện sáng và tối có thể điều chỉnh dựa trên cài đặt hệ thống của người dùng. Bài viết này sẽ hướng dẫn bạn cách triển khai chức năng này bằng cách sử dụng CSS media query và các thuộc tính tùy chỉnh, đảm bảo trải nghiệm duyệt web liền mạch và thoải mái cho khán giả quốc tế của bạn.

Tại sao nên Triển khai Giao diện Sáng và Tối Tự động?

Có một số lý do thuyết phục để tích hợp việc tự động thích ứng giao diện vào các dự án web của bạn:

Cách Triển khai Thích ứng Giao diện Tự động với CSS

Cốt lõi của việc thích ứng giao diện tự động nằm ở media query prefers-color-scheme. Media query CSS này cho phép bạn phát hiện bảng màu ưa thích của người dùng (sáng hoặc tối) và áp dụng các kiểu tương ứng.

Bước 1: Định nghĩa Thuộc tính Tùy chỉnh (Biến CSS)

Bắt đầu bằng cách định nghĩa các thuộc tính tùy chỉnh (biến CSS) để lưu trữ các giá trị màu cho giao diện sáng và tối của bạn. Điều này giúp dễ dàng chuyển đổi giữa các giao diện bằng cách chỉ cần cập nhật giá trị của biến.


:root {
  --background-color: #ffffff; /* Nền giao diện sáng */
  --text-color: #000000; /* Chữ giao diện sáng */
  --link-color: #007bff; /* Liên kết giao diện sáng */
  --button-background-color: #f0f0f0;
  --button-text-color: #000;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background-color: #121212; /* Nền giao diện tối */
    --text-color: #ffffff; /* Chữ giao diện tối */
    --link-color: #66b3ff; /* Liên kết giao diện tối */
    --button-background-color: #333;
    --button-text-color: #fff;
  }
}

Trong ví dụ này, chúng ta định nghĩa các biến cho màu nền, màu chữ, màu liên kết và màu nút. Bộ chọn :root áp dụng các biến này cho toàn bộ tài liệu. Sau đó, media query @media (prefers-color-scheme: dark) sẽ ghi đè các biến này bằng các giá trị của giao diện tối khi người dùng đã đặt hệ thống của họ ở chế độ tối.

Bước 2: Áp dụng Thuộc tính Tùy chỉnh vào Kiểu của bạn

Tiếp theo, áp dụng các thuộc tính tùy chỉnh này vào các kiểu CSS của bạn để kiểm soát giao diện của các yếu tố trên trang web.


body {
  background-color: var(--background-color);
  color: var(--text-color);
  transition: background-color 0.3s, color 0.3s; /* Chuyển đổi mượt mà */
}

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

button {
  background-color: var(--button-background-color);
  color: var(--button-text-color);
  border: none;
  padding: 10px 20px;
  cursor: pointer;
}

Ở đây, chúng ta đang sử dụng hàm var() để truy cập các giá trị của thuộc tính tùy chỉnh. Chúng ta cũng đã thêm thuộc tính transition vào phần tử body để tạo ra một sự chuyển đổi mượt mà giữa các giao diện.

Bước 3: Kiểm tra và Tinh chỉnh

Kiểm tra kỹ lưỡng việc triển khai của bạn trên các trình duyệt và hệ điều hành khác nhau. Các trình duyệt hiện đại như Chrome, Firefox, Safari và Edge đều hỗ trợ đầy đủ media query prefers-color-scheme. Bạn có thể chuyển đổi giữa chế độ sáng và tối trong cài đặt hệ điều hành để xem các thay đổi được phản ánh trên trang web của bạn.

Các Kỹ thuật Nâng cao và Lưu ý

Cung cấp Nút chuyển đổi Giao diện Thủ công

Mặc dù việc thích ứng giao diện tự động là một khởi đầu tuyệt vời, một số người dùng có thể muốn ghi đè cài đặt hệ thống của họ một cách thủ công. Bạn có thể cung cấp một nút chuyển đổi giao diện thủ công bằng JavaScript và local storage.

HTML:

JavaScript:


const themeToggle = document.getElementById('theme-toggle');
const body = document.body;

let currentTheme = localStorage.getItem('theme') || 'auto'; // Mặc định là tự động

function setTheme(theme) {
  if (theme === 'dark') {
    body.classList.add('dark-theme');
    body.classList.remove('light-theme');
  } else if (theme === 'light') {
    body.classList.add('light-theme');
    body.classList.remove('dark-theme');
  } else {
    body.classList.remove('light-theme', 'dark-theme');
  }
  localStorage.setItem('theme', theme);
  currentTheme = theme;
}

// Áp dụng giao diện ban đầu khi tải trang
if (currentTheme === 'dark') {
  setTheme('dark');
} else if (currentTheme === 'light') {
  setTheme('light');
} else {
  //Nếu đặt là tự động, để prefers-color-scheme quyết định
}


themeToggle.addEventListener('click', () => {
    if (currentTheme === 'auto'){
        setTheme('light');
    } else if (currentTheme === 'light') {
        setTheme('dark');
    } else {
        setTheme('auto');
    }
});

CSS: Thêm CSS sau cùng với CSS trước đó. Lưu ý việc ghi đè thủ công:


body.light-theme {
  --background-color: #ffffff; /* Nền giao diện sáng */
  --text-color: #000000; /* Chữ giao diện sáng */
  --link-color: #007bff; /* Liên kết giao diện sáng */
  --button-background-color: #f0f0f0;
  --button-text-color: #000;
}

body.dark-theme {
  --background-color: #121212; /* Nền giao diện tối */
  --text-color: #ffffff; /* Chữ giao diện tối */
  --link-color: #66b3ff; /* Liên kết giao diện tối */
  --button-background-color: #333;
  --button-text-color: #fff;
}

Đoạn mã này thêm một nút cho phép người dùng chuyển đổi giữa các giao diện sáng, tối và tự động. Giao diện được chọn sẽ được lưu trong local storage để nó được duy trì qua các lần tải trang.

Xử lý Hình ảnh và SVG

Một số hình ảnh và SVG có thể không đẹp trong cả hai giao diện sáng và tối. Bạn có thể sử dụng CSS media query để hiển thị các phiên bản khác nhau của những tài sản này một cách có điều kiện.


img.light-mode {
  display: block;
}

img.dark-mode {
  display: none;
}

@media (prefers-color-scheme: dark) {
  img.light-mode {
    display: none;
  }

  img.dark-mode {
    display: block;
  }
}

Đoạn mã này hiển thị một hình ảnh (với lớp light-mode) trong chế độ sáng và một hình ảnh khác (với lớp dark-mode) trong chế độ tối.

Lưu ý về Bảng màu cho Khán giả Quốc tế

Khi chọn bảng màu cho giao diện sáng và tối, hãy lưu ý đến các liên tưởng văn hóa và các cân nhắc về khả năng truy cập. Dưới đây là một số hướng dẫn chung:

Cân nhắc về Hiệu suất

Mặc dù việc triển khai thích ứng giao diện tự động tương đối đơn giản, điều quan trọng là phải xem xét tác động tiềm tàng đến hiệu suất. Tránh sử dụng các bộ chọn CSS hoặc hoạt ảnh quá phức tạp có thể làm chậm quá trình hiển thị. Ngoài ra, hãy đảm bảo rằng các thuộc tính tùy chỉnh của bạn được định nghĩa hiệu quả để giảm thiểu chi phí tra cứu biến.

Dưới đây là một số phương pháp hay nhất để tối ưu hóa hiệu suất:

Các Phương pháp Hay nhất về Khả năng Truy cập

Đảm bảo giao diện sáng và tối của bạn đáp ứng các nguyên tắc về khả năng truy cập, chẳng hạn như WCAG (Web Content Accessibility Guidelines). Điều này bao gồm việc cung cấp đủ độ tương phản màu sắc, sử dụng HTML ngữ nghĩa và đảm bảo rằng tất cả các yếu tố tương tác đều có thể truy cập bằng bàn phím.

Dưới đây là một số phương pháp hay nhất về khả năng truy cập cụ thể cần tuân theo:

Ví dụ trên các Vùng khác nhau

Hãy xem xét những ví dụ sau về cách giao diện sáng và tối có thể được điều chỉnh cho các đối tượng khán giả toàn cầu đa dạng:

Kết luận

Việc triển khai giao diện sáng và tối tự động là một bước quan trọng để tạo ra một trải nghiệm web dễ truy cập và thân thiện hơn với người dùng cho khán giả toàn cầu. Bằng cách tận dụng CSS media query và các thuộc tính tùy chỉnh, bạn có thể dễ dàng điều chỉnh giao diện trang web của mình để phù hợp với sở thích của người dùng, giảm mỏi mắt và cải thiện khả năng truy cập cho người dùng khiếm thị. Hãy nhớ xem xét các liên tưởng văn hóa, nguyên tắc về khả năng truy cập và các cân nhắc về hiệu suất để đảm bảo một trải nghiệm duyệt web liền mạch và toàn diện cho mọi người.

Bằng cách áp dụng các kỹ thuật này, bạn thể hiện sự cam kết với các nguyên tắc thiết kế web hiện đại và đáp ứng nhu cầu đa dạng của khán giả quốc tế, biến trang web của bạn thành một không gian chào đón và thoải mái cho tất cả mọi người.