CSSMedia query prefers-color-scheme cho phép phát hiện người dùng đang sử dụng chế độ dark hay light mode trên hệ điều hành, từ đó áp dụng styles phù hợp.
Ví dụ: @media (prefers-color-scheme: dark) { body { background: #1a1a1a; color: #eee; } }. Cách triển khai phổ biến nhất là kết hợp với CSS custom properties: khai báo biến màu ở :root cho light mode (base styles), rồi override trong media query dark để đổi bảng màu. Ngoài ra có thể dùng class-based toggle (thêm class .dark vào <html>) để cho phép user tự chọn theme và lưu preference vào localStorage.
It detects whether the user has their OS set to dark or light mode, allowing you to apply appropriate styles.
Example: @media (prefers-color-scheme: dark) { body { background: #1a1a1a; color: #eee; } }. The most common approach combines it with CSS custom properties: declare color variables in :root for light mode, then override them in the media query for dark mode. Alternatively, use a class-based toggle (adding a .dark class to <html>) so users can manually choose a theme and save their preference in localStorage.