> For the complete documentation index, see [llms.txt](https://docs.truvera.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.truvera.io/credential-wallet/white-label-wallet/configuration/customizing-the-styling.md). # Customizing the styling 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. ## Theme 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 [JSON Color Palette Generator](https://json-color-palette-generator.vercel.app/), [Smart Swatch](https://smart-swatch.netlify.app/), or [Palx](https://palx.jxnblk.com/)). 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 [nativebase guideline](https://docs.nativebase.io/customizing-components). [See examples of white labeled wallet designs](https://www.figma.com/file/hpHhkjv6tz3KdlSX8Hr1tH/White-label-wallet-\(Copy\)?type=design\&node-id=8-175\&mode=design) ## Images The app icon and the splash screen logo can be customized on the app. **TIP** You can use tools like to auto-size your images to the appropriate sizes. ### Updating the Splash Screen Logo There are two logos with sizes variations available for customization, they need to be replaced in the following folders. {% hint style="warning" %} **Please ensure that the image width matches while allowing the height to be flexible. Avoid adding empty margins to fill the remaining height.** {% endhint %} | Icon Size | Example | Icon Size | Example | | --------- | -------------------------------- | --------- | -------------------------------- | | 382 x 128 | ![](/files/2Y78j9END91dqvJWVQEx) | 318 x 72 | ![](/files/2Y78j9END91dqvJWVQEx) | | 850 x 192 | ![](/files/2Y78j9END91dqvJWVQEx) | 425 x 96 | ![](/files/2Y78j9END91dqvJWVQEx) | | 212 x 48 | ![](/files/2Y78j9END91dqvJWVQEx) | 637 x 144 | ![](/files/2Y78j9END91dqvJWVQEx) | | 212 x 48 | ![](/files/2Y78j9END91dqvJWVQEx) | 850 x 192 | ![](/files/2Y78j9END91dqvJWVQEx) | ### Updating the App Icon The app icon should be a `.png` file and needs to be replaced with your custom app icon in these sizes.
Android icon sizeExampleiOS icon sizeExample
120 x 12040 x 40
48 x 4858 x 58
72 x 7260 x 60
96 x 9680 x 80
144 x 14487 x 87
192 x 192120 x 120
180 x 180
1024 x 1024
--- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://docs.truvera.io/credential-wallet/white-label-wallet/configuration/customizing-the-styling.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.