Skip to main content

SILK UI Framework

 

OutSystems

Using Silk UI Mobile Theme Customizer

The Mobile Theme Customizer was created to empower everyone to create a unique mobile theme, with a few clicks only. It enhances the customization experience by creating an iOS and Android native look and feel for both phone and tablet.

Working With a Color Scheme

When the Theme Customizer is launched, it will start with a random color scheme from a list of 25 beautiful Color Palettes. You can change the Color Palette or upload a Logo to define the application’s look and feel.

When uploading a logo, the Customizer will intelligently recognize its color scheme and apply them to the theme.

The logo file should be of high quality and at least two times the size that it will be used in the application, to make sure that high-density screens do not display a poor-quality logo. Ideally, it should be around 500x500 px, with a maximum of 50 KB. Logos with transparent background will also blend with the background image or color, giving the customization a better look.

Using the logo as a base, you are offered color selections for the Primary Color, Secondary Color, and Background Color. 

  • Primary Color: The Primary Color is generated from the main color of your uploaded logo. It will be the main influence of your theme. Silk UI patterns are developed to make use of the Primary Color of the theme.
  • Secondary Color: When using the Default Silk UI Style, the Secondary color is applied to the Header section. And when using the Native Look and Feel, it is applied to the Header and Bottom bars in Android.
  • Background Color: This will be applied to the Content area of all screens with the exception of the  Splash and Login screens. Patterns inside a dark background will automatically adjust their text and background colors. For example, when using a dark theme, the Customizer will automatically select a white font for more contrast and easeful reading. On the other hand, lighter themes will have dark fonts.

If you want further customization, you can use the color picker to choose your custom color, or input the specific hex code of the color.

You can enhance your Splash and Login screens with further customization, by selecting a background color or images (either clear or blurred). When choosing a background color, you can also choose to apply one out of three gradients.

Apart from the curated list of images, you can upload your own.

The uploaded background image should have a high quality resolution and at least two times the size that it will be used in the application. This will ensure that high density screens do not display a background with poor quality. Ideally, the image should be around 750x1334 px with no more than 200 KB.

Customizing Font Styles and Sizes

When selecting the font size, the text size in different text areas is changed in proportion to their area. Keep in mind that some areas of the Layout will not be affected by font size changes in order to preserve visual integrity.

The default font is the system font from your device for a more native-like experience, San Francisco in iOS and Roboto in Android. However, you can select another font from a curated list.

iOS and Android Look and Feel

You can have the same theme for all devices, ensuring consistency, with the same look and feel in your application. This will make for easier maintenance since the theme will be always the same in any device.

Or, you can have the same theme adapt automatically to the specific designs of Android and iOS, for the optimal native experience. When selecting to have the native look and feel, the generated style sheet will have specific rules for both device types. This means that any UI change will require changes in the CSS of both operating systems.

Customizing in an Adaptive Way

Use the Tablet Preview to see your theme applied to a tablet screen.

Using the Live Preview

Although the Customizer gives you an immediate preview with a couple of patterns, you probably want to see how the theme looks like across your application. To do that, use the Live Preview feature, to generate a QR code, which you can scan with the Customizer Preview Block

Download the Customizer Preview from the Forge and reference the Block in your application.

To use it, you can enable the ShowButton parameter to display an icon inside the application to open the Live Preview popup or create your own logic to open the popup using the IsOpen parameter.

Keep in mind this only acts as a preview. You still need to apply the generated CSS in the application theme.

Generating Your Custom Theme

When your theme is ready, click Generate Theme. This will automatically copy your theme to the clipboard, so you can paste it in your application Theme in Service Studio. When you paste the new CSS, you should replace the existing default customization from the original template. If you don’t replace it, the custom CSS made in the Theme may have an impact in the Customizer Theme if there are changes to colors and backgrounds. Animations and structure changes are fully compatible.

Advanced Options

At the very bottom of the Customizer controls, there’s a button to enable Advanced Options. These allow you to:

  • Enter the Application Name next to the logo, replacing the title on the Splash and Login screens.
  • Use the advanced CSS feature: copy the CSS from your custom component into the text area and add the correct CSS comments to customize either the Primary, Secondary or Background colors. See the example below:

Although there are specific colors set for the text, the background and the overlay, if you add the comments /*primary-color*/, /*secondary-color*/ and /*background-color*/, you instruct the Theme Customizer to generate this CSS directly for your application, replacing these colors for the ones that were set on the Customizer.

Offline Resources

URLs for background images and fonts inside the generated theme are absolute, which means they will not be available offline. If you want them available offline, you need to import the resources manually to your application and replace the URLs for the relative path. The bottom part of the generated CSS has the URL’s for the background image and app logo.

  • Was this article helpful?