We are excited to announce a new update that brings advanced customization features, allowing you to tailor your application’s branding more precisely than ever before.
Accessing Customization Options: With this latest release, you can easily find the new customization settings by navigating to Settings > Branding > Custom Theme Support.
What You Can Customize: The Custom Theme Support feature enables you to modify the color palette across various views within the application, including:
Primary: Primary refers to the base of all the buttons in the app
Surface: Surface refers to any background pop-up space upon clicking a button
Menu Drawer: Menu drawer means the menu scroll that appears on clicking the menu logo
Shadow:
Error: Error refers to an alert that pops up upon performing a wrong act.
In addition to adjusting these elements, you can personalize the text color settings associated with each view. These settings are labeled as:
On Primary: Refers to the fonts on the primary space
On Surface: Refers to the font color on the surface
On Menu Drawer: Refers to the font color on the menu drawer
On Error: refers to the font color on the error button
Visual Guide: To help you get started, the image below highlights where these color changes will be reflected in the app interface.
We’re confident these new customization options will help you create a branded experience that perfectly aligns with your vision. As always, we value your feedback and look forward to seeing how you personalize your applications!
Default Settings That Appear When Admin Opens The App Before Customization:
Surface: ffffff
onSurfaceL000000
Menu Drawer: 000000
Shadow: 000000
onShadow: ffffff
Error: FFF56969
onError: ffffff
Menu Transparency: 0.9
Shadow TransparencyL 0.6
Icons background startpage: 0.2
Borders for buttons on images (transparency):1 (no transparency)
Border Settings: Thin
Things To Remember While Branding The App:
As much flexibility as as customization offers, it can also mess up the screens. It is important to understand the game of contrasting colors between the font and the surface.
Not picking up a theme for overall application customization can get tricky if it is not done right!
Here is an example of a branding setup in the BO and how it will reflect on the app side.
From the custom theme support, you can also adjust the transparency of buttons, which also affects their appearance.
Button Customization: From the Custom Theme Support settings, you can now refine the appearance of buttons to align with your brand identity. Options include:
Transparency Adjustments: Modify the transparency levels to achieve the desired button appearance. The higher the transparency, the darker the shade of the background color.
Radius and Roundness: You can customize the curvature of buttons by selecting low, high, or completely disabling roundness.
Border Settings: You can choose from a range of border thicknesses, including None, Thin, Medium, and Thick.
Font Selection: Admins can now select fonts to enhance the application's branding. A drop-down menu provides a list of available fonts. To add or review new fonts, click Font Style and explore the customization options.
All of these changes you initiate here for branding would be visible on the application side.
Here are a few color combinations that you can try for your application. You can play around with such colors and create the best branding output. Refer to this article and see how this works for you. https://looka.com/blog/logo-color-combinations/