【SwiftUI】ダークモードを取得し色を切り替える方法について解説！

2025年1月22日

ほりうち

こんにちは！Shoriと申します。この記事では、Swift 5.10およびXcode 15.4を使用して、SwiftUIでアプリの外観の変更（ライト／ダーク）に対応する方法について、サンプルコードを交えながら説明しております。

初心者の方でも分かりやすいように、サンプルコードに適宜説明を入れながら解説していくので、ぜひご覧ください。

この記事を読んで分かること…
・colorSchemeを用いて現在の外観モードがライトorダークモードのどちらなのか判定する方法
・外観によってTextの色を変更する方法

実行環境

・実行環境：SwiftUI+XCode
・Swift：5.10
・XCode：15.4
・サンプルコードの実行確認日：2024年12月30日（月）

※ 今回紹介するcolorSchemeは、iOS13.0+, macOS10.15+以上で動作しますので、それ未満の場合はOSのアップデートが必要な場合があります。

colorSchemeとは？

var colorScheme: ColorScheme { get set }

colorSchemeは現環境におけるカラースキームです。

サンプルコード

import SwiftUI

struct BlogView: View {
    @Environment(\.colorScheme) var colorScheme: ColorScheme
    
    var body: some View {
        Text("DarkMode Text")
            .font(.largeTitle)
            .bold()
            .foregroundStyle(.black)
    }
}

#Preview {
    BlogView()
}

サンプルコードの説明

◾️行 1: SwiftUIをインポートしています。
◾️行 2: Viewを継承したBlogViewという構造体を定義しています。
◾️行 3: ユーザーがダークモードをONにしているかについて、こちらの環境変数を読み取ることで判定することが可能です。
◾️行 4: BlogViewのなかで使うデザインをbodyブラケットの中で定義していきます。
◾️行 5: Textを宣言します。今回はこのTextに、ダークモードがONにされているかによって色を変更する処理を行いたいと思います。
◾️行 6: .font(.largeTitle) Appleがフォントのカスタムサイズを、プリセットとしていくつか用意しているので、今回はその中から.largeTitleを使いたいと思います。フォントがとても大きくなります。
◾️行 7: bold()を指定することで、Textが太字になります。
◾️行 8: .foregroundStyle(.black)を指定することで、Textがデフォルトで黒色になります。

#PreView
・ここでBlogViewを初期化してあげることで、XCodeの右部分にリアルタイムプレビューを表示させることが可能となります。

ダークモードに対応しよう

今回は、先ほどのコードで指定したTextの色をダークモードがONにされているかを検知してから変更してみましょう。

概要

colorScheme == .light ? .black : .gray

三項演算子を用いて、現在ライトモードなら文字の色を黒色に、ダークモードなら文字の色が白色になるように指定します。
colorSchemeは、.lightでライトモード、.darkでダークモードかどうか判定することが出来ます。

サンプルコード

import SwiftUI

struct BlogView: View {
    @Environment(\.colorScheme) var colorScheme: ColorScheme
    
    var body: some View {
        Text("DarkMode Text")
            .font(.largeTitle)
            .bold()
            .foregroundStyle(colorScheme == .light ? .black : .gray) //ここを書き換える
    }
}

#Preview {
    BlogView()
}

それでは、先ほどのコードに三項演算子を入れてみましょう。
.foregroundStyleの()の中身を書き換えるだけで、特に難しいことは何もありません。

canvasでアプリの外観モードを切り替える

アプリの外観モードを切り替える方法について簡単に解説します。

１）canvasの下の方にある、「トグルスイッチ」のアイコンをクリックします。（下の四角）

２）すると、Canvas Device Settingsというメニューが表示されます。

３）一番上のColor Schemeというところがオフになっているので、トグルスイッチを押して有効にします。（右上の四角）

４）この中のColor SchemeのLight AppearanceとDark Appearanceを切り替えることで、アプリの外観モードを変えることが可能となります。