FigmaHow-ToBeginner · 4 min read

How to Use Modes for Dark Theme in Figma: Simple Guide

In Figma, use Color Styles combined with Variants or Component Properties to create modes for dark themes. Set up your design components with light and dark color styles, then switch modes by toggling these styles or variants to apply the dark theme.

📐

Syntax

To use modes for dark theme in Figma, you typically create Color Styles for both light and dark colors. Then, you use Variants or Component Properties to switch between these modes.

Color Styles: Named colors like "Primary Light" and "Primary Dark".
Variants: Different versions of a component, e.g., "Light Mode" and "Dark Mode".
Component Properties: Toggles or dropdowns to switch modes inside components.

text

/* Example naming for Color Styles */
Primary / Light: #FFFFFF
Primary / Dark: #121212

/* Example Variant setup */
Component: Button
Variants: Light, Dark

/* Component Property */
Property: Mode
Values: Light, Dark

💻

Example

This example shows how to create a button component with light and dark modes using variants and color styles.

text

1. Create two Color Styles:
   - Light / Background: #FFFFFF
   - Dark / Background: #121212

2. Design a Button component with two variants:
   - Variant 1 (Light Mode): Use Light / Background color style
   - Variant 2 (Dark Mode): Use Dark / Background color style

3. Add a Component Property named "Mode" with options "Light" and "Dark".

4. Switch between modes by toggling the "Mode" property on the component instance.

Output

You will see the button background color change between white (light mode) and dark gray (dark mode) when toggling the Mode property.

⚠️

Common Pitfalls

Not using consistent Color Styles causes manual color changes everywhere.
Forgetting to link component variants to the Mode property makes switching modes impossible.
Mixing local colors and styles leads to inconsistent themes.
Not updating text colors for dark mode can reduce readability.

text

/* Wrong way: Using local colors directly */
Button background: #FFFFFF (light), #121212 (dark) hardcoded

/* Right way: Using Color Styles */
Button background: uses "Light / Background" or "Dark / Background" Color Style

📊

Quick Reference

Concept	Description	Example
Color Styles	Reusable named colors for themes	"Light / Background", "Dark / Background"
Variants	Component versions for modes	"Button Light", "Button Dark"
Component Properties	Toggle to switch modes	"Mode" property with "Light" and "Dark" values
Consistent Text Colors	Adjust text for readability	"Light / Text", "Dark / Text" Color Styles

✅

Key Takeaways

Use Color Styles to define light and dark colors consistently.

Create component variants to represent different modes.

Use component properties to toggle between light and dark themes easily.

Avoid hardcoding colors; always use styles for easy updates.

Adjust text colors for readability in dark mode.