Một số thủ thuật CSS đơn giản để bật Dark Mode cho Website

Bạn có thể đã quen thuộc với các truy vấn phương tiện (media queries). Chúng đang được sử dụng rộng rãi để làm cho các trang web responsive. Thuộc tính chiều rộng và chiều cao chứa các kích thước của màn hình. Sau đó, bạn sẽ sử dụng CSS để hiển thị các bố cục khác nhau ở các kích thước màn hình khác nhau.

Truy vấn phương tiện prefers-color-scheme hoạt động theo cách tương tự. Người dùng có thể cấu hình hệ điều hành của họ để sử dụng light hoăc dark mode. Prefers-color-scheme chứa giá trị đó. Giá trị là sáng (light) hoặc tối (dark), mặc dù thông số kỹ thuật của W3C nói rằng nó có thể hỗ trợ các giá trị khác trong tương lai như nâu đỏ. Chúng ta sẽ chỉ định các giá trị khác nhau của các biến CSS cho cả hai chế độ và để hệ điều hành của người dùng quyết định.

Một số thủ thuật CSS đơn giản cho dark mode

Sử dụng truy vấn phương tiện prefers-color-scheme

Hai giá trị của truy vấn phương tiện prefers-color-scheme là:

/* Light mode */
@media (prefers-color-scheme: light) {
   :root {
       --body-bg: #FFFFFF;
       --body-color: #000000;
   }
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
   :root {
       --body-bg: #000000;
       --body-color: #FFFFFF;
   }
}

Trong code CSS ở trên, –body-bg và –body-color là các biến CSS. Như bạn có thể thấy, chúng chứa các giá trị khác nhau cho cả hai chế độ. Trong light mode, mình thiết lập nền trắng với văn bản màu đen. Trong dark mode, mình thiết lập nền đen với văn bản màu trắng.

Vì W3C có thể giới thiệu các giá trị trong tương lai, nên việc chuyển đổi CSS này thành boolean là rất hợp lý.

/* Light mode */
:root {
   --body-bg: #FFFFFF;
   --body-color: #000000;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
   :root {
       --body-bg: #000000;
       --body-color: #FFFFFF;
   }
}

Trong đoạn code trên, mình đang xác định light mode theo mặc định và chuyển đổi nó thành dark mode nếu truy vấn phương tiện là dark (tức là người dùng sử dụng dark mode trên hệ điều hành). Bằng cách này, mọi giá trị trong tương lai được thêm vào truy vấn phương tiện sẽ đặt light mode theo mặc định.

Sử dụng các biến CSS

Bây giờ mình có các giá trị khác nhau cho các chủ đề khác nhau, chúng ta sẽ sử dụng chúng để tạo kiểu cho trang.

body {
   background: var(--body-bg);
   color: var(--body-color);
}

Cú pháp var() là cách CSS sử dụng các biến. Trong đoạn code trên, mình đang nói rằng hãy đặt nền thành giá trị của –body-bg và đặt màu thành giá trị của –body-color. Lưu ý rằng giá trị của các biến này đến từ truy vấn phương tiện. Có nghĩa là màu nền và nền dựa trên cài đặt của hệ điều hành.

Đây là sức mạnh thực sự của truy vấn phương tiện: Cung cấp trải nghiệm người dùng nhất quán từ hệ điều hành đến trang web.

Nếu bạn truy cập findmymastodon.com và chuyển đổi chủ đề của hệ điều hành, bạn sẽ thấy trang web chuyển đổi từ chủ đề này sang chủ đề khác.

Kết luận

Lưu ý rằng việc sử dụng prefers-color-scheme không khác gì việc sử dụng một ngôn ngữ lập trình thông thường. Chúng ta xác định các biến có giá trị thay đổi dựa trên một số logic. Và các biến đó được sử dụng cho các hoạt động tiếp theo.

Khả năng cho phép trang web của bạn điều chỉnh theo chủ đề mà người dùng lựa chọn là một tính năng tuyệt vời. Và nó càng làm mờ ranh giới giữa máy tính để bàn và web vì lợi ích của người dùng. Các phiên bản trình duyệt mới nhất hỗ trợ prefers-color-scheme, vì vậy bạn có thể bắt đầu thử tính năng này ngay hôm nay.