# Figma

### How to apply Dark/Light colors using Themer Plugins

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

#### Setup the Themer Plugin

1. Import & Open **Mantis-color-palette.fig** file into Figma.
2. Goto Menu -> Libraries -> Find and Publish Mantis-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 [jsonbin.io](https://app.gitbook.com/o/2J1IBUzHi24H65HzcoiV/s/uZg9PuGuaI7GwBrR4LA6/)
   * 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 **Mantis.fig** into Figma.
2. Goto Menu -> Libraries -> Find and **Activate** Mantis-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 %}