# Dark mode

> Dark mode is a second set of values for the same color roles, chosen for a dark background. Done with tokens, it is one mode switch, not a second set of frames.

Page: https://www.appetiteui.com/academy/glossary/dark-mode. Dark mode design with Figma variables.

## At a glance

|  | iOS | Android (Material 3) | Appetite UI |
| --- | --- | --- | --- |
| Name | Dark Mode | Dark theme | The Dark mode of the Color Tokens collection |

## In practice

A dark theme is not an inverted light one: surfaces step lighter as they rise, text drops below pure white and brand colors move to a lighter step so they keep their contrast.

In Appetite UI every screen exists in Light and Dark because each frame pins the Color Tokens collection to one mode. The dark row of any screens page is the light layout with that one setting changed.

## Questions

### How do you design dark mode in Figma?

Give every color a semantic variable with a Light and a Dark value, bind components to the variables, then set the frame to the Dark mode. No frame is redrawn. That is how every Appetite UI screen has its dark twin.

### Is dark mode the light theme with inverted colors?

No. Surfaces step lighter as they rise instead of casting shadows, text sits below pure white, and brand colors move to a lighter step to keep their contrast on a dark ground.

## Sources

1. [Apple Human Interface Guidelines: Dark Mode](https://developer.apple.com/design/human-interface-guidelines/dark-mode)

## Related

- Docs: [Colors](https://www.appetiteui.com/docs/colors)
- Article: [Dark mode with Figma variables, not duplicate frames](https://www.appetiteui.com/blog/dark-mode-figma-variables)
- Glossary: [Variable modes](https://www.appetiteui.com/academy/glossary/variable-modes)
- Glossary: [Semantic tokens](https://www.appetiteui.com/academy/glossary/semantic-tokens)