動的にカラーの変更を簡単に行いたいと思ったら悪魔のささやきが・・・
ちょっと目次のタイトル一覧見てめまいがしましたね。用語の統一と言う点で。
読んでる方には勘弁して頂きたいのですが、諸作業と思考を同時に行っているため、どうしても文章の方は優先度が低くなっているようです。
カラーモードなど縁が薄かった用語や長いこと使わなかったカレントディレクトリーとかすんなり単語が出てこない時は代替語を書いて済ませてしまう人間の脳の仕組みは興味深く思えます。
閑話休題
GameBook003を新規に作ります。（まさか末尾の数字100は行かないと思いたいところ）
ここからプロジェクト名以外は頭を使わず、コマンドプロンプト操作です。
------------------------------------------------------------
0.前のプロジェクト名の末尾に"_x"を付加（削除しても良い）
コマンドプロンプトから"cd c:\MyTest"
①コマンド "ionic start GameBook003 blank --type=angular"
いい加減めんどくさくなってきたので、プロジェクト名"GameBook003"と
テンプレート"blank"を同時に指定。FreeAcount作成は"N"で構わない
②”GameBook002_コピーデータ構造”の中身をGameBook003フォルダーの中にコピー
6個のファイルが置換されると言えば正常。
③コマンド"cd c:\MyTest\GameBook003"
④コマンド"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左側のエクスプローラが表示されれば準備完了です。
実機で動かしてみたいところですが、今回はVisualStudioCodeで変更、"ionic serve"で様子を見るべき実験です。
（正直うまく行くかが判らない）
VisualStudioCodeを立ち上げ、フォルダを開くから"c:\MyTest\GameBook003"を開きます。
・・・・・
聞いたこともない技術用語を色々知りました（Saasとか）。
で、偶然、簡単に背景色変更成功しましたが、これバグの類です。
（正規の方法は簡単に手を出せないと判断しました。）
実装する気は無いですが、方法だけご紹介です。
まず、知ったばかりなのですがCSSの中で関数を定義できたりします。
（この場合は"src\app\home\home.page.scss"）
例えば、
@function set_color($val){
@return $val;
}
とか定義しておいて
.test {
color: set_color(green);
}
とかやれるわけです。
これをうまく使って"src\app\home\home.page.scss"の
--ion-background-color:colorCode(green);
とかやれないかと思いましたが、これをブラウザアプリとして"ionic serve"で試すと（少なくとも筆者のFireFoxでは）うまく行きません。
（正確にはサイコロの枠の色は変更できました）
実機でも同様です。
しかしながら、このコードを書いたとたん
"src\app\home\home.page.ts"の中で
document.body.style.backgroundColor = "#00ffff";
とかやれるようになります。
恐ろしい事に、関数定義を消しても（つまり動くはずがない場合でも）背景色変更成功です。
内部的につながりをぶち切って、無理やり新しいつながりをつないだ感じなんでしょうね。
とりあえず動的に背景色変更は当面お預けで！
投稿
