TSS(테마 스타일시트)

TSS(테마 스타일시트) 파일은 일반 USS 파일입니다.UI 툴킷은 TSS를 별개의 에셋 타입으로 취급하여 관리 목적으로 사용합니다.

일반적인 USS 구문과 포맷은 TSS 파일에 적용되지만, 일반적으로 테마 파일에는 @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를 사용하는 것과 동일한 방법으로 C# 또는 UXML에서 TSS를 참조할 수 있습니다.

패널 설정 에셋의 기본 테마로 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. Apply를 선택합니다.

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에 스타일 추가