UI Toolbox logoUI Toolbox

Theme API

Video tutorial: Themes. All videos: Video tutorials.

Member Kind Effect
theme-name UXML attribute (ThemeName) The theme to load on attach. A new value on an attached workspace switches the theme, as SetTheme does. Default: default.
auto-load-styles UXML attribute (AutoLoadStyles) If false, WindowStyles.uss and the theme sheet are not loaded. Default: true.
SetTheme(string themeName) Method Removes the previous theme sheet and adds UIToolbox/Themes/{themeName}. User sheets stay above it. default or dark removes the theme sheet.
ThemeChanged Event Raised after SetTheme switches the theme, with the new theme name. The same theme raises nothing.
AvailableThemes Static property The names of the sheets in Resources/UIToolbox/Themes: dark first, then the others by name. A theme of your game is in the list when its sheet is in a Resources/UIToolbox/Themes folder.
AddUserStyleSheet(StyleSheet) Method Adds a sheet above the theme. Theme changes do not remove it.
RemoveUserStyleSheet(StyleSheet) Method Removes a sheet that you added with AddUserStyleSheet.
text-size UXML attribute (TextSize) Text size: Normal, Large (125%), Larger (150%) or Largest (200%). You can change it at any time. Default: Normal.

You can call these methods before the workspace attaches. They apply on attach. ThemeSelector is a dropdown of the themes.

Built-in themes

Theme Look
dark The base palette, VS Code dark. default is the same.
light Light grey surfaces and dark text.
high-contrast Black, white and yellow, with thicker borders.
toolbox The UI Toolbox logo colors: charcoal surfaces, a blue accent and green for success and dock targets.
toolbox-light The logo colors on light grey.
game-custom An example user sheet with a purple palette and larger sizes. It also works as a theme.

Text size

TextSize is for users who need larger text. Any value other than Normal adds the class tb-text-size--125, --150 or --200 (Workspace.TextSizeClass) to the workspace and to its open dropdown menus. The rules for these classes in WindowStyles.uss set fixed values for the font size variables, --tb-size-title-bar and --tb-size-button.

<tb:Workspace theme-name="high-contrast" text-size="Larger" />

Set the theme

In UXML:

<tb:Workspace name="workspace" theme-name="light" />

In code:

#nullable enable
using UIToolbox;
using UnityEngine;
using UnityEngine.UIElements;

public class ThemeSwitcher : MonoBehaviour
{
    [SerializeField] private StyleSheet? _brandSheet;

    private void Start()
    {
        var workspace = GetComponent<UIDocument>().rootVisualElement.Q<Workspace>();
        workspace.SetTheme("high-contrast");
        if (_brandSheet != null) workspace.AddUserStyleSheet(_brandSheet);
    }
}