Following the 2019.1 release of the Editor and the introduction of UIElements, our design material has begun to shift towards a more modern, sleek, and usable appearance that reflects the Unity of today. As a result, it will be necessary to update existing developer packages to align with the new theme.
Many of these design changes address accessibility and usability issues without affecting workflows, updating the design of elements and interfaces to increase readability and navigation. UX initiatives have worked to establish a new material which ensures consistency in usage and construction, facilitates alignment across the Editor, and provides developers with the tools necessary to develop efficiently and effectively.
To minimize the impact of updating the custom styles in the UI owned by your team, this transition guide provides a summary of the changes, as well as information on how to resolve problems you may encounter and how to use the USS files to extend or override supported CSS style properties.
The introduction of UIElements has allowed us to provide developers with a toolkit to create custom interfaces which look and feel consistent with the Editor. This tool provides a library of existing elements as well as examples of how to generate them in code.
When building new UI Panels or Editor windows, it is important to align with the new Editor theming. Depending on the nature of the UI, two courses of action exist:
New UI Panels and Editor Windows compatible with 2019.1 or later should be built with UIElements technology whenever possible for standard controls: Default styles can refresh to new themes allowing for the automatic updating of elements built using IMGUI and UIElements technologies, allowing designers and developers to simply refresh with each new version.
It’s important to note that hard-coded elements will not inherit these changes and will require the developer to manually update to the new theme: custom USS files will be required to be provided in two versions, one adapted to the 2019.1 theme and another for earlier versions.
UI Panels and Editor Windows aimed to be compatible with version 2018 or older will require the use of IMGUI to create UI and should refrain from using non-standard GUIStyles, offsets, widths, and heights.
Panels or Windows built with IMGUI may or may not require manual updating depending on the level of customization of default styles being used. It is advisable to begin diagnosing the amount of manual updating required by downloading and installing the latest build available in the forums (APPROPRIATE LINK HERE) to see if and how UI has been effected.
Remember to test on Windows, Mac, and Linux platforms using appropriate fonts and both the light and dark themes (located in the General section of the Preferences window).
Note : As stated above, custom hard-coded elements will not automatically inherit these changes and will require a manual update to the new theme. We recommend remaking any existing UI using UIElements to ensure consistency and ease of maintenance with future updates as IMGUI gets deprecated.
The easiest method to update your UI is to use one of the refreshed core styles below instead of a custom style, which can help you achieve consistency with the rest of the UI and will future-proof your UI for upcoming style changes.
If you cannot update to one of the refreshed styles below and need to update a custom style you can find instructions on how to do so in the Common Issues and Solutions section below.
Since EditorGUIUtility.singleLineHeight has changed, some elements may no longer be aligned vertically. This could be the case if hard-coded offsets were used to position elements.
You should use the EditorGUIUtility.singleLineHeight constant when calculating the position of elements. For example, to middle align an element of height h, you can use the following calculation:
element.y = element.y + (EditorGUIUtility.singleLineHeight - h) * 0.5f;
Since the Inter font has a different width your button text may no longer fit. You can use GUIStyle.calcSize () or GUIStyle to compute the proper size of the content based on the font, and then fix this issue as follows:
If your styles have not changed, you can fix this issue as follows:
If your custom window is too small you can follow these steps: