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)