テーマスタイルシート (TSS)

テーマスタイルシート (Theme Style Sheet、TSS) ファイルは通常の USS ファイルです。UI Toolkit は TSS を別のアセットタイプとして扱い、管理の目的で使用します。

TSS ファイルには通常の USS 構文と形式が適用されますが、通常、テーマファイルには @import 規則を通じて他の USS ファイルへの参照が含まれます。

ノート: USS ファイルは @import 規則もサポートしています。

TSS の作成

You can create different TSS files for different themes and switch between them at runtime. Typically, you should use USS for styles. Consider TSS when you customize the look and feel for different platforms or devices, or when you use different fonts for different languages if your games or applications support multiple languages.

Note: When you add your first UIDocument to a GameObject in your project, it generates a default runtime theme asset at Assets/UI Toolkit/UnityThemes/UnityDefaultTheme.tss. Although you can create a TSS from scratch, to get all the default UI controls to work, you must import the default runtime theme, and then overwrite or add new styles to create your custom theme.

新しい TSS の作成は、以下のように行います。

1. Create one or more USS files with your custom styles.

2. 以下のいずれかを行ってください。

   • Select Assets > Create > UI Toolkit > TSS Theme File to create an empty theme file and import the default theme.
   • Select Assets > Create > UI Toolkit > Default Runtime Theme File to create a copy of the default runtime theme file. You can rename the file if you want.

3. Import your style USS files to your theme.

Preview a TSS

Your custom theme also appears in the theme list of the Viewport in UI Builder. To preview your theme, select it from the Viewport.

TSS を適用する

USS と同じように、UXML で TSS を参照する または C# で TSS を参照する ことができます。

Panel Setting アセットのデフォルトテーマとして TSS を設定することもできます。複数のパネル設定がある場合、それぞれ異なる TSS ファイルを使用できます。

Note: If you set a TSS for a Panel Setting asset, it doesn’t make the TSS a global style for the whole project. You still need to reference the TSS in UXML or C#.

Import a theme

You can use the TSS asset’s Inspector window or the @import rule to import a theme.

Note: If you define the USS variables or styles in both the current TSS and the imported style sheet, the current TSS overrides the imported style sheet.

Import a theme with the Inspector window

1. TSS アセットを選択します。
2. Inspector ウィンドウ > Inherited Themes の順に移動します。
3. + を選択します。これで新しい参照フィールドが追加されます。
4. Select the list icon in the reference field. A dropdown list displays with all the style sheets in your project.
5. 使用するスタイルシートを選択します。
6. Applyl を選択します。

Import the default theme with the @import rule

To import the default Unity runtime theme, you must use the following syntax:

@import url("unity-theme://default");

Note: This URL in this syntax is a special case and it refers the built-in default theme inside the engine. You can’t use this syntax for any other themes.

Import other themes with the @import rule

To import a theme other than the default theme, or a USS file, use the following syntax:

@import url("<path-to-file>/<file-name-with-extension>");

You can use a relative or an absolute path:

• Absolute paths start from the project’s Assets folder and begin with a / or project://database/. For example, /Assets/myFolder/myFile.uss or project://database/Assets/myFolder/myFile.uss.
• Relative paths start from the current file and exclude the /. For example, ../myFolder/myFile.uss.

Note: To reference a file from packages, use the absolute path of the package file that starts from the Packages folder. For example, /Packages/com.unity.package.name/file-name.uss or project://database/Packages/com.unity.package.name/file-name.uss. you must use the format of com.unity.package.name rather than package name for the package name.

その他の参考資料

• USS について
• C# によるスタイルの適用
• UXML にスタイルを加える