feat: add CSS variables or shadow part for customizing toggle on/off label color

[brandyscarney]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already include this feature request, without success.

Describe the Feature Request

The toggle component in ios currently has no way to style the on/off label colors except for by customizing --ion-color-dark or --ion-color-contrast. See the following code:

ionic-framework/core/src/components/toggle/toggle.ios.scss

Line 90 in 597bec7

color: var(--ion-color-dark);

ionic-framework/core/src/components/toggle/toggle.ios.scss

Line 108 in 597bec7

color: var(--ion-color-contrast, $toggle-ios-on-off-label-checked-color);

I think we should avoid having users customize the Ionic colors on a per-component basis.

Describe the Use Case

If you customize the toggle by using the following:

<ion-toggle enable-on-off-labels="true"></ion-toggle>
<ion-toggle enable-on-off-labels="true" checked="true"></ion-toggle>

ion-toggle {
  --background: #000;
  --background-checked: #f3e895;

  --handle-background: #f3e895;
  --handle-background-checked: #000;
}

You are not able to see the on/off labels in light mode. Here is a demo: https://stackblitz.com/edit/suseoe-jzo3g2?file=index.html

Describe Preferred Solution

I believe we should either add CSS variables for the color & color-checked state or we should expose it as a shadow part which would also allow users to customize the size of the labels. As it is right now they can't change the width or height either.

Describe Alternatives

No response

Related Code

https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/toggle/toggle.ios.scss#L58-L118

Additional Information

No response