【Unity】【UI Toolkit】TSSファイルで「テーマ」ごとにスタイルを設定・変更する

Unity UIToolKit

UnityのUI ToolkitのTSSファイルで「テーマ」ごとにスタイルを設定・変更する方法についてまとめました。

Unity2022.2.19

TSSファイルとは？

Unityエディタのダークテーマとライトテーマのように、テーマごとにスタイルを変えたいことがあります。
またプラットフォームやデバイスごとにスタイルを変えたり、もしくは言語ごとに異なるフォントを使用したいといったケースも考えられます。

このようなケースに対応するためのファイル形式がTSS（Theme Style Sheet）です。

本記事ではこのTSSを作ってラインタイム用のテーマを適用する方法についてまとめます。

継承元のTSSを作る

全てのスタイルを自身でイチから設定するのは大変なので、TSSは基本的に他のTSSを継承する形で作成します。

ランタイム用のテーマを作る際には、UnityDefaultRuntimeThemeを継承します。
UnityDefaultRuntimeTheme.tssファイルはランタイムのUIを作る過程で自動的に生成されるものですが、プロジェクト内に存在しない場合にはCreate > UI Toolkit > Default Runtime Theme Fileから新規作成できます。
この辺りの詳細は以下の記事にもまとめていますので、必要に応じて参照してください。

light11.hatenadiary.com

TSSファイルを作る

次に、UnityDefaultRuntimeThemeを継承したTSSを作成します。 TSSファイルはCreate > UI Toolkit > TSS Theme Fileから作成します。

作成したらこのTSSファイルのInspectorから、Inherited Themesに前節のUnityDefaultRuntimeTheme.tssを追加してApplyします。

TSS Import Settings

するとTSSファイルに以下が書き込まれて、UnityDefaultRuntimeTheme.tssを継承できていることがわかります。

@import url("/Assets/UI Toolkit/UnityThemes/UnityDefaultRuntimeTheme.tss");

Inspectorからではなく直接上記のように記述してもOKです。

独自のスタイルを定義したUSSを作ってTSSにインポート

次に、適用したいスタイルを定義したUSSを作成します。
今回は以下のように適当にLabelのスタイルを変更したUSSを作成しました。

Label {
    background-color: antiquewhite;
    color: black;
    -unity-font-style: bold;
    -unity-text-align: middle-center;
}

USSを作成したら、前節のTSSファイルのInspectorのStyle Sheetsにこれを追加してApplyします。

USSを追加

これで、TSSファイルの中身が以下のように変更され、USSがインポートされました。

@import url("/Assets/UI Toolkit/UnityThemes/UnityDefaultRuntimeTheme.tss");

@import url("example_style.uss");

UIBuilderで確認する

それでは次に作成したテーマをUI Builderで確認します。

Create > UI Toolkit > UI Documentから新しくUXMLファイルを作成し、ダブルクリックしてUI Builderを開きます。
今回はLabelのスタイルを独自定義したので、Labelを一つだけ配置しておきます。

UXMLを作成

次に、テーマを先ほど作ったものに変えます。
テーマは下図のようにViewportセクションのツールバーから変更できます。

テーマを変更

自身で作成したTSSのファイル名を選択すると、そのテーマが適用されます。
今回の適用結果は下図の通りです。

適用結果

Labelにテーマが適用されていることを確認できました。

適用する

それでは最後にこのテーマをランタイムのUIの適用してみます。

ランタイムのUIを表示するために、GameObjectにUI Documentをアタッチして、PanelSettingsアセットをアサインします。
この辺りのフローは以下の記事にまとめていますので、必要に応じて参照してください。

light11.hatenadiary.com

Panel SettingsのInspectorにはTheme Style Sheetが設定できるので、これに本記事で作成したTSSファイルをアサインします。

TSSをアサイン

あとはUI DocumentのSource Assetに前節のUXMLファイルをアサインすることで、シーン上にテーマが適用されたUIを表示することができます。

テーマが適用された

スクリプトからもテーマを変えることができます。

using UnityEngine;
using UnityEngine.UIElements;

public class Example : MonoBehaviour
{
    public UIDocument document;
    public ThemeStyleSheet themeStyleSheet1;
    public ThemeStyleSheet themeStyleSheet2;

    private void Update()
    {
        if (Input.GetKeyDown(KeyCode.Alpha1))
            document.panelSettings.themeStyleSheet = themeStyleSheet1;

        if (Input.GetKeyDown(KeyCode.Alpha2))
            document.panelSettings.themeStyleSheet = themeStyleSheet2;
    }
}

関連

light11.hatenadiary.com

参考

docs.unity3d.com