Sử dụng CSS, khá dễ dàng để áp dụng các thay đổi nếu hệ thống đang ở chế độ tối, bằng cách sử dụngprefers-color-scheme
tính năng media.
Kiểm tra bài đăng trên blog của tôi trênchế độ tốinếu bạn muốn tìm hiểu thêm về nó.
Hôm nay tôi gặp phải một vấn đề - làm thế nào để thay đổi hình ảnh được xác định trong HTML, thay vì quy tắc CSS?
Hóa ra có một cách HTML đơn giản để làm điều đó mà không cần bất kỳ CSS hoặc JavaScript nào liên quan.
Chúng ta có thể sử dụngpicture
thẻ để bọcimg
nhãn:
<picture>
<source
srcset="dark.png"
media="(prefers-color-scheme: dark)">
<img src="light.png">
</picture>
Nếu chế độ tối được hỗ trợ và bật,dark.png
hình ảnh sẽ được sử dụng làm nguồn choimg
nhãn.
Thẻ được hỗ trợ rất tốt và các trình duyệt cũ không triển khai thẻ hoặc không triển khai chế độ tối sẽ quay trở lại hiển thịlight.png
hình ảnh.
Điều quan trọng cần lưu ý là trình duyệt không tải xuống 2 hình ảnh, trong mọi trường hợp: nếu đó là chế độ tối, trong ví dụ này, trình duyệt sẽ chỉ tải xuốngdark.png
hình ảnh và nếu đó là chế độ ánh sáng, nó sẽ chỉ tải xuốnglight.png
, vì vậy không lãng phí băng thông.
Tải xuống miễn phí của tôiSổ tay HTML
Các hướng dẫn html khác:
- Giới thiệu về HTML
- Thẻ HTML `iframe`
- Biểu mẫu HTML
- Thẻ HTML `video`
- Thẻ HTML `audio`
- Các thẻ HTML cho văn bản
- Bảng HTML
- Thẻ HTML `img`
- Thẻ HTML `a`
- Thẻ HTML `ảnh`
- Thẻ HTML `figure`
- Thẻ vùng chứa HTML
- Khả năng truy cập trên Web
- Cách tạo bình luận trong HTML
- Cách thay đổi URL hình ảnh HTML ở chế độ tối
- Hình ảnh đáp ứng bằng cách sử dụng `srcset`
- Thay đổi biểu tượng yêu thích ở chế độ tối