Ionic Element CSS

Need help Plugins
1

Is it possible to configure a custom color for the ionic toggle element?

Looking to change the color from the preset “green” to the below purple.

image
image224×528 12.1 KB

Using CSS Tools plugin? Or another way?

1 Like
2

Yes, here’s the solution :slight_smile:

image
image349×554 25.5 KB

Add this text to the page you want. This changes all ionic checkbox elements on the page (possibly the app?)

<style>
.ionic-toggle.toggle-positive input:checked + .ionic-track {
border-color: #208cb8;
background-color: #208cb8;
}
</style>

– Paul

3

I tried this with a direct copy/paste of your quoted code, no luck. Also tried it with !important:

<style>
.ionic-toggle.toggle-positive input:checked + .ionic-track {
border-color: #208cb8 !important;
background-color: #208cb8 !important;
}
</style>

Any idea why it’s not working for me? Does your code still work for you?

4

wrong class

Paste this one:

.ionic-toggle input:checked + .ionic-track { border-color: #c919cf !important; background-color: #c919cf !important; }
1 Like
5

That worked, thank you!

6

Yes, my code still works for me, but I’m glad there is another option that worked for you.