# 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](https://docs.usemeta.fi/unity-sdk/sdk-reference/provider-initialisation). 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-csharp"><code class="lang-csharp">fontColors = new { 
    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 class="language-csharp" data-overflow="wrap"><code class="lang-csharp">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-csharp"><code class="lang-csharp">ctaButton = new {
    color ="#fbe383", // adjusts background color
    fontColor = "#ffffff",
    disabled = new {
        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-csharp"><code class="lang-csharp">optionButton = new {
    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

```csharp
using Metafi.Unity;
using System.Dynamic;

public class StartButton : MonoBehaviour {
    async void Start() {
        Debug.Log("Initializing Metafi Provider");

        dynamic _options = new ExpandoObject();
        _options.logo = @"Assets/Resources/logo-2.png";
        _options.theme = new {
            fontColors = new {
                primary = "#FFFFFF",
                secondary = "#e8e8e8"
            },
            bgColor = "#29327F",
            ctaButton = new {
                color = "#F19B28",
                fontColor = "#FFFFFF"
            },
            optionButton = new {
                color = "rgba(255,255,255,0.1)",
                fontColor = "#FFFFFF"
            },
            metafiLogoColor = "light",
        };
        
        await MetafiProvider.Instance.Init(
            "apiKey",
            "secretKey",
            _options,
            new List<Chain> {Chains.ETH, Chains.MATIC, Chains.GOERLI, Chains.MUMBAI},
            new List<Token> {},
            false
        );
        
        Debug.Log("Metafi Provider initialized");
    }
}
```