Cách thay đổi URL hình ảnh HTML ở chế độ tối

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-schemetí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ụngpicturethẻ để bọcimgnhã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.pnghình ảnh sẽ được sử dụng làm nguồn choimgnhã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.pnghì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.pnghì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ách thay đổi URL hình ảnh HTML ở chế độ tối

Các hướng dẫn html khác: