I’ve been scratching my head over this - I’m sure there’s an obvious solution… But I just can’t seem to work out how to change the default background colour of an ion-toggle. From the docs, I should just be able to change --background ( --background Background of the toggle) but as seen from the attached SS this doesn’t seem to be working. Many thanks in advance!
Can you share the template? Exactly what are you wanting to change? The interior of the toggle to a color? or the row that contains the toggle? Just want to be clear.
Hi there - thanks for responding and apologies for the opaque, partial question.
Template (slightly trimmed):
<ion-content>
<ion-slides>
<ion-slide>
<p padding-left padding-right>App options relating to this event</p>
<ion-list>
<ion-item>
<ion-label>Visible to other delegates</ion-label>
<ion-toggle color="success" prevent-slider [slider]="slides" [disabled]="!connected " [(ngModel)]="prefs.visible" (ionChange)="updatePrefs(prefs)"></ion-toggle>
</ion-item>
</ion-list>
</ion-slide>
</ion-slides>
</ion-content>
Yes looking to change the interior of the toggle to a colour. It works on checked (as per the color=“success” attr) but cannot set the default.
I edited the row it sits within just for demo purposes. The reason I need to change default toggle bg is because it’s default colour (rgba(0,0,0,0.088)) doesn’t show at all within my app’s dark theme.
I used
ion-toggle {
--background: blue;
--background-checked: red;
--handle-background: green;
--handle-background-checked: yellow;
}
and got:
Thanks for that test - yes it seems ok for Android but not on iOS for me.
I’d be really grateful if you could just check yours on iOS so I can see whether it’s just me!
It is a bug, and I opened an issue about it. The non-selected toggle’s background color is not being set on iOS.