September 11, 2021 10:31 am GMT
Original Link: https://dev.to/nodefiend/changing-dark-light-image-on-ionic-5-react-ios-app-57m5
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:
Tweet
View Full Article
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To