Theme Style Sheet (TSS)

Theme Style Sheet (TSS) files are regular USS files. UI Toolkit treats TSS as a distinct asset type and uses it for management purposes.

Regular USS syntax and format apply to TSS files, but usually, a theme file contains references to other USS files through the @import rule.

Note: USS files also support the @import rule.

Create a TSS

You can create different TSS files for different themes and switch between them at runtime. You can use TSS to customize the look and feel for different platforms or devices. You can also create TSS to use different fonts for different languages if your games or applications support multiple languages.

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. You can inherit from it, and overwrite or add new styles to create your custom theme.

To create a new TSS:

1. Select Assets > Create > UI Toolkit > TSS Theme File.
2. Inherit from a default theme if you want.
3. Create a USS with custom styles and import the style to your theme.
4. Your custom theme also appears in the theme list of the Viewport in UI Builder. To preview your theme, select it from the Viewport.

Apply a TSS

You can reference a TSS in UXML or C# the same way as you do with USS.

You can also set a TSS as the default theme for a Panel Setting asset. If you have more than one Panel Setting, each one can use a different TSS file.

Inherit a theme

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

The syntax for the @import rule is:

@import url("<path-to-file>/fileName.tss");

To inherit a theme in the Inspector window:

1. Select the TSS asset.
2. Go to the Inspector window > Inherited Themes.
3. Select +. This adds a new reference field.
4. Select the list icon in the reference field. A dropdown list appears with all the themes in your project.
5. Select the theme to inherit from.

Import a style sheet

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

The syntax for the @import rule is:

@import url("<path-to-file>/fileName.uss");

To import a style sheet in the Inspector window:

1. Select the TSS asset.
2. Go to the Inspector window > Inherited Themes.
3. Select +. This adds a new reference field.
4. Select the list icon in the reference field. A dropdown list appears with all the style sheets in your project.
5. Select the style sheet to use.
6. Select Apply.

その他の参考資料

• Introduction to USS
• Apply styles with C#
• Add styles to UXML