CSS - Cách thêm chế độ Dark Mode cho website

CSS là chữ viết tắt của Cascading Style Sheets, nó là một ngôn ngữ được sử dụng để tìm và định dạng lại các phần tử được tạo ra bởi các ngôn ngữ đánh dấu (HTML). Nói ngắn gọn hơn là ngôn ngữ tạo phong cách cho trang web. Bạn có thể hiểu đơn giản rằng, nếu HTML đóng vai trò định dạng các phần tử trên website như việc tạo ra các đoạn văn bản, các tiêu đề, bảng,…thì CSS sẽ giúp chúng ta có thể thêm style vào các phần tử HTML đó như đổi bố cục, màu sắc trang, đổi màu chữ, font chữ, thay đổi cấu trúc…

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ố Tips đơn giản khi sử dụng CSS cho Dark Mode

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

Đầu tiên cần biết đến hai giá trị của truy vấn phương tiện prefers-color-scheme

  /* 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 đoạn Code trên ta có thể thấy đã xuất hiện hai biến là --body-bg và --body-color. Với chế độ Light mode ta để nền trắng chữ đen, còn chế độ Dark mode sẽ là nền đen chữ trắng

Một đoạn code khác:

   
      /* 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

Phần này mình sẽ áp dụng các giá trị khác nhau cho những chủ đề khác nhau. Từ đó tạo kiểu tùy chỉnh cho các trang.

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

Ở đây xuất hiện cú pháp var là cách để CSS sử dụng biến. Ta có thể hiểu đoạn code trên rằng: biến giá trị của --body-bg thành giá trị của --body-color