DoozyUIでダークモードを用意する

Unity の有料アセット DoozyUI をつかって、ダークモードに切り替える方法を紹介します。

Doozy UIにはテーマ機能があり、カラーやフォントやアイコンなどを簡単に切り替えることができます。今回は、このテーマ機能を使って、ライトモードとダークモードを切り替える方法を紹介します。

以下のように、チェックボックスのOn/Offでダークモードに切り替えます。

ダークモードに切り替える

テーマを用意する

Doozy UIでテーマを簡単に設定することができます。

テーマごとに、アイコン・フォント・カラーなどを設定することができます。

今回は、以下のように Light と Dark というテーマを用意します。ForegroundとBackgroundカラーを定義して、そのカラーを指定します。

Light と Dark テーマを用意

テーマをオブジェクトに指定する

Text や Image に対してテーマを指定します。こうすることで、テーマを切り替えると自動でカラーが切り替わるようになります。

まず、背景(UIView)のImageに対して、Color Target Image コンポーネントを追加します。そのコンポーネントに対して、テーマのBackgroundを指定します。

UIViewにColor Target Imageコンポーネントを追加

同様に、テキストに対してもテーマを指定します。

TextMeshProに対しては、Color Target TextMeshPro コンポーネントを追加します。テキストには、Foreground を指定します。

TextMeshPro にテーマを設定する

テーマを切り替える

チェックボックスのOn/Offでテーマを切り替えるようにします。

UIToggle を追加して、OnClick の Toggle ON で「ChangeThemeDark」のGameEventを設定します。

UIToggle の OnClick でGameEventを送る

同様に Toggle OFF に「ChangeThemeLight」のGameEventを指定します。

Toggle OFF に ChangeThemeLight を指定する

次に、GameEventを受け取って、テーマを切り替えます。テーマの切り替えは、Nodyで行います。

GameEventを受け取るための Portal Node と、テーマを切り替えるための Theme Nodeを追加します。

Portal Node は、GlobalListener に GameEvent を指定します。
Theme Node は、切り替えるThemeを指定します。

Nody で Themeを切り替える

これで、完成です。

実行すると、トグルボタンで以下のようにダークモードとライトモードを切り替えることができます。

実行結果

まとめ

Doozy UIのTheme機能を使って、ダークモードに切り替える方法を紹介しました。

今回はカラーだけの切り替えを行いましたが、同様にフォントやアイコンなども切り替えることができます。