Customizing the Styling
Last updated
Was this helpful?
Last updated
Was this helpful?
The files placed in the src file tree will replace the original files. This allows the white label build to have custom colors and styling.
The app theme can be customized using the values in the ../src/design-system/theme.js file. The javascript file contains three customizable variables:
Theme: Contains the following variables:
borderRadius determines the radius of some card-like elements, e.g Modals.
touchOpacity the opacity of pressable items that should indicate pressed state
COLORS: Determines the color scheme of the entire application. It uses a color pallet system (You can generate a color pallet using any of the tools like , , or ). This section contains the following main colors:
primary: primary brand color pallet.
primaryButton: range 200-600 pallet for primary button phases (disabled, pressed, etc.) and a text value to set the color of the primary button text.
secondaryButton: range 200-600 pallet for secondary button phases (disabled, pressed, etc.) and a text value to set the color of secondary button texts.
secondary: with only 400 and 600 values in the pallet, they is used as accent backgrounds in sections of the application. To maintain contrast in values are recommended to be dark colored for dark themed customization and light for light themed customization.
neutral: a pallet for background and text colors. Contrast between 1 and 900 should be as much as possible, with light theme ranging from very dark(e.g {1: "black"}) to very light (e.g {900: "white}) and dark theme ranging the opposite way
orange: test mode indicator background and text colors
teal: validity indicator colors
blue: used once for information box background.
warning: pending state indicator color
error: error state indicator pallet
backdrop: used for modal backdrop transparency (dark)
whiteBackdrop: used for modal backdrop transparency (light)
warningBg: warning box background
baseTheme: This should require no much changes. However if there is a need to change the style for specific components, this can be updated based on .
The app icon and the splash screen logo can be customized on the app.
TIP You can use tools like https://www.appicon.co to auto-size your images to the appropriate sizes.
There are two logos with sizes variations available for customization, they need to be replaced in the following folders.
Please ensure that the image width matches while allowing the height to be flexible. Avoid adding empty margins to fill the remaining height.
382 x 128
318 x 72
850 x 192
425 x 96
212 x 48
637 x 144
212 x 48
850 x 192
The app icon should be a .png file and needs to be replaced with your custom app icon in these sizes.
120 x 120
40 x 40
48 x 48
58 x 58
72 x 72
60 x 60
96 x 96
80 x 80
144 x 144
87 x 87
192 x 192
120 x 120
180 x 180
1024 x 1024
