カラーテーマが判らない
変更するにしたがって、AndroidStudioの諸動作が遅くなりますが、これは仕方ないですね。
(機能的には、まあ完成)
もう一つ別な問題発生したので、そちらの記述です。
ionicDocによれば
『テーマの基本』
---------------------------------------------------------------
Ionic Frameworkは、さまざまなプラットフォームの標準デザインに準拠しながら、白紙の状態からブランディングに合わせて簡単にカスタマイズおよび変更できるように構築されています。IonicアプリのThemingは今まで以上に簡単です。フレームワークはCSSで構築されているため、事前に用意されているデフォルトスタイルは簡単に変更や修正をすることができます。
---------------------------------------------------------------
との事ですが、何がきっかけか不明ですが、実機でのテストがダークモード表示に突然なりました。
CSSには苦手意識があったのでありがたい気もしますが、現時点での問題はどこをいじればいいの？につきます。
まずアンドロイド版でないブラウザ版のアプリ表示のソースから怪しい記述を言発見です。
(右クリックでソースコード表示)
---------------------------------------------------------------
<meta name="color-scheme" content="light dark"/>
---------------------------------------------------------------
十中八九これが怪しい。
その辺りをionicと絡めて、探すと
ionicDocに『プラットフォームの外観』と言うページ発見
以下引用
---------------------------------------------------------------
Ionic Modes
Ionicは modes を使ってコンポーネントの外観をカスタマイズします。それぞれの プラットフォーム はデフォルトの mode を持っていますが、これはグローバルの config で上書き設定をすることができます。次の表は、それぞれの プラットフォーム に追加されているデフォルトの mode を示しています。
---------------------------------------------------------------
"config"を探している途中に、"src\assets\icon\favicon.png"も変更しないといけない事に気づきましたが、後回し。
恐らくこれだろうと言うのが"src\theme\variables.scss"
ご丁寧に、前述の『テーマの基本』へのリンクがソースコメントにありました。
とりあえず
79行目の
@media (prefers-color-scheme: dark) {
"dark"を"light"に変更します。
すると"ionic serve"で起動しているブラウザ版アプリが真っ黒に！
結果は良くないですが、なんとなくわかってきました。
(すぐに元に戻しました)
今度は、VisualStudioCodeで初めて使う機能、『フォルダを指定して検索』で"dark"を探すと、見つけました。
C:\MyTest\GameBook\src\index.html
---------------------------------------------------------------
前略
<meta name="color-scheme" content="light dark" />
後略
---------------------------------------------------------------
ここを
------------------------------------------
content="light light"
------------------------------------------
に変更して、再び実機のデザインを見て見ます。
・"ionic build --prod" でアプリ用にビルド
・"npx cap sync android" でAndroidStudio側に変更反映
・"ionic cap open android" でAndroidStudioを立ち上げる
せっかくなので"ionic cap open android" から実機で動くまでの時間計測します。
スタート ：9時52分
エクスプローラ表示：9時56分
実機起動 ：10時00分
あいにく色は真っ黒のままでしたが、経過時間が判っただけで良しとします。
ソースは何故か
------------------------------------------
<meta name="color-scheme" content="light dark"/>
------------------------------------------
のまま。
引き続き、変更方法を探します。
関係のありそうなionicDocは以下のあたりだと思うのですが煮詰まってきたので休憩と投稿です。
https://ionicframework.com/docs/ja/theming/css-variables#ionic-variables
https://ionicframework.com/docs/ja/theming/platform-styles
