Thay đổi biểu tượng yêu thích ở chế độ tối

Cách hiển thị một biểu tượng yêu thích khác ở chế độ tối hoặc sáng

Tôi đã thiết lập máy Mac của mình để tự động chuyển đổi giữa chế độ tối và sáng.

Tôi bắt đầu xây dựng một trang web mới khi một lúc nào đó tôi nhận ra rằng tôi đã đặt một hình ảnh màu trắng làm biểu tượng yêu thích và ở chế độ ánh sáng, nó gần như vô hình!

Vì vậy, tôi bắt đầu tìm hiểu các cách có thể để thêm biểu tượng yêu thích ở chế độ tối và một biểu tượng khác ở chế độ sáng.

Hóa ra là chưa (chưa) có cách nào để làm như vậy đối với hình ảnh bitmap PNG / JPG, nhưng chúng ta có thể sử dụngSVGhình ảnh vector lừa cho điều này.

Chúng tôi có thể nhúng CSS vào một hình ảnh SVG.

Nếu hình ảnh đủ đơn giản để chúng ta có thể xác định một màu và thay đổi nó ở chế độ tối, chúng ta có thể có một màu khác cho 2 chế độ.

Tôi đã sử dụng thủ thuật này trênhttps://prototyped.dev(bạn có thể kiểm tra biểu tượng thay đổi như thế nào).

Đây là SVG tôi đã sử dụng làm biểu tượng yêu thích:

<svg width="37" height="45" viewBox="0 0 37 45" fill="none" xmlns="http://www.w3.org/2000/svg">
  <style>
    path {
      fill: #ccc;
    }
    @media (prefers-color-scheme: dark) {
      path {
          fill: #fff;
      }
    }
  </style>
  <path fill-rule="evenodd" clip-rule="evenodd" d="M31.8831 2.04389C25.2462 2.72205 20 11.1737 20 21.5C20 32.2696 25.7062 41 32.7451 41C33.9877 41 35.2047 40.7279 36.3664 40.2206C32.5452 43.2149 27.7311 45 22.5 45C10.0736 45 0 34.9264 0 22.5C0 10.0736 10.0736 0 22.5 0C25.849 0 29.0271 0.731675 31.8831 2.04389Z" />
</svg>

Hình ảnh SVG rất đơn giản, đó là hình nửa vầng trăng tôi đã thiết kế trong Figma và xuất ra dưới dạng SVG.

Sau đó, tôi tô màu đường dẫn với#cccmàu ở chế độ ánh sáng và#fffở chế độ tối.

Tôi đã lưu nó như một.svgvà sau đó sử dụng nó làmfavicon trong Gatsby.

Tải xuống miễn phí của tôiSổ tay HTML


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