ionic-team / ionic-team/ionic-framework

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

オープン
#26,021 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る
package: core type: feature request
主要言語
TypeScript
スター
52.7k
フォーク
13.3k
平均マージ
1日 15時間
マージ済み PR(30日)
51

説明

### 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_

コントリビューションガイド

コントリビューションガイドを開く

調査の方向性

Start with core/src/components/toggle/toggle.ios.scss, especially the referenced lines and the broader range around lines 58-118. Review how the iOS toggle renders its on/off labels and determine whether CSS variables or a shadow part best exposes their color and sizing. Done means users can customize label color and dimensions without overriding global Ionic colors.

索引モデルが issue の本文から書いたものです。

評価

技術スタック
css, typescript
領域
frontend
issue の種類
機能追加
難易度
4/5
見積もり時間
3〜5日
活発さ
停滞
明瞭さ
おおむね明確
初心者へのやさしさ
35/100

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。