Light / Dark Mode Toggle

About this plugin

# Light / Dark Mode Toggle Plugin

A Figma plugin that seamlessly switches color variables between Light Mode and Dark Mode groups and automatically sets component instance "Mode" properties.

## ✨ Features

- **Automatic Color Variable Switching**: Converts color variables between "Light Mode/" and "Dark Mode/" groups

- **Component Mode Updates**: Automatically sets component "Mode" properties to "Light" or "Dark"

- **Comprehensive Coverage**: Processes fills, strokes, text colors, effects (shadows), and paint styles

- **Recursive Processing**: Applies changes to selected elements and all their descendants

- **Real-time Selection**: Shows selection status and enables/disables controls accordingly

## 📋 Requirements

Before using this plugin, ensure your Figma file is set up with:

### 1. Color Variable Organization

Your color variables must be organized with the following naming convention:

- **Light Mode variables**: `Light Mode/[variable-name]` (e.g., `Light Mode/Background`, `Light Mode/Text Primary`)

- **Dark Mode variables**: `Dark Mode/[variable-name]` (e.g., `Dark Mode/Background`, `Dark Mode/Text Primary`)

### 2. Component Variants (Optional)

If you have components with light/dark variants, ensure they have:

- A variant property named "Mode" (case-insensitive)

- Variant values of "Light" and "Dark"