Theme Style Sheet (TSS)

Theme Style Sheet (TSS) files are regular USS files. UI(User Interface) Allows a user to interact with your application. Unity currently supports three UI systems. More info
See in Glossary 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 GameObjectThe fundamental object in Unity scenes, which can represent characters, props, scenery, cameras, waypoints, and more. A GameObject’s functionality is defined by the Components attached to it. More info
See in Glossary 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 ViewportThe user’s visible area of an app on their screen.
   See in Glossary 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 InspectorA Unity window that displays information about the currently selected GameObject, asset or project settings, allowing you to inspect and edit the values. More info
See in Glossary 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.

Additional resources

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