从白色主题切换为深色主题时，如何更改图像

Question

我正试图在我的投资组合网站中添加一个深色主题。我已经可以使用主题了，但是我不知道如何更改原始图像（我的资产目录中设置了用于深色主题的图像）。切换主题时，我使用css变量更改了颜色，但一切正常，但是切换至深色主题时，无法更改原始图像。谁能帮我？

谢谢

Answer 1

您可以尝试这样。

如果Image在HTML文件或CSS文件中，则每次更改主题时，请在您的正文中添加一个类。例如对于浅色主题，请在正文中添加class="light-theme"，对于深色主题，请在正文中添加class="dark-theme"。

HTML

<img src="dark-image.jpg" class="dark-img" />
<img src="light-image.jpg" class="light-img" />

Css-

.dark-theme {
  .dark-img {
    display: block;
  }

  .light-img {
    display: none;
  }
}


.light-theme {
  .dark-img {
    display: none;
  }

  .light-img {
    display: block;
  }
}

如果您有任何疑问，请告诉我。