Customize the look of your app with Theme Editor

Customize default colors of Screens and UI elements

Select one of the 18 default color palettes or use a custom palette based on the main colors from an image, like the logo of your company.

Once you select a color palette, Theme Editor sets a Primary color, a Header color, and a Background color. You can change each of these default colors by choosing one of the other three suggested colors or by defining a custom color.

Get palette from an image

Create a custom color palette based on the main colors of an image (.png, .jpeg). Select the logo of your company to create a color palette that reflects your brand.

Color palette

Choose one of the 18 default color palettes. Each one of the default palettes provides a handpicked color scheme that is the basis of the style of your app.

Primary

Change the color of Widgets and OutSystems UI Patterns. This is the dominant color across the screens of your app.

Background

Change the background color of Screens, with the exception of the default Login and Splash screens. Choosing a dark background color changes the font color to white, making sure text is readable.

Header

Change the background color of the Header.

Customize default font

Select one of the six font types and change the base size of your font.

Font

Change the font type used in your app.

Font Size

Change the base size of the font used in your app.

Customize structure and shape

Change the general structure of your Screens and UI elements by selecting spacing, header sizes, border shape and the style of border shadow.

Spacing

Change the spacing between UI elements.

Header size

Change the height of the Header between 40px and 100px.

Border

Change the shape of the border of UI elements.

Shadow

Toggle a shadow effect to the border of UI elements.

Customize the Login Screen background

Change the background of the Login screen to a solid color, to a color with a gradient or to an image. Check your style changes by opening the Login screen, inside the Common UI flow. In Mobile apps it also changes the background of the Splash screen.

Background color

Change the color of the Login Screen background.

Background color gradient

Change the type of gradient applied to the color of the Login Screen background. This gradient doesn't apply to a background image.

Background image

Select an image to use as the background of the Login Screen. If the background image has transparent areas

Resetting your Theme Editor customization

To delete all the style changes created using Theme Editor, press Reset Theme Editor.