Skip to main content

Theme

Theme

You can configure the theme for Nuclei SDK screens so that it matches the parent app's brand guidelines. You need to create a style with parent as NucleiSDKTheme, in the app’s style.xml file. Below are the settings you can change. The purpose of these settings is provided in comments.

You can see below an attachement of the Nuclei SDK screen for reference.

The following is an example in the style file

<style name="SampleAppTheme" parent="NucleiSDKTheme">

//primary contextual elements.
<item name="colorPrimary">#41b53f</item>
// status bar
<item name="colorPrimaryDark">#749f30</item>
// radio,checkbox,progress etc
<item name="colorAccent">#FF4081</item>
//Disabled cta
<item name="colorAccent50">#7B3527</item>
//Enabled cta
<item name="colorAccent85">#56261C</item>

// Toolbar
<item name="colorToolbarBg">#009fda</item>
<item name="colorToolbarInfo">#FFFFFF</item>


// Category landing form background
<item name="colorContainer">#41b53f</item>


// Tabbar Color
<item name="tabTextColor">#009fda</item>
<item name="tabIndicatorColor">#009fda</item>

// MenuItem color
<item name="menuBackGroundColor">#ffffff</item>
<item name="menuTextColor">#212121</item>

// The below color is used for web categories
<item name="buttonTextColor">#ffffff</item>

// setting it to true give neumorphic design and setting to false gives flat design
<item name="isNeu">false</item>
// Corner radius given to primary button in each screen

<item name="buttonCornerRadius">10</item>
// Font family
<item name="fontFamilyLabel">Muli</item>
<item name="loaderStyle">THREE_DOT_LOADER</item>
</style>