Mục lục
1. Cách hoạt động
Trình duyệt hiện đại đều hỗ trợ @media (prefers-color-scheme: dark), tức là sẽ tự áp dụng CSS nếu người dùng bật dark mode trong hệ điều hành hoặc trình duyệt.
2. Cấu trúc CSS cơ bản
/* Style mặc định (light mode) */
body {
background: #fff;
color: #111;
}
/* Dark mode tự động */
@media (prefers-color-scheme: dark) {
body {
background: #111;
color: #eee;
}
a {
color: #80c0ff;
}
header, footer {
border-color: #333;
}
}
3. Những gì nên đổi trong Dark Mode
- Background: nền tối (#111, #222, #1a1a1a…)
- Text: màu sáng nhẹ (#eee, #ccc)
- Link: dùng màu tươi hơn nhưng không quá chói
- Border, shadow, icon… nên giảm sáng/contrast
4. Mẹo mở rộng (optional)
Nếu bạn muốn cho người dùng tự chọn dark/light, thì có thể dùng class:
<body class="dark">body.dark {
background: #111;
color: #eee;
}
/* ...v.v... */Rồi lưu chọn lựa vào localStorage bằng JavaScript nhỏ gọn nếu cần (phần này sẽ viết riêng nếu bro yêu cầu). Tuy nhiên, nếu chỉ dùng `prefers-color-scheme` thì hoàn toàn không cần JS – đủ cho blog cá nhân.
5. Cách kiểm tra Dark Mode
- Dùng DevTools → tab Rendering → override “prefers-color-scheme”
- Hoặc bật Dark Mode trong OS hoặc trình duyệt (Chrome, Firefox…)
Dark Mode không cần framework – không cần JS. Chỉ với vài dòng CSS, bạn đã có một giao diện linh hoạt hơn, hiện đại hơn, và thân thiện với người đọc hơn – đặc biệt là những người hay đọc blog vào ban đêm như chính bạn vậy 😎
Chúc bạn thêm Dark Mode thành công, sạch, gọn, đúng chất blog tĩnh!
Bình luận