はじめに
こちらは個人開発アプリができるまで by am10 Advent Calendar 2024の 14 日目の記事です。
14 日目はダークモード対応についてです。
色調整
現状では画面の背景色などがデフォルト（systemBackground）のままなのでダークモードにある程度対応しているのですがおもしろくないのでまずは画面の背景色などを変えていきます。
このあたりを参考にとりあえず色を決めます。
【2024】おしゃれな配色パターンが見つかる！カラーパレット人気ツール30個まとめ | Web Design Trends
配色はデザインにおいて重要な要素の1つですが、慣れている人でないとバランスの取れた配色を決めていくのは簡単ではありません。 そこで、今回は初心者の方でもおしゃれな配色ができるカラーパレットツール・配色...
webdesign-trends.net
Assets Catalog に色を追加します。
画面の背景色設定
YearView, MonthView, RegisterView を下記のように修正して画面の背景色を設定します。
|
1 2 3 4 5 |
// ルートをZstackにする ZStack { // これ追加 Color.screenBackground .edgesIgnoringSafeArea(.all) |
ボタンなどの色設定
データ取得ボタンなどの色を変更するため ExpenseLogApp に下記を追加します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
init() { // segmentedスタイルのPickerの色設定 let segmentedAppearance = UISegmentedControl.appearance() segmentedAppearance.selectedSegmentTintColor = .fillButton segmentedAppearance.setTitleTextAttributes([ .foregroundColor: UIColor.textButton ], for: .normal) segmentedAppearance.setTitleTextAttributes([ .foregroundColor: UIColor.white ], for: .selected) // 年ピッカーやデータ取得ボタンの色設定 UIView.appearance().tintColor = .textButton } |
アプリ全体に影響するのであまり使いたくないのですが今回はめんどくさかったので appearance で色を設定しました。
segmented スタイルの Picker の色は選択色だけなら colorMultiply でも変えられるのですが文字色などを変えるには現状は appearance を使うしかないようです。
List の背景色
下記のように List の背景色がデフォルトのままなので背景色を設定します。
ExpenseLogApp の init に下記を追加します。
|
1 |
UITableView.appearance().backgroundColor = .screenBackground |
各 List に下記を追加すれば背景色が設定できます。
|
1 2 3 4 |
List { } // これ追加 .scrollContentBackground(.hidden) |
セーフエリア調整
LoadingView などが下記のようにセーフエリアまで伸びていないので ignoresSafeArea で調整します。
|
1 |
LoadingView(isLoading: true).ignoresSafeArea() |
ダークモード対応
あとは Assets Catalog で Dark の色を設定すれば完成です。
こんな感じです。
| Light | Dark |
|---|---|
おわりに
アプリの色を設定したらフォントもいじりたくなったので明日はカスタムフォント対応をします。
Amazon.co.jp
amzn.to
コメント