# 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 the Themer Plugin Dialog and follow the steps below.
   * Save the JSONBin API key after setting up the account from [jasonbin.io](https://codedthemes.gitbook.io/mantis/v1.1.0/)
   * Create a theme
     * Step 1 - Select **Color Styles**
     * Step 2 - Select **Local styles**
     * Step 3 - **Checkmark** the "Create multiple themes from ....."
     * Hit the **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. Go to 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 the Themer Dialog, select **Night** and hit the **Apply to selection** button for Dark Layout.
   3. From the Themer Dialog, select **Day** and hit the **Apply to selection** button for Light Layout.

{% hint style="warning" %}
It may take a longer loading time to apply styles using Themer Plugins, depending on the selected number 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/nextjs/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.