# Figma

#### How to apply Dark/Light colors using Themer Plugins <a href="#how-to-apply-dark-light-colors-using-themer-plugins" id="how-to-apply-dark-light-colors-using-themer-plugins"></a>

{% hint style="info" %}
Video Tutorial - <http://bit.ly/3UBiRR9>
{% endhint %}

#### Setup the Themer Plugin

1. Import & Open **Ablepro-color-palette.fig** file into Figma.
2. Goto Menu -> Libraries -> Find and Publish Ablepro-color-palette -> Publish styles
3. Try out the free figma **Themer** Plugins from [Figma Community](https://www.figma.com/community/plugin/731176732337510831).
4. Open Themer Plugin Dialog and follow below steps.
   * Save JSONBin API key after setting up account from [jasonbin.io](https://codedthemes.gitbook.io/mantis/v1.1.0/)
   * Create a theme
     * step1 - Select **Color styles**
     * step2 - Select **Local styles**
     * step3 - **Checkmark** the "Create multiple themes from ....."
     * Hit **Create theme** button.

{% hint style="danger" %}

#### **Troubleshoot**

**Problem -** None of the styles are published. Publish them to continue.

**Resolution -** Follow Step 2.\
\
**Problem** **-** Stuck in Themer Plugin?

**Resolution -** Reset Themer from Dialog Settings -> Reset Themer and follow step 4
{% endhint %}

**How to apply Dark/Light colors?**

1. Import & Open **ablepro-v9.fig** into Figma.
2. Goto Menu -> Libraries -> Find and **Activate** ablepro-color-palette libraries.
3. **Open** Themer Plugins Menu -> Plugins -> Themer
4. Remain Open the Themer **Dialog**.
   1. Select any existing frame(s)/layer(s)
   2. From Themer Dialog select **Night** and hit **Apply to selection** button for Dark Layout.
   3. From Themer Dialog select **Day** and hit **Apply to selection** button for Light Layout.

{% hint style="warning" %}
It may take longer loading time to apply styles using Themer Plugins depends upon the selected amount of frames/layers.
{% endhint %}


---

# 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://phoenixcoded.gitbook.io/able-pro/react/figma.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.