Styles Migration Guide
To take full advantage of the new Universal Theme System in your existing projects, there are a few steps you should take to migrate your view components and styles.

1. Install all updates from the marketplace.

You'll be prompted to do this when opening your project.

2. Add style classes to components

  • Existing components will be set in a "no style class" state
  • Change components to use style classes to leverage the theme system
add style classes to existing components

3. Migrate legacy margins to the gap system

  • Existing margins should be converted to use the gap system
  • make note of the margin values, as they won't be preserved after pressing the "migrate" button
  • Where as margins defined space around the component, the gap system defines space between components. Use gaps and padding together where needed to rebuild your layout.

4. Layout: legacy "stretch" align value in use

  • Choose one of the available values

5. Width and height: migrate parent container align items

  • functionally the same as step 4. This affects the parent container of the element. The parent container for a top level element will be the page itself.
Optionally you can also:
  1. 1.
    Change component foreground colors to smart color bindings
  2. 2.
    Change background colors to smart background colors
change text color binding to "follow smart content color"
change background color to one of the smart background colors
Export as PDF
Copy link