> For the complete documentation index, see [llms.txt](https://docs.zk.me/hub/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.zk.me/hub/start/onboarding/integration/js-sdk/customize-ui.md).

# Customize Widget UI

While our default design style aims to meet a variety of needs, specific projects may require a more tailored approach. Therefore, zkMe expanded the Widget customization features.

In our dashboard, you now have the ability to alter the zkMe Widget style, including font color, background color, and more. This provides you with the flexibility to adapt the zkMe Widget to fit your project needs or personal preferences effectively.

We will now guide you through the utilization of this feature in detail.

<figure><img src="/files/vsC7SRPIMYgYq5CXeKg0" alt=""><figcaption></figcaption></figure>

On the left, you'll find our custom editing area. On the right, we display real-time previews, showcasing how the Widget will appear on both PC Browsers and Mobile Devices by clicking the toggle button on the top.

### Color Mode

<div align="left"><figure><img src="/files/kHRBJLrpm9gyj1soNysw" alt=""><figcaption></figcaption></figure></div>

As it stands, the zkMe Widget's default color mode aligns with the system settings. This means that the widget's background color, icon background color, and font color adapt to the display mode on the user's device. However, selecting either `Light mode` or `Dark mode` overrides this functionality, meaning the color style will then remain constant, regardless of changes to the user's system settings.

<figure><img src="/files/GJ6GKUyXt0HfdZRHxKoi" alt=""><figcaption><p>Light Mode (Default theme color)</p></figcaption></figure>

<figure><img src="/files/Yx3jeG3GaplEUj2JjSfP" alt=""><figcaption><p>Dark Mode (Default theme color)</p></figcaption></figure>

### Theme Color

We provide 16 distinct color choices, along with a color palette option in our editor, to ensure a perfect match with your project's theme.

<div align="left"><figure><img src="/files/IY3IPUSuFZlQrhwomnfj" alt=""><figcaption></figcaption></figure></div>

The zkMe Widget will use the following color values when no theme color is set:

<div align="left"><figure><img src="/files/BCVlVlyTx69lo1rIdPe1" alt=""><figcaption></figcaption></figure></div>

{% hint style="info" %}
When a color from the palette is chosen, it's designated as -vt-c-primary-1. The remaining two colors are determined using [Ant Design](https://ant.design/docs/spec/colors)'s palette tool. If the way these color values are calculated doesn't quite meet your needs, feel free to adjust them by adding your own CSS.
{% endhint %}

### Advance Setting

<div align="left"><figure><img src="/files/nVZTVpRxKn6QNJbKfLhz" alt=""><figcaption></figcaption></figure></div>

This textarea lets you insert your own CSS to customize the zkMe Widget. If you adjust the color here, it'll take precedence over the theme color selector. We've implemented a few limitations on the custom CSS uploads; actions such as adding pseudo-elements, concealing elements in the widget, or altering the image source of background and icons are not allowed.

{% hint style="info" %}
To pinpoint and adjust the style of elements within a widget more effectively, you can inspect the specific elements using your browser. Subsequently, you can make alterations based on their class names.
{% endhint %}

## Examples

Here are some straightforward examples to assist you in navigating the Advanced Settings.

### Background Color

To modify the background color of the zkMe Widget to a solid color other than black or white, you may apply the subsequent CSS.

```css
:root {
  --color-background: pink;
  --vt-c-white-bg: pink;
}
```

<figure><img src="/files/J7mldUCMsCdLXGDei7tM" alt=""><figcaption></figcaption></figure>

To switch the background color to a gradient, we suggest updating the background of the given class name and adjusting the color attributes `--color-background` and `--vt-c-white-bg`.

```css
:root {
  --color-background: transparent;
  --vt-c-white-bg: linear-gradient(0deg, rgba(34,193,195,1) 0%, rgba(253,187,45,1) 100%);
}

.sty1-cell {
  background: linear-gradient(0deg, rgba(34,193,195,1) 0%, rgba(253,187,45,1) 100%);
}
```

<figure><img src="/files/jO0v0jPA57XTKH91klNy" alt=""><figcaption></figcaption></figure>

### Button Style

Most of the buttons within the zkMe Widget utilize the el-button class name. This allows you to easily style the Widget's buttons using this class name.

<pre class="language-css"><code class="lang-css"><strong>.el-button {
</strong>  background: linear-gradient(90deg, #FFC658 0.27%, #F712A9 100.27%);
  border: none;
}
</code></pre>

<figure><img src="/files/iPndTIo81t4X76O8v7yX" alt=""><figcaption></figcaption></figure>

### Font Color

To adjust the font color in zkMe Widget, you can generally do so by altering the color attribute of the relevant preset.

```css
:root {
  --color-text-9: #3974c2;
  --color-text-6: 57, 116, 194;
  --color-text-7: #887272;
}
```

<figure><img src="/files/A1MrQhmqRxsLBEI6VCba" alt=""><figcaption></figcaption></figure>


---

# 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.zk.me/hub/start/onboarding/integration/js-sdk/customize-ui.md?ask=<question>&goal=<endgoal>
```

`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.