# 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://app.gitbook.com/o/2J1IBUzHi24H65HzcoiV/s/uZg9PuGuaI7GwBrR4LA6/)
   * 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 %}