prefers-color-scheme media query là gì?

prefers-color-scheme cho biết hệ điều hành đang ở chế độ sáng hay tối.

Cách triển khai đúng là khai báo token màu ở :root, rồi chỉ ghi đè token trong dark — không viết lại từng luật CSS:

:root {
  --surface: #ffffff;
  --ink: #18181b;
  --border: #e4e4e7;
}

@media (prefers-color-scheme: dark) {
  :root {
    --surface: #18181b;
    --ink: #fafafa;
    --border: #27272a;
  }
}

.card { background: var(--surface); color: var(--ink); border: 1px solid var(--border); }

Muốn người dùng tự chọn (sáng / tối / theo hệ thống) thì cần thêm một tầng nữa — theo data-theme trên <html>:

:root { /* light */ }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) { /* dark */ } }
:root[data-theme='dark'] { /* dark */ }

Ba khối này xử lý đủ ba trạng thái: chọn sáng, chọn tối, và để theo hệ thống.

Báo cho browser biết trang hỗ trợ cả hai để form control và thanh cuộn cũng đổi theo:

:root { color-scheme: light dark; }

Lưu ý: đọc theme từ localStorage trong useEffect gây nháy trắng một khung hình trước khi chuyển sang tối.

Cách xử lý là một script nhỏ chạy đồng bộ trong <head>, đặt data-theme trước khi trang vẽ lần đầu.