# Themes

## Overview

The **Themes Module** in Studio allows you to configure and manage T**heme groups** and T**heme options**, which directly impact the [**Tokens Module**](https://documentation.tokens.studio/platform/tokens) and [**Configuration Module**](https://documentation.tokens.studio/platform/configuration). This ensures a structured approach to managing design variations such as **light mode, dark mode**, or brand-specific themes.

<figure><img src="https://3657049418-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fy0SFXZjN1sdgdxYM7QPE%2Fuploads%2FtHGpn91ldC7ajFhbqOI4%2FTokens%20and%20Themes.png?alt=media&#x26;token=6a0fa1c6-95d0-45c6-bb2d-f6c522355c97" alt=""><figcaption></figcaption></figure>

## Accessing the Themes Module

1. **Navigate to Themes Module:**
   * From the **left panel**, click on **Themes** to enter the module.
2. **Understanding the Layout:**

   * The **left panel** displays a list of existing **theme groups** and their corresponding **theme options**.<br>

   <figure><img src="https://3657049418-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fy0SFXZjN1sdgdxYM7QPE%2Fuploads%2FHoNgLmuwRcG8IdcordEC%2FThemes%20Module%20New.png?alt=media&#x26;token=8f91299b-9a5d-425a-a3e1-fe02f5a37579" alt=""><figcaption></figcaption></figure>

   * Each theme option shows:
     * **Number of token sets configured**
     * **Number of variables connected to the option**<br>

   <figure><img src="https://3657049418-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fy0SFXZjN1sdgdxYM7QPE%2Fuploads%2FwkYMQkLLPVVxKNcJW0mB%2FThemes%20Module%20Options.png?alt=media&#x26;token=2cfd0e3a-eaf2-4c03-96e5-60bb56bc014a" alt=""><figcaption></figcaption></figure>

## Creating and Managing Theme Groups

### **Create a New Theme Group**

* Click on **Create Group**.
* Enter a **name** for the theme group.
* Click **Create** to save.

<figure><img src="https://3657049418-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fy0SFXZjN1sdgdxYM7QPE%2Fuploads%2FLLafWj398HWygpxXf2cg%2FCreate%20Theme%20Group.gif?alt=media&#x26;token=220c3f83-afac-437d-8b95-95e38f307118" alt=""><figcaption></figcaption></figure>

### **Adding Theme Options**

* Select a **theme group**.
* Click **Add Option** to create a new theme option.
* Save the changes.<br>

<figure><img src="https://3657049418-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fy0SFXZjN1sdgdxYM7QPE%2Fuploads%2FEUvRmwhIt89LGId2PnMx%2FSettings%20Theme%20Options.gif?alt=media&#x26;token=6014977e-fdef-4428-ae5c-6275028721da" alt=""><figcaption></figcaption></figure>

## Configuring Token Sets for Theme Options

1. **Select a Theme Option** from the **left panel**.
2. You will see all available **token sets**.
3. Assign token sets using one of the following states:
   * **Disabled:** The token set is not included in the theme option.
   * **Enabled:** All tokens in the set are included.
   * **Source:** This is primarily for **Figma Variables**, ensuring references between collections remain intact.

<figure><img src="https://3657049418-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fy0SFXZjN1sdgdxYM7QPE%2Fuploads%2FwkYMQkLLPVVxKNcJW0mB%2FThemes%20Module%20Options.png?alt=media&#x26;token=2cfd0e3a-eaf2-4c03-96e5-60bb56bc014a" alt=""><figcaption></figcaption></figure>

### How Themes Reflect in the Tokens Module

* Once you set up **theme groups** and **theme options**, they appear in the **Tokens Module**.
* Located at the **bottom left navigation**, you can see:
  * **Theme Groups** (e.g., Brand, Theme)
  * **Theme Options** (e.g., Light, Dark)

<figure><img src="https://3657049418-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fy0SFXZjN1sdgdxYM7QPE%2Fuploads%2FX8QjzouNqvq7fjL2lemR%2FThemes%20in%20Tokens%20Module.png?alt=media&#x26;token=4794806b-beb5-4782-9ef0-638d852c19e2" alt=""><figcaption></figcaption></figure>

## Themes in the Configuration Page

* Theme groups are used in the **Configuration Page** to ensure **token resolution** functions correctly across themes.s
* When Tokens Studio is **linked to the** [**Companion plugin**](https://documentation.tokens.studio/connect-studio-to-figma/using-companion-by-tokens-studio) **or** [**Tokens Studio for Figma**](https://documentation.tokens.studio/connect-studio-to-figma/using-tokens-studio-for-figma), theme groups translates as **Figma Variable collections**.&#x20;
* Theme **options** translate as **Modes** in **Figma Collections**.

### How Themes Reflect as Figma Variables

* Once you connect Studio to Figma via [**Tokens Studio for Figma plugin**](https://documentation.tokens.studio/connect-studio-to-figma/using-tokens-studio-for-figma) or [**Companion by Tokens Studio**](https://documentation.tokens.studio/connect-studio-to-figma/using-companion-by-tokens-studio)**,** you can create Figma variables using your design tokens.
* Theme groups are created as Collections in Figma variables (e.g., Brand, Theme).
* Theme options are created as Modes inside the variable Collection (e.g., Light, Dark).<br>

<figure><img src="https://3657049418-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fy0SFXZjN1sdgdxYM7QPE%2Fuploads%2FXmE0y9XXfDyfvG1gjs2E%2FCleanShot%202025-02-26%20at%2021.44.22%402x.png?alt=media&#x26;token=3f7f1180-26d9-47ea-8796-e71bc18f361e" alt=""><figcaption></figcaption></figure>

<figure><img src="https://3657049418-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fy0SFXZjN1sdgdxYM7QPE%2Fuploads%2F3dGxsk9SLGtEJYblvflL%2FCleanShot%202025-02-26%20at%2021.47.27%402x.png?alt=media&#x26;token=d3c3f38b-2074-4731-aacc-345153b4f74e" alt=""><figcaption></figcaption></figure>