Light / Dark Mode Toggle
by Ivo Karaneshev
Swtich color variables and component properties between Light Mode and Dark Mode
Installs
345
Likes
17
Users
4,430
Views
2,240
Preview
About this plugin
# Light / Dark Mode Toggle PluginA 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## 📋 RequirementsBefore using this plugin, ensure your Figma file is set up with:### 1. Color Variable OrganizationYour 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"
More editing & effects plugins plugins
View allMaterial Design Icons
Paidby Icons8
Instant easy access to the entire Material Design Icons library
Remove BG
Paidby Aaron Iker
Remove the background of images automatically with just a single click.
Content Reel
by Eugene Gavriloff
Design layouts more efficiently by pulling text strings, images, and icons.
Icons8 — icons, illustrations, photos
Paidby Icons8
All our graphics at your fingertips.