How to configure your Advanced Theme Settings?

Summary

This guide walks you through configuring the Advanced Theme Settings for your application’s visual elements, including the dark background colour, header background colour, and secondary button style. Customising these settings allows you to align the application’s appearance with your branding preferences, enhancing the user experience.

To select colours, you can use any colour picker tool, such as HTML Colour Codes. Simply choose your color, copy the hex colour code (beginning with a #, e.g., #FB34HG), and paste it into the application’s theme settings.

Step-by-Step Guide

1. Access the System Configuration Module

   • From the home page, navigate to the System Configuration module.
     
     
     
     

2. Open Settings

   • Select Settings within the System Configuration module.
     
     
     
     

3. Manage Settings

   • Click on Manage Settings.
     
     
     
     

4. Select Advanced Theme Settings

   • In the category dropdown, choose Advanced Theme Settings and click Search.
     
     
     
     

5. Configure the Three Theme Options

   • The following 3 theme options will appear:
     
     
     
     

   A) Application's Dark Background Colour

   • Description: This setting customises the background colour for elements like the "Browse by Location" and "Browse by Time" boxes, as well as the calendar dates on the Activity Booking page.
   • How to Set: Enter your selected hex colour code to set the desired background colour. Example below: Black
     
     
     How it will look online:
     
     
     
     
     
     

   B) Application's Header Background Colour

   • Description: This setting changes the colour of the main header across the application, such as the header at the top of the client’s website.
   • How to Set: Follow the same process to input a hex colour code.
     
     
     How it will look online:
     
     
     
     

   C) Application's Secondary Button Style

   • Description: The secondary button style applies to buttons when multiple actions are available on the screen. Options include Outline or Solid.
   • How to Set: Choose between Outline (shows an outlined button) or Solid (displays a filled button).
     
     
     
     Outline will look like this:
     
     
     Solid will look like this:
     
     
     
     

6. Save Your Settings

   • After entering your selections, review them on the screen. If all settings appear correct, save your configurations to apply the changes to the application.

By following these steps, you can customise your application’s theme, providing a cohesive and personalised look that matches your branding preferences.

Note: As accessibility is impacted by clients' config, Accessibility compliance depends on having sufficient colour contrast. This is determined by the colours set in your settings. If you're unsure whether your chosen colours meet accessibility contrast requirements, you can give OpenPlay permission to adjust them as closely as possible to your original palette while ensuring compliance.