カラーテーマ、とりあえずの完了
前回は、ion-contentの色の変更に成功しましたが、ラジオボタングループについてはうまく行っていない所までです。
そして前回、かなり参考になったサイトを見て、"src\theme\variables.scss"を詳細に見ていきました。
Ionic 特定のページの背景色を変更する方法（ion-contentの色）
https://qiita.com/kokogento/items/e7b33967af41a534c080
このファイルはターゲットになるデバイスごとに設定を変えたり、rootで一括に指定したりするのに便利なのだと思います。
ラジオボタングループについても、多分うまく行ったのですが、大分ソースコードが汚れたので、現在のプロジェクトフォルダ”GameBook001"を”GameBook001_X"にして使用不可にし、新しいプロジェクト”GameBook002"を用意します。
ただ、その前に"GameBook000_コピーデータ"に"src\theme\variables.scss"を追加しておきます。
『安全と安心を求めて(手順を定める)② のはずが・・・次回はテスト後の結果を予定』参照
https://ncode.syosetu.com/n5283hn/57/
これを新規プロジェクトにコピーすれば、最新のキレイなソースに戻るフォルダとファイル
---------------------------------------------------------------
\root---"capacitor.config.ts"
"tsconfig.json"
\root\src\app\MyData---"Page.json"
\root\src\app\home\MyWork---"tool.ts"
\root\src\app\home\---"home.page.html"
"home.page.scss"
"home.page.ts"
\root\src\assets\---"cube1.gif", "cube2.gif", "cube3.gif",
"cube4.gif", "cube5.gif", "cube6.gif",
\root\src\theme\---"variables.scss"
---------------------------------------------------------------
新規プロジェクトにコピーしようとして6個のファイルが置換されると言えば正常。
新規プロジェクト作成手順
------------------------------------------------------------
0.前のプロジェクト名の末尾に"_x"を付加（削除しても良い）
コマンドプロンプトから"cd c:\MyTest"
①コマンド "ionic start GameBook002 blank --type=angular"
いい加減めんどくさくなってきたので、プロジェクト名"GameBook002"と
テンプレート"blank"を同時に指定。FreeAcount作成は"N"で構わない
②上のフォルダー構造の中身をGameBook002フォルダーの中にコピー
6個のファイルが置換されると言えば正常。
③コマンド"cd c:\MyTest\GameBook002"
④コマンド"ionic build --prod" ←ionicでのビルド
⑤"npm install @capacitor/android@latest" ←初回のみ（capacitor最新版）
⑥"ionic cap add android" ←初回のみ（Androidフォルダ等を作る）
⑦"npx cap sync android" ←一応流しておく（ソースコード変更後は必ず流す）
⑧"ionic cap open android" ←AndroidStudioを開く
------------------------------------------------------------
実機につないでAndroidStudioから実行
この部分は、常に最新情報を見た方が良いと思います。
『実機テストは予想外に簡単』参照してください。
https://ncode.syosetu.com/n5283hn/33/
ダークモードで起動しました。
ダークモードの修正をします。
参考サイトは、以下の通り
Ionic 特定のページの背景色を変更する方法（ion-contentの色）
https://qiita.com/kokogento/items/e7b33967af41a534c080
"src\theme\variables.scss"と"\src\app\home.page.scss"の修正をします。
実機のアプリだけ終了させてください（AndroidStudioおよび接続はそのまま維持）
VisualStudioCodeを起動します。
フォルダを開くで"c:\MyTest\GameBook002"を選んでください。
"src\app\home\home.page.scss"を開きます。
最終行に、以下のコードを追加
/** Boku no Simobe **/
ion-content{
--ion-background-color:#ffffff;
}
/** Boku no Simobe **/
/** Boku no Simobe **/は私の追加を表すコメントです。
ctrl+Sなどで保存してください。
コマンドプロンプトに戻り、以下の2つのコマンドを走らせます。
"ionic build --prod"
"npx cap sync android"
AndroidStudioに戻り、実行。
背景の白さを確認。
ただし、この段階ですと以下の問題を抱えています。
1．テキストも白いので視認できない
2．ラジオボタンのアイテムは背景が黒のまま
実機のアプリを終了。
"src\app\home\home.page.scss"の先ほどの追加修正を以下のように変更
（色はお好みで変えてください）
/** Boku no Simobe **/
ion-content{
--ion-background-color:#c7c6c9;
--ion-text-color: #121512;
--ion-item-background: #c7c6c9;
}
/** Boku no Simobe **/
ctrl+Sなどで保存してください。
コマンドプロンプトに戻り、以下の2つのコマンドを走らせます。
"ionic build --prod"
"npx cap sync android"
AndroidStudioに戻り、実行。
背景および文字色とラジオボタンアイテムの背景色を確認。
選択肢の下に、アンダーラインが表示されますが、これはこれで有り？
（直せそうな気もしますが、後回しにします）
目的達成です。
※"\root\src\theme\variables.scss"は複数の画面を制御するなら必要かもしれませんが、今回のゲームブックならば、"src\app\home\home.page.scss"の変更だけで事足りました。一応、コピーデータ構造に入れておきますが使わない可能性が高いです。
次はページごとにカラーテーマを動的にいじれるかですが、とりあえずこれまで。
置き換え用フォルダセット”GameBook002_コピーデータ構造”に保存して、次は新規プロジェクト"GameBook003"へと移ります。
投稿
