Dark mode

Instructions

One of the most powerful features of variables in the shadcn/ui kit for Figma is the ability to add modes to your variable collections. This allows you to effortlessly switch designs between different contexts, such as light and dark modes, with just a single click.

The shadcn/ui kit for Figma comes pre-configured with both light and dark mode variables in the "3. Theme" variables collection. This means you can instantly transform your entire design from a light theme to a dark theme (and vice versa) without manually adjusting individual elements.

1. Select any page or frame in your Figma design.
2. Look for the "Change variables mode" icon in the Layer panel.
3. Click on this icon to reveal a dropdown menu.
4. Choose "Color modes" from the options.
5. Select either "3. Mode" > "Light" or "3. Mode" > "Dark" to instantly apply the change.