Skip to main content

 

Developing an Application

 

OutSystems

Customize the look of your app with Theme Editor

If your app uses a default OutSystems UI Themes, you can use Theme Editor to customize the overall style of your app and preview your customized theme without leaving Service Studio.

To open Theme Editor, open a Screen and click the Theme Editor... icon in the workspace toolbar.

Open 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.

Theme colors

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.

Theme 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

Only available in Reactive Web and Traditional Web modules.

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

Theme structure

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.

Login 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

Choose between a single style or native styles

Only available in Mobile modules.

Change how your mobile app looks on different mobile devices or keep a consistent style across.

Native styles

OutSystems UI look and feel
Use a single style for all mobile devices, regardless of the OS.
Native look and feel
Use a different style for Android and iOS devices adapted to the general look of each OS.

Resetting your Theme Editor customization

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

Reset Theme Editor customization

  • Was this article helpful?