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
}
Top comments (0)