在 Ionic5 Angular 中从暗模式切换到亮模式时更改图像

Question

Hi I'm trying to switch the image when going from dark to light mode or vs versa. I've tried the following with no success;

HTML

<picture>
  <source 
    srcset="dark.png" 
    media="(prefers-color-scheme: dark)">
  <img src="light.png">
</picture>

CSS

#screenshot {
        background-image: url(settings-light.png);
      }

      @media (prefers-color-scheme: dark) {
        #screenshot {
          background-image: url(settings-dark.png);
        }
      }

I have a toggle button to switch from dark to light which is out of the box with Ionic 5 side menu.

Any help is greatly appreciated.

Answer 1

I actually was totally overcomplicating this.

Ionic provides a media query we can tap into.

Did you try this out?

https://dev.to/nodefiend/changing-dark-light-image-on-ionic-5-react-ios-app-57m5