Carrier Appearance tab

Redesign of Settings › Appearance, with the theme store's chosen gallery (every theme as a card, click to use, expand on hover). Three layouts, every current control kept. Chosen: layout B with app icon selector 1.

What's wrong now

Four alignment systems on one tab: a card grid, a two-column accent/font block, an inline icon row, and a checkbox list.
"Open themes folder" and the custom.css hint sit inside the theme grid as if they were a card.
Light / dark lives in the Theme header, easy to miss, and reads like a gallery filter.
Section headers, labels and hints change style from block to block; nothing lines up on the right edge.
The tab is long, and the Display rows at the bottom have little to do with the look above them.

All three mocks are live: the tab scrolls (scrollbar always shown), cards select on click, and each card's expand button (hover, top left) opens a bigger preview.

ALive preview beside the controls

A fixed Messenger preview on the left with Light / Dark under it; everything else scrolls on the right.

GeneralAppearanceTray & StartupNotificationsPrivacyAccountAdvanced

Chats

Ingrid

Climbing group

Ola

Family

Ingrid

Are we still on for Saturday?Yes! 10:00 at the stationPerfect, see you

Preview follows your choices

SystemLightDark

Page zoom

Cmd/Ctrl + − / = / 0 also works.

100% ▾

Hide Top Menu

Settings stays on the gear button and F3.

System Emoji

Your system's emoji font instead of Facebook's.

Nicknames

Where Carrier shows real names instead.

Show nicknames ▾

Theme

✓

Default

Carrier

OLED Black

Carrier

Graphite

Carrier

Warm

Carrier

toanbku

Teams

toanbku

Google Chat

toanbku & Hlong-Dev

Slack

lyng148

GitHub

darkpiv

GitHub Split

darkpiv

Dark only

Terminal

darkpiv

Dark only

Terminal Green

darkpiv

Dark only

Terminal Amber

darkpiv

Dark only

Terminal CRT

darkpiv

+Add theme file…

Open themes foldercustom.css (Advanced) still applies last.

Accent color

Your messages, links, buttons and unread dots. The half-and-half swatch keeps the theme's own.

Message font

