Work with modes

Modes give the same variables alternative values, such as light and dark background colors. Your components keep using the same variable names while the values change with the mode.

In Design → Variables, each mode has a column. The Default badge identifies the mode that supplies the base values.

Understand inherited valuesCopy Anchor Link

Inheritance means a value follows the default, including later changes, until you add an override.

An override gives that variable a separate value in one mode. For example, a dark mode might override background and text colors while keeping the default spacing values.

An inherited value follows the default for the same variable. An alias follows a different variable.

Override a valueCopy Anchor Link

1. Open Design → Variables and find the variable.
2. In the mode you want to change, select Override for an inherited value.
3. Set the value for that mode. If the value is not directly editable, ask the agent to change it.

Later changes to the default no longer affect this override.

Select Reset to default to remove the override and resume following the default, including future changes.

Add a mode with the agentCopy Anchor Link

Ask the agent to add another mode and describe how the site should use it. For example:

Add a dark mode for the existing color variables and a theme switch visitors can use. Keep the current spacing in both modes.

After the agent finishes, check the mode's values in Variables and try the requested theme behavior on your site. Adding alternative values alone does not create a theme switch; include the behavior you want in the request.

Rename or delete a modeCopy Anchor Link

Open the mode's actions menu in its column heading and select Rename. Enter the new name and select Rename mode.

To remove a non-default mode, select Delete in that menu and confirm. Its variable overrides are removed, so check any site behavior that used the mode. The default mode has no Delete action.