補記①背景色の変更成功
今、まとめている最中ですが、新しい知見がかなり出てきそうなので補記として追加していきます。
今まで、背景変更が難しいあるいは無理と考えていましたが、出来ました。
状況:
ゲームブックのページによって、背景色を変えたいと考えていたが、選択肢の背景の変更がうまく行かなくて断念した。
ページ全体の背景は、ページ全体の大きさを持つ"Div"の背景色を変えれば成功していたが、選択肢の背景だけが取り残されていた。
ionicコンポーネントのradioボタンを使わないという選択肢もあったが、その場合、"src\app\home\home.page.html"と"src\app\home\home.page.ts"の双方向バインディングが面倒な事になる。
解決方法:
ionicのCSS変数を使う事により解決。
ただ、これ適用範囲が今一つわからないので、色々試す必要がある。
サンプルコード
"src\app\home\home.page.html"
---------------------------------------------------------------
<ion-item id="item1">
<ion-label>R:赤(#ff0000)</ion-label>
<ion-radio slot="start" value="#ff0000"></ion-radio>
</ion-item>
---------------------------------------------------------------
"src\app\home\home.page.ts"
---------------------------------------------------------------
let el = document.getElementById('item1') as HTMLElement;
el.style.setProperty('--background', '#36454f');
---------------------------------------------------------------
'--background'は、ionic定義なので当然普通のhtml要素には効きません。
ionicのCSS変数
https://ionicframework.com/docs/ja/theming/css-variables




