On This Page

{#jumplink-list}  
[Markdown](/docs/vas/en-us/pax-all-in-one/integration/all/na/pax-all-in-one/pax-aio-get-started-intro/pax-aio-customize-default-ui-intro/pax-aio-customize-default-ui-change-style.md)  
Filter  
FILTER BY TAG

Customize Style Elements Using a Theme {#pax-aio-customize-default-ui-change-style}
===================================================================================

Follow these steps to customize the Default UI style elements.

1. Introduce a new theme to your application that includes the `Theme.PayButton2` theme as a parent theme:

   ```
   <!-- Paybutton theme -->
   <style name="Theme.AppTheme.SampleTheme" parent="Theme.PayButton2">
       <!-- Text color -->
       <item name="colorOnSurface">@color/black</item>
    
       <!-- Background color -->
       <item name="colorSurface">@color/white</item>
    
       <!-- Contactless indicators -->
       <item name="contactlessStateActiveColor">@color/dui_green</item>
       <item name="contactlessStateInactiveColor">@color/dui_light_gray2</item>
       <item name="contactlessStateErrorColor">@color/dui_red</item>
    
       <!-- Transaction status -->
       <item name="approvedStateColor">@color/dui_green</item>
       <item name="declinedErrorStateColor">@color/dui_red</item> <!-- Also used for error messages and dialogs -->
       <item name="preAuthorizedStateColor">@color/dui_dark_gray</item>
    
       <!-- Filled buttons and animations primary color -->
       <item name="colorPrimary">@color/dui_blue</item>
    
       <!-- Used over the primary color for text on filled buttons and details on animations -->
       <item name="colorOnPrimary">@color/dui_white</item>
    
       <!-- Corner radius for the buttons and transaction status badges -->
       <item name="smallComponentCornerSize">4dp</item>
    
       <!-- Company logo -->
       <item name="toolBarLogo">@drawable/logo_140x36</item>
    
       <!-- Stroke color for icons and animations -->
       <item name="animationStrokeColor">@color/dui_black</item>
    
       <!-- Stroke color for terminal in present card animation. By default the same as animationStrokeColor -->
       <item name="cardPresentAnimationStrokeColor">@color/dui_black</item>
   </style>
   ```
2. Call one of these methods to set the theme:

   ```
   mposUi.themeRes = R.style.Theme_AppTheme_SampleTheme
   ```

RELATED TO THIS PAGE