> For the complete documentation index, see [llms.txt](https://docs.uichemy.com/llms.txt).
> Use it to discover all available pages before exploring further.

# How to Tag The Dark Mode Widget for Figma to Elementor?

Tag a dark mode toggle in your Figma design as the Dark Mode widget from The Plus Addons for Elementor using UiChemy.


If you're showing a dark mode toggle in your Figma design, you can tag that element as the **Dark Mode** widget from The Plus Addons for Elementor using the UiChemy plugin. When you export the design as an Elementor template, that section will use the Dark Mode widget.

### What Can Be Tagged?

A frame can be tagged as a Dark Mode widget.

<Callout kind="info">
This is a tagging-only widget, it creates an unformatted widget after conversion so you can style and design it as needed, while still benefiting from the interactivity and features the widget provides.
</Callout>

### How to Tag?

To do this, you can choose between two options: **Step by Step Method** or **Quick Conversion**. Here, we'll go with the **Step by Step Method**.

1. First, select the **Step by Step Method** and click the **Start** button.
2. Select the top-level page or frame of your layout, then click the **Next** button.
3. Under the **Widget Tagging Mode** tab, select the **Manual Widget Tagging** option.
4. Next, under the **Manage Auto Layout** tab, you'll see two options: *It's already in Auto Layout* and *Convert to Auto Layout*. We'll go with the first option.
5. After that, under the **Tag Widgets** tab, choose the frame or container that contains your element (widget). Then search for the **Dark Mode** widget from **The Plus Widgets** in the UiChemy panel and select it. Here you'll see [all the supported Elementor widgets](/tagging-library/elementor/compatible-widgets).

On the next screen, you'll see information about which element you're tagging as which widget. For this widget, there are no tagging options.

6. Once done, click the **Save** button to complete the tagging, and you'll see a *Tagged successfully* message.

<video controls width="100%">
  <source src="https://res.cloudinary.com/ekxmy1t9/video/upload/v1782993278/uichemy-docs/tagging-library/plus-addons/dark-mode/tagging-demo.mp4" type="video/mp4" />
</video>

Now, if you export the design, that element will use the Dark Mode widget from The Plus Addons for Elementor.

![Exported Elementor template using the Dark Mode widget](https://res.cloudinary.com/ekxmy1t9/image/upload/v1782993283/uichemy-docs/tagging-library/plus-addons/dark-mode/export-result.gif)

<Callout kind="warning">
Make sure The Plus Addons for Elementor plugin is installed and activated, and that the widget itself is activated.
</Callout>
