Dark Mode đang là một xu hướng ngày càng được ưa chuộng và sử dụng phổ biến. Cũng chính vì lý do đó iOS và Android vừa qua đã đều cập nhật giao diện tối [Dark Mode] cho hệ điều hành của mình.
I am a link, don't click me!
Ý tưởng của phương pháp này là style như bình thường và gọi nó là kiểu mặc định, ví dụ set light-mode là chế độ mặc định, ngoài ra, tạo thêm 1 tập hợp các style cho chế độ còn lại [trong trường hợp này là dark-mode] để trong class mà ta set cho thẻ body. Sau đó dùng thêm JS để chuyển giữa 2 chế độbody {
color: #222;
background: #fff;
}
a {
color: #0033cc;
}
/* Dark Mode styles */
body.dark-theme {
color: #eee;
background: #121212;
}
body.dark-theme a {
color: #809fff;
}
const btn = document.querySelector['.btn-toggle'];
// Lắng nghe sự kiện click vào button
btn.addEventListener['click', function[] {
// Thêm hoặc xóa class dark-theme ở body
document.body.classList.toggle['dark-theme'];
}]
Vậy là xong, đơn giản nhỉ!
DEMO
Tách biệt CSS
Thay vì giữ tất cả CSS trong cùng 1 file, chúng ta có thể tách ra 2 file cho 2 chế độ. Ví dụ chế độ light-mode có file light-theme.scss
/* light-theme.css */
body {
color: #222;
background: #fff;
}
a {
color: #0033cc;
}
Và tương tự chúng ta có dark-mode trong dark-theme.css
/* dark-theme.css */
body {
color: #eee;
background: #121212;
}
body a {
color: #809fff;
}
Giờ hãy liên kết kiểu mặc định vào file HTML, ví dụ là light-mode
Ta sử dụng ID #theme-link để chuyển giữa 2 chế độ trong JS
const btn = document.querySelector[".btn-toggle"];
const theme = document.querySelector["#theme-link"];
// Lắng nghe sự kiện click vào button
btn.addEventListener["click", function[] {
// Nếu URL đang là "ligh-theme.css"
if [theme.getAttribute["href"] == "light-theme.css"] {
// thì chuyển nó sang "dark-theme.css"
theme.href = "dark-theme.css";
} else {
// và ngược lại
theme.href = "light-theme.css";
}
}];
DEMO
Sử dụng CSS custom properties
Chúng ta có thể tận dụng sức mạnh của custom properties trong CSS để tạo chế độ dark-mode. Nó giúp chúng ta tránh phải viết cả bộ style cho từng chế độ, việc thay đổi style cũng dễ và nhanh hơn. Trong file HTML chúng ta vẫn sẽ chuyển class giống như cách đầu tiên.
Còn trong file CSS, hãy xác định các giá trị của chế độ light-mode bằng custom properties
body {
--text-color: #222;
--bkg-color: #fff;
--anchor-color: #0033cc;
}
Giờ đến các giá trị của chế độ dark-mode
body.dark-theme {
--text-color: #eee;
--bkg-color: #121212;
--anchor-color: #809fff;
}
Cuối cùng sử dụng các giá trị mà chúng ta vừa tạo
body {
color: var[--text-color];
background: var[--bkg-color];
}
a {
color: var[--anchor-color];
}
Chúng ta cũng có thể set tất cả các giá trị cho chế độ mặc định trong :root {} và các thuộc tính cho chế độ dark-mode trong :root.dark-mode {}.
Sử dụng Server-side script
Nếu chúng ta đang làm việc với một ngôn ngữ Serer-side, ví dụ như PHP, thì chúng ta có thể sử dụng nó thay vì JS.