【Ionic3】予定外のスキン変更機能作成に対応した
スキン変更を考慮せずに作っていたのに、スキン変更の機能を作成せざるを得なくなってしまい、どうしたものかと悩みました。
Ionicでは、色変更を行えるようSass変数が定義されていますが、アプリ起動後に動的に切り替えるものではありません。
そこで、以下のサイトを参考にしました。
Dynamic Theming Your Ionic App
/src/theme/ フォルダに色の上書き用のSCSSを設置して、ルート要素にテーマ用のクラスを付け替えるわけですね。
個人的には Ionic Components の色をSass変数で書き換える仕組みがあれば、と思ったんですが、難しそうです。
/src/theme/ で適宜 Ionic Components のスタイルを上書きするしかないですね。
とはいえ、自分で作成した部分の色変更は参考サイトの方法でなんとかなります。
スキン変更用のtheme.scssを作成
フォルダ構成
まず前提として、私の場合は以下のようにSCSSファイルを管理していました。
srcフォルダにscssフォルダを作成
/src/scss/ に自作のSass変数やMixinを配置
/src/app/app.scss に /src/scss/_variables.scss などの自作のSCSSファイルを読み込み
src
├─app
│ └─app.scss ← /src/scss/ の各種 SCSSを import
├─assets
└─pages
├─scss ← 追加
│ └─_variables.scss
│ └─_mixin.scss
│ └─その他の汎用クラス etc...
└─theme
各ページを作成するときには、各ページのSCSSで自作の変数を利用するようにしていました。
そうやって、デザイン変更があっても「_variables.scss のSass変数の値を変更すればおしまい！」という状態にしていました。 ……まぁ、スキン変更となると対応できませんでしたけどね。
theme.scssの作成
theme.scss の作成の前に、まずはスキン変更用の変数を定義する _variables2.scss（仮称）を作成します。
_variables2.scss で定義している変数は _variables.scss と全く同じにし、カラーコードのみを変更します。
// /src/scss/_variables.scss $color-primary: red; $color-danger: fuchsia; // etc...
// /src/scss/_variables2.scss // _variables.scss と同じ変数名のままカラーのみ変更 $color-primary: blue; $color-danger: navy; // etc...
今度は、スキン変更のための色を上書きする theme.scss（仮称）を作成します。
/src/theme/ フォルダに作成します。
// /src/theme/theme.scss
.theme {
// スキン変更用のSass変数
@import '../scss/_variables2.scss';
// 各コンポーネントのSCSS
@import '../components/your-component/your-component.scss';
// 各ページのSCSS
@import '../pages/your-page/your-page.scss';
// 上書きしたい Ionic Components があれば適宜上書き
ion-content {
color: #333;
// etc...
}
}
Sass変数はブロックスコープなので .theme{} の中にSass変数をインポートしておけば他に影響はありません。
_variables.scss と _variables2.scss は同じ変数名を定義しているため、.theme{} ブロック内では _variables2.scss の変数が優先されます。
そのため、各コンポーネントと各ページのSCSSでは、色を変数で指定している箇所が _variables2.scss で定義した色になります。
theme.scssをインポートする
スキン変更用の theme.scss が作成できたので、あとは読み込まれるようにするだけです。
/src/theme/variables.scss に theme.scss をインポートします。
// /src/theme/variables.scss // 省略... @import "ionic.theme.default"; @import "./theme.scss"; // ←追記 // 省略...
懸念と反省
パフォーマンスが懸念
この方法だと単純にすべてのスタイルが倍になってしまうため、描画のパフォーマンスに懸念があります。
今後「スキンを増やす！」ってなった時に、3倍、4倍のコードになったら……。
再描画の時のコストが心配になります。
CSS設計の反省
Ionic CLI からページを作成すると、各ページのSCSSは1つしか作成されないため、素直にその１つのファイルにページのスタイルを書いていました。
しかし、CSS設計をマルチクラスにしていたため、各ページのSCSSファイルを、レイアウト用と色指定用で分割しておけばよかったと思います。
そうすれば、スキン変更用の theme.scss にインポートするのは、色指定用のSCSSファイルだけにすることができたはずです。
Ionic4ならスキン変更が楽ちんだったんだけどな
Ionic3 を利用し始めたときにはSass変数が前提となっていましたが、今はIonic4がリリース済みです。
Ionic4 では CSS変数をデフォルトで利用されるようになっているため、スキンの切り替えが容易に行えます。
以下のサイトがわかりやすかったです。
