Skip to content

Updated

Copy page

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.

Copy page

Updated

On this page
  1. In the kit
  2. Names
  3. In practice
  4. Related

In the kit

Where it appears in Appetite UI: Social media app, Chat. The theme switch shows the dark frame.

Chat393 x 852 each, Light and Dark
Social app Chat thread with Matteo Ribeiro, Online now: received and sent message bubbles with times, and a message field with camera, emoji and send buttonsSocial app Chat thread with Matteo Ribeiro in dark mode, Online now: received and sent message bubbles with times, and a message field with camera, emoji and send buttons
Chat

What does each system call it?

The same idea under its Apple, Material 3 and Appetite UI name.

Names, system, name
SystemName
AppleDark Mode
Material 3Dark theme
Appetite UIThe 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.