Default (Facebook's font) ▾

Messages and the message box.

App icon

ColorMonochrome

LightDarkMatch theme

Default

Messenger's own look

by Carrier · built in

LightDarkUse theme✕

Every choice shows its effect at once, even with the Messenger window hidden.
Light / dark sits with the thing it changes.
Distinctive.

The gallery gets three columns instead of five.
The preview is a drawing, not real Messenger; layout themes (Terminal, Slack) need their own preview art.
The settings above Theme sit beside a preview they don't affect.

BGrouped cards, one row grammarValgt

Each group is a card. Rows read label and hint on the left, control on the right, all on the same right edge. Light / Dark is the Theme card's own control.

GeneralAppearanceTray & StartupNotificationsPrivacyAccountAdvanced

Page zoom

Cmd/Ctrl + − / = / 0 also works.

100% ▾

Hide Top Menu

Settings stays on the gear button and F3.

System Emoji

Your system's emoji font instead of Facebook's.

Nicknames

Where Carrier shows real names instead.

Show nicknames ▾

Theme

SystemLightDark

✓

Default

Carrier

OLED Black

Carrier

Graphite

Carrier

Warm

Carrier

toanbku

Teams

toanbku

Google Chat

toanbku & Hlong-Dev

Slack

lyng148

GitHub

darkpiv

GitHub Split

darkpiv

Dark only

Terminal

darkpiv

Dark only

Terminal Green

darkpiv

Dark only

Terminal Amber

darkpiv

Dark only

Terminal CRT

darkpiv

+Add theme file…

Open themes foldercustom.css (Advanced) still applies last.

Accent color

Your messages, links, buttons and unread dots.

Message font

Messages and the message box.

Default (Facebook's font) ▾

App icon

Different icon in dark mode

Color

Color dark

Mono

Mono dark

Default

Messenger's own look

by Carrier · built in

LightDarkUse theme✕

One layout rule for every row: easy to scan, nothing floats.
Five-column gallery keeps full width.
Same grammar can roll out to the other tabs.
Lowest risk to build.

Still one long scroll.
Switches instead of checkboxes only make sense if every tab gets them.

CSub-sections inside the tab

A second row of tabs: Theme, Colors & font, App icon. Zoom, top menu, emoji and nicknames sit at the top of Theme. Click them in the live mock.

GeneralAppearanceTray & StartupNotificationsPrivacyAccountAdvanced

ThemeColors & fontApp icon

Page zoom

Cmd/Ctrl + − / = / 0 also works.

100% ▾

Hide Top Menu

Settings stays on the gear button and F3.

System Emoji

Your system's emoji font instead of Facebook's.

Nicknames

Where Carrier shows real names instead.

Show nicknames ▾

ThemeSystemLightDark

✓

Default

Carrier

OLED Black

Carrier

Graphite

Carrier

Warm

Carrier

toanbku

Teams

toanbku

Google Chat

toanbku & Hlong-Dev

Slack

lyng148

GitHub

darkpiv

GitHub Split

darkpiv

Dark only

Terminal

darkpiv

Dark only

Terminal Green

darkpiv

Dark only

Terminal Amber

darkpiv

Dark only

Terminal CRT

darkpiv

+Add theme file…

Open themes foldercustom.css (Advanced) still applies last.

Accent color

Your messages, links, buttons and unread dots.

Message font

Default (Facebook's font) ▾

Messages and the message box.

The quick brown fox jumps over the lazy dog

App icon

ColorMonochrome

LightDarkMatch theme

Default

Messenger's own look

by Carrier · built in

LightDarkUse theme✕

GeneralAppearanceTray & StartupNotificationsPrivacyAccountAdvanced

ThemeColors & fontApp icon

Page zoom

Cmd/Ctrl + − / = / 0 also works.

100% ▾

Hide Top Menu

Settings stays on the gear button and F3.

System Emoji

Your system's emoji font instead of Facebook's.

Nicknames

Where Carrier shows real names instead.

Show nicknames ▾

ThemeSystemLightDark

✓

Default

Carrier

OLED Black

Carrier

Graphite

Carrier

Warm

Carrier

toanbku

Teams

toanbku

Google Chat

toanbku & Hlong-Dev

Slack

lyng148

GitHub

darkpiv

GitHub Split

darkpiv

Dark only

Terminal

darkpiv

Dark only

Terminal Green

darkpiv

Dark only

Terminal Amber

darkpiv

Dark only

Terminal CRT

darkpiv

+Add theme file…

Open themes foldercustom.css (Advanced) still applies last.

Accent color

Your messages, links, buttons and unread dots.

Message font

Default (Facebook's font) ▾

Messages and the message box.

The quick brown fox jumps over the lazy dog

App icon

ColorMonochrome

LightDarkMatch theme

Default

Messenger's own look

by Carrier · built in

LightDarkUse theme✕

Colors & font

GeneralAppearanceTray & StartupNotificationsPrivacyAccountAdvanced

ThemeColors & fontApp icon

Page zoom

Cmd/Ctrl + − / = / 0 also works.

100% ▾

Hide Top Menu

Settings stays on the gear button and F3.

System Emoji

Your system's emoji font instead of Facebook's.

Nicknames

Where Carrier shows real names instead.

Show nicknames ▾

ThemeSystemLightDark

✓

Default

Carrier

OLED Black

Carrier

Graphite

Carrier

Warm

Carrier

toanbku

Teams

toanbku

Google Chat

toanbku & Hlong-Dev

Slack

lyng148

GitHub

darkpiv

GitHub Split

darkpiv

Dark only

Terminal

darkpiv

Dark only

Terminal Green

darkpiv

Dark only

Terminal Amber

darkpiv

Dark only

Terminal CRT

darkpiv

+Add theme file…

Open themes foldercustom.css (Advanced) still applies last.

Accent color

Your messages, links, buttons and unread dots.

Message font

Default (Facebook's font) ▾

Messages and the message box.

The quick brown fox jumps over the lazy dog

App icon

ColorMonochrome

LightDarkMatch theme

Default

Messenger's own look

by Carrier · built in

LightDarkUse theme✕

App icon

No long scroll; the gallery gets the whole pane.
Room for a font sample and bigger icon choices.

Tabs inside tabs.
Accent and font are a click away from the theme they recolor.
Settings search, if added later, has to reach into panes.

App icon selector

Today: two small pills (30px icons) and a separate Light / Dark / Match theme switch. You never see the icon you'll get, and style and variant are picked in two places. Shown as the row in B; fits A and C the same way.

1All four icons, one clickValgt

Off: one icon everywhere. Pick it.

App icon

Different icon in dark mode

Color

Color dark

Mono

Mono dark

On: one row per mode. Pick the icon Carrier uses in light mode and the one it uses in dark mode; any pair works (here Color in light, Mono dark in dark).

App icon

Different icon in dark mode

Light mode

Color

Color dark

Mono

Mono dark

Dark mode

Color

Color dark

Mono

Mono dark

What you click is exactly the icon you get, in each mode.
Any combination, not just a style's own pair.

On, the row is tall (two rows of icons).
The setting changes shape: one icon for light and one for dark, instead of style plus variant. Today's choices map over directly.

2Two styles, each showing light and dark

App icon

Color

Monochrome

LightDarkMatch theme

Same model as today, but you see both variants of each style.

Still two controls; which of the pair you get depends on the switch below.

3Dock preview

How it looks in the Dock, with the unread badge

App icon

Color

Monochrome

LightDarkMatch theme

Shows the icon in context, at real size, with the badge.

Most space; the Dock drawing is macOS-only (taskbars differ).
Still two controls.

Applies to any option

Theme cards: click uses the theme (downloading it the first time); expand on hover; the selected card has the blue ring and check. "Add theme file…" is the last card; "Open themes folder" and the custom.css note sit under the grid, not in it.
Accent: "Theme" (the theme's own accent), seven presets, Custom.
No Display heading: zoom, top menu, system emoji and nicknames sit above Theme as one compact group, short enough that the Theme header and first row of cards stay above the fold.
Nicknames become one dropdown (Show nicknames, Real names in one-to-one chats, in group chats, everywhere): the same four states as the two checkboxes, in one row.
Linux keeps its Title bar row in that group; macOS has no Hide Top Menu row.
Stop Media Autoplay moves to General: it changes how media behaves, not how anything looks.

Open questions

Switches (B, A) instead of checkboxes: only together with the other tabs?