DEV Community

Cover image for Changing (dark/light) Image on Ionic 5 react ios app
chowderhead
chowderhead

Posted on

3

Changing (dark/light) Image on Ionic 5 react ios app

Teh struggle is real...

After million times googling for this, I realized the solution was actually alot simpler then i was making it.

My Stack:
Ionic
react
capacitor
xcode simulator

Component:

...
<IonRow>
   <IonCol>
     <div id="main-block-farm-round-logo"  />
   </IonCol>
</IonRow>
...

Enter fullscreen mode Exit fullscreen mode

Css Stylesheet (for Component)

@media (prefers-color-scheme: dark) {
  body {
    #main-block-farm-round-logo {
      background-image: url("textlogo-dark.png");
      background-repeat: no-repeat, repeat;
      background-position: center; 
      background-repeat: no-repeat; 
      background-size: cover;

    }
}

@media (prefers-color-scheme: light) {
  body {
    #main-block-farm-round-logo {
      background-image: url("textlogo-light.png");
      background-repeat: no-repeat, repeat;
      background-position: center; 
      background-repeat: no-repeat; 
      background-size: cover;

    }
}

Enter fullscreen mode Exit fullscreen mode

Another way...

I guess I already did this programattically in a react component and forgot i did it hahaha:

let systemDark = window.matchMedia("(prefers-color-scheme: dark)");

  if (systemDark.matches) {
    particlesConfig = particlesConfigDark
  } else {
    particlesConfig = particlesConfigLight
  }
Enter fullscreen mode Exit fullscreen mode

Sentry blog image

The countdown to March 31 is on.

Make the switch from app center suck less with Sentry.

Read more

Top comments (0)

AWS Security LIVE!

Join us for AWS Security LIVE!

Discover the future of cloud security. Tune in live for trends, tips, and solutions from AWS and AWS Partners.

Learn More

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay