Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
September 11, 2021 10:31 am GMT

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

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  }

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

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To