Configure Theme

The Launcher has theming support to enhance device user experience with Corporate Branding, where the logo, theme colors, and wallpaper can be customized.

Overview

Organizations can define and customize separate wallpapers for the main and lock screens to match an organization’s branding, needs or preferences.

User Guide

You can customize the Launcher UI to match your organization’s branding. These include the company logo, height of the logo, background color, and accent color.

1. If this feature is enabled in the configuration, theme support will be available.

2. You can specify the company logo, the height of the logo in pixels, the background color, and the accent color.

3. Once you have set these values, the Launcher UI will be themed according to your specifications.

Feature Configuration

To set up the Theme feature for a particular device profile or device group, please follow the steps below:

Enabling Theme Support

Theme support can be enabled or disabled within the Launcher configuration. If theme is set to true, theme support will be available.

"theme": {
    "enable": "true",
}

Setting Up the Background Theme

If darkTheme is set to true, the device changes all element text colors to black. If darkTheme is set to false, the device will use a light background.

 "darkTheme": false,

Setting Up the Wallpaper Image

To set up the wallpaper image for the Launcher UI, specify the name, local path, or URL of the image. There are also built-in wallpaper images available such as bubble, topology, messe, or swirl.

Example using Assets Manager:

 "wallpaperImage": "assets:wallpaper",

Example using a local file:

 "wallpaperImage": "/sdcard/Download/ems/wallpaper.png",

Setting Up the Logo

To set up a company-specific logo for the Launcher UI, add the image from the assets folder. For example:

 "logo": "assets:logo",

Setting Up the Accent Color

To set up a company-specific accent color for the Launcher UI, use the example below as a guide:

"accentColor": "#FFCC00",

Setting Up the Duotone Colors

You can optionally apply a tint on your wallpaper image. You can set up the colors for the light and dark halftone colors of the wallpaper image. For the sample configuration below, the wallpaper image will be tinted with white for the light halftone color and gray for the dark halftone color.

To use your wallpaper as-is without tinting, set the two values to "" or blank.

"duoToneWhite": "#FFFFFF",
"duoToneBlack": "#DDDDDD",

Setting Up the Blur Radius and Blur Passes

The blur radius and blur passes properties specify the size and number of times the blur filter is applied to the wallpaper image. The default values for the blur radius and blur passes are 0, which means that no blur will be applied to the wallpaper image by default. To apply a blur to the wallpaper image, you can set the blur radius and blur passes properties to non-zero values. Use the sample configuration below as a guide:

"blurRadius": 0,
"blurPasses": 0,

Setting Up the Folder Colors

You can specify the color of the text and background of an open folder object. If the darkTheme property is enabled, then the background color property should be set to a dark color to make the text in the folders easier to read. On the other hand, choosing a light background color while enabling darkTheme would make text difficult to read. If the darkTheme property is disabled, then the background color can be set to any color. Use the sample configuration below as a guide:

"folderBackgroundColor": "#FFFFFF",
"folderTextColor": "#000000"

Button Shape

Launcher 3.24.20 introduced the ability to control the button shapes. First enable the feature by setting consistentButtonShape setting to true, then set the radius value for the button corners.

"consistentButtonShape": true,
"buttonCornerRadius": 8

Full Configuration

The Launcher UI can be themed using this example:

"theme": {
    "enable": "true",
    "darkTheme": false,
    "wallpaperImage": "assets:wallpaper",
    "logo": "assets:logo",
    "accentColor": "#FFCC00",
    "duoToneWhite": "#FFFFFF",
    "duoToneBlack": "#DDDDDD",
    "blurRadius": 0,
    "blurPasses": 0,
    "folderBackgroundColor": "#FFFFFF",
    "folderTextColor": "#000000",
    "consistentButtonShape": true,
    "buttonCornerRadius": 8
},