Skip to main content

 

Community

 

 

 

Template:OutSystems/Documentation_KB/Breadcrumb_New_Layout
Documentation
OutSystems 11
Developing an Application
Design UI
Look and Feel
Customize the look of your app with Theme Editor
Look and Feel

 

 

Template:OutSystems/OSLanguageSwitcher
Language:
English日本語

 

 

 

OutSystems

Customize the look of your app with Theme Editor

  1. Last updated
  2. Save as PDF
Template:OutSystems/Documentation_KB/ContentCollaboration
  • Edit
    Collaborate with us
    Edit this page on GitHub

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

    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

    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

    Resetting your Theme Editor customization

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

    Reset Theme Editor customization