ionicカラーモード対策 (初心者はみんな引っかかるそうです)
手順を追って、カラーモード対策に挑みます。
まずsrc\app\home\home.page.html、<ion-content [fullscreen]="true">の適用範囲を見る事にします。
単純にタグにclassを付けて配色してみましたが効果なし。
まあ、調べませんがionic独自のコンポーネントなんで予想の範疇です。
技術的には"ウェブコンポーネント"と言うそうです。
ウェブコンポーネント
https://developer.mozilla.org/ja/docs/Web/Web_Components
興味深い話ではあるのですが、これに手を加えると絶対に後々大問題になる確信を持っていますので、より泥臭い方法を考えます。
・”css 全画面”で検索する
現状をおさらいします。
個々のパーツ(テキストやらラジオボタンなど)の色は変更できます。
出来ないのはその裏側!
ですので、各パーツの一番下に真っ白いカーペットを敷いてやろうという事です。
通常は、逆に全画面オーバーレイを一番上に持ってきて、一時的にユーザーの操作を無効にしたりするものですが、何でも使い方次第!
以下のような、敷物を作ります。
<div id="fullUnderlay"></div>
そして色々試しましたが、以下の条件で成功。
・<div id="fullUnderlay"></div>にz-indexはつけてはいけない。
z-index=0ならば一応問題は無いようですが・・・
・ただしラジオボタン等のionicコンポーネント(部品)は"ion-list"あるいは"ion-radio-group"がうまく行かない。
(その下のラベルやラジオボタン自身は、classつけて配色可能)
これもionic独自のコンポーネントの問題ですね。
・”ion-content 配色”で検索
出来そうな情報はあるんですがよく判らない
・”Ionic 背景色”で検索
ほぼビンゴの情報発見!
Ionic 特定のページの背景色を変更する方法(ion-contentの色)
https://qiita.com/kokogento/items/e7b33967af41a534c080
判りやすかったけど、初心者はみんな困ってるわけですね・・・
ただラジオボタングループは、すんなりいかないのです。
が、最悪普通のラジオボタンにしますので何とかなるでしょう。
(もう少しあがきます)
午後にまとめます。投稿




