Customize Ionic Toggle

I thought I’d post this quick tip here in the forum. It’s nothing special, but allows you to modify the standard Ionic Toggles from Bubble to suit your needs. Maybe it will help someone else with their development.

Instructions:

  1. Put an html element on your page and insert the following
<style>

.ionic-toggle.toggle-dark input:checked + .ionic-track {
    background-color: #YOURBGCOLORFORCHECKED!important;
}

.ionic-toggle .ionic-track {
background-color: #YOURBGCOLORFORUNCHECKED!important;
border-color: #YOURBORDERCOLOR!important;
}

.ionic-toggle .ionic-handle {
background-color: #YOURTOGGLECOLORBG!important;
border-color: #YOURTOGGLEBORDERCOLOR!important;
}

</style>
  1. Select DARK as color option of your toggle, as this code just changes this one. Of course you could change the code a little bit and change other toggles as well.

You can of course adjust the code more, I changed the border to none as it fits better to my ui, but its up to you. I also changed the width and height a little bit, but be careful here. The ratio must be right to look good.

If anyone is interested I can also post code snippets to change checkboxes and other stuff.

Have a nice Sunday!

2 Likes

Thanks @daviddr17!

1 Like