ionic-team / ionic-team/ionic-framework
feat: add CSS variables or shadow part for customizing toggle on/off label color
- Langage dominant
- TypeScript
- Étoiles
- 52.7k
- Forks
- 13.3k
- Merge moyen
- 1 j 14 h
- PR mergées (30 j)
- 50
Description
### Prerequisites
- [X] I have read the [Contributing Guidelines](https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#creating-an-issue).
- [X] I agree to follow the [Code of Conduct](https://ionicframework.com/code-of-conduct).
- [X] I have searched for [existing issues](https://github.com/ionic-team/ionic-framework/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:
https://github.com/ionic-team/ionic-framework/blob/597bec753412758516e69725a89f57970fbb6f6e/core/src/components/toggle/toggle.ios.scss#L90
https://github.com/ionic-team/ionic-framework/blob/597bec753412758516e69725a89f57970fbb6f6e/core/src/components/toggle/toggle.ios.scss#L108
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:
```html
```
```css
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_
Guide de contribution
Ouvrir le guide de contribution
Piste de recherche
Commencez par core/src/components/toggle/toggle.ios.scss, en particulier les lignes référencées et la plage plus large autour des lignes 58-118. Examinez comment le toggle iOS rend ses libellés activé/désactivé et déterminez si des variables CSS ou une shadow part permettent au mieux d’exposer leur couleur et leurs dimensions. C’est terminé lorsque les utilisateurs peuvent personnaliser la couleur et les dimensions des libellés sans remplacer les couleurs globales d’Ionic.
Rédigé par le modèle d'indexation à partir du texte de l'issue.
Évaluation
- Stack technique
- css, typescript
- Domaine
- frontend
- Type d'issue
- Fonctionnalité
- Difficulté
- 4/5
- Temps estimé
- 3-5 jours
- Activité
- À l'abandon
- Clarté
- Plutôt claire
- Accessibilité débutants
- 35/100