> ## Documentation Index
> Fetch the complete documentation index at: https://docs.oloid-demo.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Tenant Admin Portal - How to Configure Theme Tab for DeviceLock App

> This document provides step-by-step instructions to configure theme tab for DeviceLock App in the Tenant Admin Portal.

## Introduction

The **Theme** tab in the Tenant Admin Portal for **DeviceLock App** allows admin to customize the app’s appearance to match their organization’s branding.

## Prerequisite

You must create DeviceLock Application. To create, refer [How to create and configure Device Lock application](https://oloid.help/en/articles/8698213-how-to-create-and-configure-device-lock-application).

## Steps to configure Theme Tab

1. Log in to the **Tenant Admin Portal**.
2. On the homepage, click the **Device Lock Application** to be configured.

   ![How to Configure Theme Tab for... - screenshot 1](https://mintcdn.com/oloid-999c42b2/VbAhyqXuqqWYdBDH/images/intercom/10009894/image-69ddfb5a.png?fit=max\&auto=format\&n=VbAhyqXuqqWYdBDH\&q=85\&s=6754b64983475c4ad55b6b19fb3dd580)

   The **Device Lock Application details** page is displayed.
3. Go to **Theme** tab.

   ![How to Configure Theme Tab for... - screenshot 2](https://mintcdn.com/oloid-999c42b2/VbAhyqXuqqWYdBDH/images/intercom/10009894/image-eeab7200.png?fit=max\&auto=format\&n=VbAhyqXuqqWYdBDH\&q=85\&s=3c7bfe3b416aff1be92f26aa032c3887)

   The theme tab is displayed.

   ![How to Configure Theme Tab for... - screenshot 3](https://mintcdn.com/oloid-999c42b2/VbAhyqXuqqWYdBDH/images/intercom/10009894/image-d68e6bfe.png?fit=max\&auto=format\&n=VbAhyqXuqqWYdBDH\&q=85\&s=8823bfcb2b3ed6e1d1b20306a826ad7d)
4. Do the following:
   1. Edit Customer logo.

      > [!NOTE]
      >
      > **Note:** The maximum file dimensions for the logo are **264x72 px**, with a maximum size of **1 MB** in **PNG** format.

      ![How to Configure Theme Tab for... - screenshot 4](https://mintcdn.com/oloid-999c42b2/VbAhyqXuqqWYdBDH/images/intercom/10009894/image-5ef153f0.png?fit=max\&auto=format\&n=VbAhyqXuqqWYdBDH\&q=85\&s=e4ed87889bbd71c3e6b33889e6b0c1ec)
   2. **Background Image:** Do one of the following:
      1. Edit Background image.

         > [!NOTE]
         >
         > **Note:** The maximum file size is **2 MB** (JPG, PNG, JPEG). This image is used as the widget background.

         or
      2. Select **Solid Background** option > enter color code.

         ![How to Configure Theme Tab for... - screenshot 5](https://mintcdn.com/oloid-999c42b2/VbAhyqXuqqWYdBDH/images/intercom/10009894/image-758b5aec.png?fit=max\&auto=format\&n=VbAhyqXuqqWYdBDH\&q=85\&s=0757b5d068a43788db365c869e808641)
   3. **Foreground Color:** Select **Solid Background** option > enter color code.
   4. **Primary Color/Button Default:** Update the primary color code to define the primary button's default background and its hover-state text color.
   5. **Secondary Color/Hover State:** Update the secondary color code to define the primary button's hover background and its default text color.
   6. **Customize Heading:** Update the heading that appears at the top of the screen.
   7. **Heading Text Color:** Update the text color code of the screen heading.
   8. **Widget Header/Footer Color:** Update the background color for the Widget's header and footer.
   9. **Footer Text Color:** Update the footer text color code in Login App.
   10. **Enable Help-text:** Turn on **Enable Help-text** toggle and then enter the help text to display on the **Identity Selection** screen.

       > [!NOTE]
       >
       > **Note:** The help text is displayed only on the **Identity Selection** screen and must not exceed **100 characters**.

       ![How to Configure Theme Tab for... - screenshot 6](https://mintcdn.com/oloid-999c42b2/VbAhyqXuqqWYdBDH/images/intercom/10009894/image-4b371dc5.png?fit=max\&auto=format\&n=VbAhyqXuqqWYdBDH\&q=85\&s=4e0f92c24ac6d3957d3157c762812784)
5. (Optional) In the **Preview** section, select one of the following tabs to preview the theme configuration:
   1. **Identity Selection:** Preview the appearance of the identity selection screen displayed before user authentication.
   2. **Authentication:** Preview the authentication screen displayed when users authenticate using their configured credentials.
   3. **Error:** Preview how error messages and error screens are displayed to users during authentication failures.

      ![How to Configure Theme Tab for... - screenshot 7](https://mintcdn.com/oloid-999c42b2/VbAhyqXuqqWYdBDH/images/intercom/10009894/image-3a4e2ffa.png?fit=max\&auto=format\&n=VbAhyqXuqqWYdBDH\&q=85\&s=30d2a5d0fceea6fbefe48a9c6f529394)
6. Click **Deploy**.

   ![How to Configure Theme Tab for... - screenshot 8](https://mintcdn.com/oloid-999c42b2/VbAhyqXuqqWYdBDH/images/intercom/10009894/image-ac9ef156.png?fit=max\&auto=format\&n=VbAhyqXuqqWYdBDH\&q=85\&s=290a51456bc762f71c2e3d90da6ec7f1)

   The **Confirm Update** pop-up box is displayed.
7. Click **Update**.

   ![How to Configure Theme Tab for... - screenshot 9](https://mintcdn.com/oloid-999c42b2/VbAhyqXuqqWYdBDH/images/intercom/10009894/image-edd2d88a.png?fit=max\&auto=format\&n=VbAhyqXuqqWYdBDH\&q=85\&s=daf120fc59fe75f531faea9ea5c9bc3d)

   The DeviceLock theme tab is updated successfully.