Skip to content
Components
/
Settings
Dark

Settings

Three settings screens, drawn light and dark. Seventeen of the twenty nine placed instances are one component, which is why changing List changes the whole settings area.

Preview

Three screens for the part of an app nobody demos. A settings menu, a selection list carrying toggles, and an account form. Two of the three are almost entirely one component.

Settings, three screens, light and dark
393 x 852 each, Platform ios-md
Settings app, menu screen, lightSettings app, menu screen, dark
Menu
Settings app, selection screen, lightSettings app, selection screen, dark
Selection
Settings app, account setup screen, lightSettings app, account setup screen, dark
Account setup

The set is drawn twice in Figma, a light row and a dark row, with Color Tokens set explicitly on every frame rather than inherited from the page. The dark screens are not a second drawing. They are the same instances resolved against the other mode.

What it is built from

Seventy seven instances across three screens. Thirty eight are Appetite components, thirty seven are Lucide icons, two are brand assets. Seven distinct components carry the whole set.

Component
Placed
Nested
Where
17
0
Menu and Selection
3
0
All three screens
3
0
All three screens
3
0
Account Setup
2
5
All three, nested inside Top Bar
0
4
Selection, inside List rows
1
0
Account Setup

List carries seventeen of the twenty nine placed instances, and the twelve chevrons, four Toggles and every leading glyph sit inside it. That is the argument in one number: change List and the settings area changes, because the screen is a set of content decisions rather than a drawing. Lucide supplies twenty distinct icons thirty seven times. Assets supplies the Apple mark and one flag set.

Tokens

Six collections behind the three screens. Switching one mode is the entire dark mode step.

Collection
Modes
What it drives here
Color Tokens
Light, Dark
Surfaces, labels, row separators, Toggle tracks
Foundations
Default
Row height, group spacing, radius
Typography
Default
Row labels, values and group headings
Platform
ios-md, ios-lg, android
Status bar and platform metrics, set to ios-md
Platform Bridge
Brand, System
Available, not exercised by this set
Motion
Default
Available, not exercised by a still export

The last two rows are listed because they are part of the same source, not because a flat screen uses them. Worth checking if you are auditing your own file: even the hand drawn separators here have their stroke bound to a variable, so the whole set survives a mode switch without a single hardcoded colour.