# UI Customization

## Summary

You can customise the look and feel of the wallet to suit the UI of your game. Currently, you can customise the colours of the wallet, however we are constantly working to add more customisation options. If you have any requests, please post it on our [Discord](https://discord.gg/yaxvxEmuKn) and we will look into it.

## Reference

You can customise the theme of the wallet using the `theme` object passed in as an option while [initialising the Metafi Component](/react-sdk/v1.2.0-latest/get-started.md#initialise-the-component). It is an **optional** field, and leaving it empty will cause the wallet to use the default theme.

The theme object accepts the following parameters.

<table><thead><tr><th width="220">Parameter</th><th width="117">Type</th><th>Definition</th></tr></thead><tbody><tr><td><code>fontColors?</code></td><td>Object</td><td><p>Allows you to adjust the font colours of the wallet. Accepts a primary and secondary colour - <strong>primary</strong> is used for headings, and <strong>secondary</strong> is used for most other text. Example:</p><pre class="language-json"><code class="lang-json">fontColors: { 
    primary: '#1f0203', 
    secondary: '#561d19' 
}
</code></pre></td></tr><tr><td><code>bgColor?</code></td><td>String</td><td><p>Allows you to adjust the background colour of the wallet, as well as the bg colour of menus and popups. Accepts any CSS colour string as input. Example:</p><pre><code>bgColor: 'linear-gradient(0deg, #f3b344 0%, #d27435 100%)'
</code></pre></td></tr><tr><td><code>ctaButton?</code></td><td>Object</td><td><p>Adjust the colours of CTA Buttons in the wallet. You can adjust the font colour and background colour of the buttons. Example:</p><pre class="language-json"><code class="lang-json">ctaButton: {
    color: "#fbe383", // adjusts background color
    fontColor: "#ffffff",
    disabled: {
        color: "rgba(255,255,255,0.2)",
        fontColor: "rgba(255,255,255, 0.5)",
    },
},
</code></pre></td></tr><tr><td><code>optionButton?</code></td><td>Object</td><td><p>Adjust the colours of non-CTA Buttons in the wallet. You can adjust the font colour and background colour of the buttons. Example:</p><pre class="language-json"><code class="lang-json">optionButton: {
    color: 'rgba(0,0,0,0.2)',
    fontColor: '#561d19'
}
</code></pre></td></tr><tr><td><code>metafiLogoColor?</code></td><td>String</td><td>Set the Metafi logo to either light mode or dark mode. For a dark background, please set the Metafi Logo to <code>light</code> colour. the default is <code>dark</code></td></tr></tbody></table>

## Example

```jsx
import { MetafiProvider, chains } from '@metafi/metafi-react-package';

function App() {
    return (
    <MetafiProvider
        apiKey={"YOUR_API_KEY"}
        secretKey={"YOUR_SECRET_KEY"}
        supportedChains={[chains.eth]}
        customTokens={} // for your custom tokens
        options={
            "logo": "./logo.png", // pass in the URL or path to your logo
            "theme": {
                fontColors: { 
                    primary: '#ffffff', 
                    secondary: '#e8e8e8'
                },
                bgColor: 'linear-gradient(40deg, rgba(209,29,255,1) 0%, rgba(7,52,235,1) 100%)',
                ctaButton: {
                    color: '#430aa0',
                    fontColor: '#ffffff'
                    disabled: {
                        color: "rgba(255,255,255,0.2)",
                        fontColor: "rgba(255,255,255, 0.5)",
                    },
                },
                optionButton: {
                    color: 'rgba(0,0,0,0.1)',
                    fontColor: '#ffffff'
                },
                metafiLogoColor: 'light',
            },
        }
    >
        <YourComponents>
        ...
        </YourComponents>
    </MetafiProvider>
    );
};
```


---

# Agent Instructions: 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:

```
GET https://docs.usemeta.fi/react-sdk/v1.2.0-latest/ui-customization.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.