This content originally appeared on DEV Community and was authored by chowderhead
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
}
This content originally appeared on DEV Community and was authored by chowderhead
Print
Share
Comment
Cite
Upload
Translate
Updates
There are no updates yet.
Click the Upload button above to add an update.
APA
MLA
chowderhead | Sciencx (2021-09-11T10:31:11+00:00) Changing (dark/light) Image on Ionic 5 react ios app. Retrieved from https://www.scien.cx/2021/09/11/changing-dark-light-image-on-ionic-5-react-ios-app/
" » Changing (dark/light) Image on Ionic 5 react ios app." chowderhead | Sciencx - Saturday September 11, 2021, https://www.scien.cx/2021/09/11/changing-dark-light-image-on-ionic-5-react-ios-app/
HARVARDchowderhead | Sciencx Saturday September 11, 2021 » Changing (dark/light) Image on Ionic 5 react ios app., viewed ,<https://www.scien.cx/2021/09/11/changing-dark-light-image-on-ionic-5-react-ios-app/>
VANCOUVERchowderhead | Sciencx - » Changing (dark/light) Image on Ionic 5 react ios app. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/09/11/changing-dark-light-image-on-ionic-5-react-ios-app/
CHICAGO" » Changing (dark/light) Image on Ionic 5 react ios app." chowderhead | Sciencx - Accessed . https://www.scien.cx/2021/09/11/changing-dark-light-image-on-ionic-5-react-ios-app/
IEEE" » Changing (dark/light) Image on Ionic 5 react ios app." chowderhead | Sciencx [Online]. Available: https://www.scien.cx/2021/09/11/changing-dark-light-image-on-ionic-5-react-ios-app/. [Accessed: ]
rf:citation » Changing (dark/light) Image on Ionic 5 react ios app | chowderhead | Sciencx | https://www.scien.cx/2021/09/11/changing-dark-light-image-on-ionic-5-react-ios-app/ |
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.