Customize the look of your app with Theme Editor
If your app uses a OutSystems UI Theme as a Base Theme, you can use Theme Editor to customize the overall style of your app and preview your customized app without leaving Service Studio.
To open Theme Editor, open a Screen and click the Theme Editor... icon in the workspace toolbar.
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
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.
- 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
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.
- 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.
