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

#react #ionic #ios

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>
...

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;

    }
}

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
  }