1

I'm using ToggleSwitch in controlsFX which is wonderful. I'd like to change the colour from the default sky blue to another colour. I've used css styling but it changes the background behind the ToggleSwitch. Is there a way to customise the actual switch?

Here is my ToggleSwitch:

<ToggleSwitch styleClass="purple" text="No"/>

Here is my styling:

.purple{
-fx-background-color: #57379b
}
Suemayah Eldursi
  • 969
  • 4
  • 14
  • 36

1 Answers1

5

Style the background of the thumb area of a selected ToggleSwitch:

.purple:selected .thumb-area {
    -fx-background-color: #57379b;
}
fabian
  • 80,457
  • 12
  • 86
  • 114
  • Thank you. It worked. Can I ask how did you find the answer to this so I can learn?? – Suemayah Eldursi Nov 30 '16 at 09:54
  • @user3552551 Look at the source code and find out what skin is returned from `createDefaultSkin` then go to that skin to find a selector for the appropriate child node to modify. AFAIK there unfortunately is no equivalent to the JavaFX CSS reference for controlsfx or any other kind of documentation about this... – fabian Nov 30 '16 at 10:06
  • Thanks a lot. Very useful! – Suemayah Eldursi Nov 30 '16 at 10:07