Figma Variable Modes for Light and Dark UI
Create semantic color variables with light and dark values, bind the design to them and test the relevant mode on a container. Theme readiness depends on state coverage and contrast decisions, not simply on reversing background and text colors.
Before you start: Have edit access and a plan that supports the number of modes required. Start with one representative screen and an agreed token naming scheme rather than converting an entire library at once.
Worked example: A billing card uses surface, primary text, muted text and error border tokens. Its failed-payment message must remain legible in both themes without manually overriding individual layers.
Step-by-step guide
Name semantic roles
List the colors by purpose: surface, text, border, accent and feedback. Keep the role separate from its current color so a theme change does not make token names misleading.
Build the mode values
Create the collection and mode values required for the two themes. Record any deliberate differences, such as a softer border or a distinct elevated surface, instead of copying light values blindly.
Bind the representative screen
Apply the variables to the selected design’s fills and other supported properties. Identify remaining hardcoded colors rather than assuming that creating the collection updates existing artwork automatically.
Set the container mode
Apply the intended mode to the test container and check nested objects. Explicit child modes can alter the result, so inspect inheritance when one element appears to ignore the theme.
Review interaction states
Compare default, focus, error, disabled and selected states. Include realistic content and images; a theme that works for an empty card may fail when a warning badge appears.
Hand off the mapping
Give the developer the semantic roles and any exceptional assets. Validate the implementation against those roles rather than asking for a pixel copy of a single themed frame.
Common mistakes
Color names instead of roles
A variable named white becomes confusing when its dark-mode value is dark. Use purpose-based names for themeable tokens.
Only checking default state
Focus rings and errors can disappear even when the main text looks fine. Review the state inventory in both themes.
Ignoring nested modes
A child with an explicit mode may not follow its parent. Inspect inheritance before creating another override.
Tips
Start with a small screen containing several semantic states.
Keep illustration theme requirements separate from color-token mapping.
Have accessibility review include contrast across interactive states.
Sources and verification
Based on product documentation checked on 2026-10-24. This is a documentation-based guide, not a hands-on benchmark. Features and availability can change.