Carrier: themes and app icon

Static mocks for #357 (theme gallery, import, OLED black, accent color, font) and #369 (choose the app icon, with a dark variant). Pick one option per section. Theme names and the imported example are placeholders; all previews are drawn, not screenshots.

#357 ThemesA theme is a palette on top of light or dark, never a third mode. Forced light/dark keeps working exactly as today.

1. Built-in themes

Five built-ins, each a small Messenger preview (conversation list plus thread). Names say what the theme looks like. OLED Black only exists in dark; in light mode Carrier falls back to Default and its card says "Dark only". High Contrast is cheap to add and helps accessibility; drop it if five is too many.

DefaultMessenger's own colors

Chats

Search Messenger

Ingrid SolbergPerfect, I'll do dessert · 2m

Book clubSam: Chapter 9 tonight? · 14m

DadYou: Call you after work · 1h

Mira HaugSent a photo · 3h

Climbing crewOla: Saturday 10:00 · Fri

Ingrid Solberg

Today 18:42

Are we still on for Friday?

Yes! Dinner at 7 at mine

Bringing the good bread

Perfect, I'll do dessert

Light

Chats

Search Messenger

Ingrid SolbergPerfect, I'll do dessert · 2m

Book clubSam: Chapter 9 tonight? · 14m

DadYou: Call you after work · 1h

Mira HaugSent a photo · 3h

Climbing crewOla: Saturday 10:00 · Fri

Ingrid Solberg

Today 18:42

Are we still on for Friday?

Yes! Dinner at 7 at mine

Bringing the good bread

Perfect, I'll do dessert

Dark

OLED BlackDark only. Pure black surfaces

Dark only. In light mode Carrier shows Default.

Light

Chats

Search Messenger

Ingrid SolbergPerfect, I'll do dessert · 2m

Book clubSam: Chapter 9 tonight? · 14m

DadYou: Call you after work · 1h

Mira HaugSent a photo · 3h

Climbing crewOla: Saturday 10:00 · Fri

Ingrid Solberg

Today 18:42

Are we still on for Friday?

Yes! Dinner at 7 at mine

Bringing the good bread

Perfect, I'll do dessert

Dark

GraphiteNeutral grays, no color

Chats

Search Messenger

Ingrid SolbergPerfect, I'll do dessert · 2m

Book clubSam: Chapter 9 tonight? · 14m

DadYou: Call you after work · 1h

Mira HaugSent a photo · 3h

Climbing crewOla: Saturday 10:00 · Fri

Ingrid Solberg

Today 18:42

Are we still on for Friday?

Yes! Dinner at 7 at mine

Bringing the good bread

Perfect, I'll do dessert

Light

Chats

Search Messenger

Ingrid SolbergPerfect, I'll do dessert · 2m

Book clubSam: Chapter 9 tonight? · 14m

DadYou: Call you after work · 1h

Mira HaugSent a photo · 3h

Climbing crewOla: Saturday 10:00 · Fri

Ingrid Solberg

Today 18:42

Are we still on for Friday?

Yes! Dinner at 7 at mine

Bringing the good bread

Perfect, I'll do dessert

Dark

WarmPaper tones, terracotta accent

Chats

Search Messenger

Ingrid SolbergPerfect, I'll do dessert · 2m

Book clubSam: Chapter 9 tonight? · 14m

DadYou: Call you after work · 1h

Mira HaugSent a photo · 3h

Climbing crewOla: Saturday 10:00 · Fri

Ingrid Solberg

Today 18:42

Are we still on for Friday?

Yes! Dinner at 7 at mine

Bringing the good bread

Perfect, I'll do dessert

Light

Chats

Search Messenger

Ingrid SolbergPerfect, I'll do dessert · 2m

Book clubSam: Chapter 9 tonight? · 14m

DadYou: Call you after work · 1h

Mira HaugSent a photo · 3h

Climbing crewOla: Saturday 10:00 · Fri

Ingrid Solberg

Today 18:42

Are we still on for Friday?

Yes! Dinner at 7 at mine

Bringing the good bread

Perfect, I'll do dessert

Dark

High ContrastStronger text and borders

Chats

Search Messenger

Ingrid SolbergPerfect, I'll do dessert · 2m

Book clubSam: Chapter 9 tonight? · 14m

DadYou: Call you after work · 1h

Mira HaugSent a photo · 3h

Climbing crewOla: Saturday 10:00 · Fri

Ingrid Solberg

Today 18:42

Are we still on for Friday?

Yes! Dinner at 7 at mine

Bringing the good bread

Perfect, I'll do dessert

Light

Chats

Search Messenger

Ingrid SolbergPerfect, I'll do dessert · 2m

Book clubSam: Chapter 9 tonight? · 14m

DadYou: Call you after work · 1h

Mira HaugSent a photo · 3h

Climbing crewOla: Saturday 10:00 · Fri

Ingrid Solberg

Today 18:42

Are we still on for Friday?

Yes! Dinner at 7 at mine

Bringing the good bread

Perfect, I'll do dessert

Dark

2. Where it lives in Settings

Settings is a 680 by 720 window with five stacked-icon tabs: General, Appearance, Tray & Startup, Notifications, Advanced. Appearance holds Theme, Page zoom, Hide Names & Avatars, System Emoji, Stop Media Autoplay and nickname options today. Mocks use Settings' dark palette with Mode set to Dark and Graphite selected.

AGallery inside AppearanceTheme, accent, font and app icon at the top of the existing tabAnbefalt

Carrier Settings

Theme

Light or darkSystemLightDark

Chats

Search Messenger

Ingrid SolbergPerfect, I'll do dessert · 2m

Book clubSam: Chapter 9 tonight? · 14m

DadYou: Call you after work · 1h

Mira HaugSent a photo · 3h

Climbing crewOla: Saturday 10:00 · Fri

Ingrid Solberg

Today 18:42

Are we still on for Friday?

Yes! Dinner at 7 at mine

Bringing the good bread

Perfect, I'll do dessert

Default

Light and dark

Chats

Search Messenger

Ingrid SolbergPerfect, I'll do dessert · 2m

Book clubSam: Chapter 9 tonight? · 14m

DadYou: Call you after work · 1h

Mira HaugSent a photo · 3h

Climbing crewOla: Saturday 10:00 · Fri

Ingrid Solberg

Today 18:42

Are we still on for Friday?

Yes! Dinner at 7 at mine

Bringing the good bread

Perfect, I'll do dessert

OLED Black

Dark only

Chats

Search Messenger

Ingrid SolbergPerfect, I'll do dessert · 2m

Book clubSam: Chapter 9 tonight? · 14m

DadYou: Call you after work · 1h

Mira HaugSent a photo · 3h

Climbing crewOla: Saturday 10:00 · Fri

Ingrid Solberg

Today 18:42

Are we still on for Friday?

Yes! Dinner at 7 at mine

Bringing the good bread

Perfect, I'll do dessert

Graphite

Light and dark

Chats

Search Messenger

Ingrid SolbergPerfect, I'll do dessert · 2m

Book clubSam: Chapter 9 tonight? · 14m

DadYou: Call you after work · 1h

Mira HaugSent a photo · 3h

Climbing crewOla: Saturday 10:00 · Fri

Ingrid Solberg

Today 18:42

Are we still on for Friday?

Yes! Dinner at 7 at mine

Bringing the good bread

Perfect, I'll do dessert

Warm

Light and dark

Chats

Search Messenger

Ingrid SolbergPerfect, I'll do dessert · 2m

Book clubSam: Chapter 9 tonight? · 14m

DadYou: Call you after work · 1h

Mira HaugSent a photo · 3h

Climbing crewOla: Saturday 10:00 · Fri

Ingrid Solberg

Today 18:42

Are we still on for Friday?

Yes! Dinner at 7 at mine

Bringing the good bread

Perfect, I'll do dessert

High Contrast

Light and dark

Chats

Search Messenger

Ingrid SolbergPerfect, I'll do dessert · 2m

Book clubSam: Chapter 9 tonight? · 14m

DadYou: Call you after work · 1h

Mira HaugSent a photo · 3h

Climbing crewOla: Saturday 10:00 · Fri

Ingrid Solberg

Today 18:42

Are we still on for Friday?

Yes! Dinner at 7 at mine

Bringing the good bread

Perfect, I'll do dessert

Fjord

by ingrid · Remove

Add theme…

A .css theme file

Open themes folder·How to make a theme

Accent color

Your messages, links, buttons and unread dots.

Default (Facebook's font)

Message font

Font for messages and the conversation list. Pick any installed font.

App icon

Paper planeMonochromeRing

Light or dark iconMatch themeLightDark

The unread badge shows on every icon.

Display

100%

Page zoom

Scale the Messenger page (Cmd/Ctrl + − / = / 0 also works).

Hide Names & Avatars

Blur contact names and avatars in the conversation list (Cmd/Ctrl+Shift+H).

System Emoji

Render emoji with your system's emoji font instead of Facebook's.

Stop Media Autoplay

Pause videos and GIFs that start automatically. Manual playback still works.

Bottom of the window at its default 720px height

Pros

Everything about looks stays in one tab, which is where #369 already puts the app icon
Cards show each theme's real list and thread, so picking is visual
No new tab; the strip stays at five
Import is just one more card in the grid

Cons

Appearance gets long; the old rows move below the fold
Thumbnails are small (about 180px), so accent and font changes are hard to judge there
Light or dark moves from a dropdown to a segmented control (a small visual change)

Details. "Light or dark" replaces today's Theme dropdown with the same three values. Cards follow the current mode; with Light chosen, OLED Black dims. The selected card has a ring and check. An imported card shows its author and a Remove link. The accent "Theme" swatch means: use the theme's own accent.

BNew Themes tab with a large previewSixth tab; Appearance keeps zoom, emoji and privacy rows

Carrier Settings

Chats

Search Messenger

Ingrid SolbergPerfect, I'll do dessert · 2m

Book clubSam: Chapter 9 tonight? · 14m

DadYou: Call you after work · 1h

Mira HaugSent a photo · 3h

Climbing crewOla: Saturday 10:00 · Fri

Ingrid Solberg

Today 18:42

Are we still on for Friday?

Yes! Dinner at 7 at mine

Bringing the good bread

Perfect, I'll do dessert

Preview: Graphite, dark, Teal accent

Light or darkSystemLightDark

DefaultOLED BlackGraphiteWarmHigh ContrastFjordRemove

Add theme…Open themes folder

Accent color

Default (Facebook's font)

Message font

Font for messages and the conversation list. Pick any installed font.

Bottom of the window at its default 720px height

Pros

Large live preview shows accent and font clearly before you close Settings
Appearance stays short and unchanged
Compact chips scale to many imported themes

Cons

Six tabs; labels get tighter, and Themes vs Appearance is a fuzzy split
Chips only show five colors, not the layout
The preview is Carrier's drawing, not Messenger itself, so it can drift from the real page

CCompact rows with a theme sheetKeeps today's row style; the gallery opens on demand

Carrier Settings

Dark

Light or dark

Force light or dark, or follow your system.

Graphite

Theme

Colors on top of light or dark. Browse themes…

Theme

Accent color

Your messages, links, buttons and unread dots.

Default

Message font

Font for messages and the conversation list. Pick any installed font.

Paper plane

App icon

Dock and taskbar icon. Light or dark: Match theme

Display

100%

Page zoom

Scale the Messenger page (Cmd/Ctrl + − / = / 0 also works).

Hide Names & Avatars

Blur contact names and avatars in the conversation list (Cmd/Ctrl+Shift+H).

System Emoji

Render emoji with your system's emoji font instead of Facebook's.

Stop Media Autoplay

Pause videos and GIFs that start automatically. Manual playback still works.

Carrier Settings

Dark

Light or dark

Force light or dark, or follow your system.

Graphite

Theme

Colors on top of light or dark.

Display

100%

Page zoom

Scale the Messenger page (Cmd/Ctrl + − / = / 0 also works).

Hide Names & Avatars

Blur contact names and avatars in the conversation list (Cmd/Ctrl+Shift+H).

System Emoji

Render emoji with your system's emoji font instead of Facebook's.

Stop Media Autoplay

Pause videos and GIFs that start automatically. Manual playback still works.

Choose a themeLightDark

Chats

Search Messenger

Ingrid SolbergPerfect, I'll do dessert · 2m

Book clubSam: Chapter 9 tonight? · 14m

DadYou: Call you after work · 1h

Mira HaugSent a photo · 3h

Climbing crewOla: Saturday 10:00 · Fri

Ingrid Solberg

Today 18:42

Are we still on for Friday?

Yes! Dinner at 7 at mine

Bringing the good bread

Perfect, I'll do dessert

Default

Light and dark

Chats

Search Messenger

Ingrid SolbergPerfect, I'll do dessert · 2m

Book clubSam: Chapter 9 tonight? · 14m

DadYou: Call you after work · 1h

Mira HaugSent a photo · 3h

Climbing crewOla: Saturday 10:00 · Fri

Ingrid Solberg

Today 18:42

Are we still on for Friday?

Yes! Dinner at 7 at mine

Bringing the good bread

Perfect, I'll do dessert

OLED Black

Dark only

Chats

Search Messenger

Ingrid SolbergPerfect, I'll do dessert · 2m

Book clubSam: Chapter 9 tonight? · 14m

DadYou: Call you after work · 1h

Mira HaugSent a photo · 3h

Climbing crewOla: Saturday 10:00 · Fri

Ingrid Solberg

Today 18:42

Are we still on for Friday?

Yes! Dinner at 7 at mine

Bringing the good bread

Perfect, I'll do dessert

Graphite

Light and dark

Chats

Search Messenger

Ingrid SolbergPerfect, I'll do dessert · 2m

Book clubSam: Chapter 9 tonight? · 14m

DadYou: Call you after work · 1h

Mira HaugSent a photo · 3h

Climbing crewOla: Saturday 10:00 · Fri

Ingrid Solberg

Today 18:42

Are we still on for Friday?

Yes! Dinner at 7 at mine

Bringing the good bread

Perfect, I'll do dessert

Warm

Light and dark

Chats

Search Messenger

Ingrid SolbergPerfect, I'll do dessert · 2m

Book clubSam: Chapter 9 tonight? · 14m

DadYou: Call you after work · 1h

Mira HaugSent a photo · 3h

Climbing crewOla: Saturday 10:00 · Fri

Ingrid Solberg

Today 18:42

Are we still on for Friday?

Yes! Dinner at 7 at mine

Bringing the good bread

Perfect, I'll do dessert

High Contrast

Light and dark

Chats

Search Messenger

Ingrid SolbergPerfect, I'll do dessert · 2m

Book clubSam: Chapter 9 tonight? · 14m

DadYou: Call you after work · 1h

Mira HaugSent a photo · 3h

Climbing crewOla: Saturday 10:00 · Fri

Ingrid Solberg

Today 18:42

Are we still on for Friday?

Yes! Dinner at 7 at mine

Bringing the good bread

Perfect, I'll do dessert

Fjord

by ingrid · Remove

Add theme…Open themes folderDone

Pros

Smallest change to Settings; every row looks like today's
Gallery gets the whole window when open
Easy to build with the existing selectRow helper

Cons

Themes are hidden behind a click, which undercuts the point of a gallery
Modal sheet inside a small window is cramped and new to Settings
Accent and icon pickers become popovers, which are fiddly on Linux webviews

3. Accent color, font and import

The same controls work in any layout above.

Accent colorSeven presets, the theme's own accent, and a system color picker

ThemeBluePurplePinkRedOrangeGreenTealCustom…

Chats

Search Messenger

Ingrid SolbergPerfect, I'll do dessert · 2m

Book clubSam: Chapter 9 tonight? · 14m

DadYou: Call you after work · 1h

Mira HaugSent a photo · 3h

Climbing crewOla: Saturday 10:00 · Fri

Ingrid Solberg

Today 18:42

Are we still on for Friday?

Yes! Dinner at 7 at mine

Bringing the good bread

Perfect, I'll do dessert

Blue

Chats

Search Messenger

Ingrid SolbergPerfect, I'll do dessert · 2m

Book clubSam: Chapter 9 tonight? · 14m

DadYou: Call you after work · 1h

Mira HaugSent a photo · 3h

Climbing crewOla: Saturday 10:00 · Fri

Ingrid Solberg

Today 18:42

Are we still on for Friday?

Yes! Dinner at 7 at mine

Bringing the good bread

Perfect, I'll do dessert

Purple

Chats

Search Messenger

Ingrid SolbergPerfect, I'll do dessert · 2m

Book clubSam: Chapter 9 tonight? · 14m

DadYou: Call you after work · 1h

Mira HaugSent a photo · 3h

Climbing crewOla: Saturday 10:00 · Fri

Ingrid Solberg

Today 18:42

Are we still on for Friday?

Yes! Dinner at 7 at mine

Bringing the good bread

Perfect, I'll do dessert

Pink

Chats

Search Messenger

Ingrid SolbergPerfect, I'll do dessert · 2m

Book clubSam: Chapter 9 tonight? · 14m

DadYou: Call you after work · 1h

Mira HaugSent a photo · 3h

Climbing crewOla: Saturday 10:00 · Fri

Ingrid Solberg

Today 18:42

Are we still on for Friday?

Yes! Dinner at 7 at mine

Bringing the good bread

Perfect, I'll do dessert

Red

Accent sets --accent and the outgoing bubble color, so it recolors your messages, header and composer icons, links and unread dots. Custom… opens the system color picker (native input). It applies on top of any theme, including imported ones.

Message fontSearchable list of installed fonts, each drawn in its own face

Search fonts

Default (Facebook's font)

Inter

Atkinson Hyperlegible

IBM Plex Sans

Lora

142 more installed fonts

Chats

Search Messenger

Ingrid SolbergPerfect, I'll do dessert · 2m

Book clubSam: Chapter 9 tonight? · 14m

DadYou: Call you after work · 1h

Mira HaugSent a photo · 3h

Climbing crewOla: Saturday 10:00 · Fri

Ingrid Solberg

Today 18:42

Are we still on for Friday?

Yes! Dinner at 7 at mine

Bringing the good bread

Perfect, I'll do dessert

Atkinson Hyperlegible on Default, light

Applies to messages, the conversation list and the composer. Size stays with Page zoom. fMess also lets you add a .ttf or .otf file; leave that out until someone asks.

Import, remove and errors"Add theme…" opens a file picker; Carrier validates, copies and selects

Couldn't add neon.cssLine 14 loads a file from the web: url(https://…). Themes can only use data: URLs, so they can't load or send anything.

Dismiss

Added FjordSaved to the themes folder and selected. Edit the file and reload (Cmd/Ctrl+R) to see changes.

Messages say which line failed and why. Imported themes live in Carrier's data folder ("Open themes folder"); edits show after a reload. custom.css keeps working and still applies last.

4. Theme file format

fMess (MIT) already has a working format: one CSS file, a header comment with a name and five preview colors (window, list, chat, your bubble, theirs), at most 2 MB, no @import, and only data: URLs. It ships a starter recolor file and a coding-agent skill that builds themes from screenshots. The cards in section 2 already use the five-color idea, so imported themes get a preview without screenshots.

ASame header and rules as fMess, Carrier hooksAccept /* Carrier theme */ and /* fMess theme */ headersAnbefalt

/* Carrier theme
   name: Fjord
   author: ingrid
   preview: #242933 #2e3440 #2e3440 #5e81ac #3b4252
*/
:root { --my-brand: #5e81ac; … }
html[data-carrier-dark] { --my-brand: #88c0d0; … }

Pros

fMess recolor themes (starter-style) import as-is if Carrier also sets data-fmess-dark next to data-carrier-dark
Proven safety rules; no need to design our own
We can adapt their skill into a carrier-theme skill and a starter.css, with credit

Cons

Ties a small part of Carrier to another app's hook name
fMess's app-copy themes (Teams, WhatsApp) rely on their markup marks and will only partly work; say so in the import error or docs

BCarrier-only formatOwn header keys (name, author, modes) and only data-carrier hooks

Pros

No outside dependency; we choose every name
Can require an explicit modes field from day one

Cons

Nobody's existing themes work
We still end up reinventing the same validation rules

#369 App iconEach direction has a light and a dark tile. Shown at Dock and taskbar size, on light and dark desktops, with the unread badge.

5. Icon directions

All four are original Carrier marks built on today's paper plane; none uses a speech bubble or Facebook's or Messenger's shapes or colors. Neighbor icons are neutral placeholders.

APaper plane, refinedToday's icon, plus a dark tileAnbefalt

Light

Dark

macOS Dock, with the unread badge

Light icon, light desktop

Dark icon, light desktop

Light icon, dark desktop

Dark icon, dark desktop

Windows taskbar (24px, badge overlay) and small sizes

16px32px

Pros

Keeps the icon people already know
Dark tile reads well in a dark Dock and on OLED Black
Least work: same geometry, two palettes

Cons

Not a visible change for people who want a new look
Gradient plane on dark is lower contrast at 16px

BMonochrome planeInk on white, white on black

Light

Dark

macOS Dock, with the unread badge

Light icon, light desktop

Dark icon, light desktop

Light icon, dark desktop

Dark icon, dark desktop

Windows taskbar (24px, badge overlay) and small sizes

16px32px

Pros

Quiet; fits Graphite, OLED Black and tinted macOS Docks
Sharpest at 16px: one shape, full contrast
Pairs naturally with the existing monochrome tray icon

Cons

Light variant can disappear on a light Dock without its border
Loses the brand color

CRing and planeA loop that ends in a small plane

Light

Dark

macOS Dock, with the unread badge

Light icon, light desktop

Dark icon, light desktop

Light icon, dark desktop

Dark icon, dark desktop

Windows taskbar (24px, badge overlay) and small sizes

16px32px

Pros

Most distinctive silhouette in a crowded Dock
Reads as a 'C' for Carrier without a letterform
Keeps the brand gradient

Cons

Small plane gets lost below 32px
New mark to maintain at every size (icns, ico, tray)

DFolded paperOrigami facets on warm amber

Light

Dark

macOS Dock, with the unread badge

Light icon, light desktop

Dark icon, light desktop

Light icon, dark desktop

Dark icon, dark desktop

Windows taskbar (24px, badge overlay) and small sizes

16px32px

Pros

Clearly different from the default, good as an alternative
Warm palette pairs with the Warm theme
Facets add depth without a glossy look

Cons

Orange is far from Carrier's blue-violet brand
Extra facet blurs at 16px

6. App icon picker in Settings

Lives in Appearance (or the Themes tab in layout B). macOS swaps the running Dock icon; Windows the taskbar and window icon; on Linux only the window icon changes and the launcher keeps the installed one, so the hint says so there.

AOne tile per iconMatch theme tile plus each light and dark icon

App icon

Match themePaper planePaper plane, darkMonochromeMonochrome, darkRingRing, dark

Pros

Every choice visible at once, one click
Matches how the issue phrases it (bundled icons plus Follow theme)

Cons

Doubles with each new style; three styles already make seven tiles
Match theme is a tile that can't show which family it follows

BStyle tiles plus a light/dark switchPick the look, then Match theme, Light or DarkAnbefalt

App icon

Paper planeMonochromeRing

Light or dark iconMatch themeLightDark

The unread badge shows on every icon.

Pros

Scales cleanly as styles are added
Match theme works for every style, and follows the light/dark setting above it
Tiles show the variant you'll actually get

Cons

Two controls instead of one
Slightly more state to persist (style and variant)

Linux hint under the picker: "Changes the window icon. Your app launcher keeps the installed icon."

Recommendations

Themes: ship Default, OLED Black, Graphite and Warm; High Contrast if we want an accessibility option.
Layout A: gallery, accent, font and app icon at the top of Appearance. No new tab; existing rows move under a Display heading.
Format A: reuse fMess's header and safety rules, set data-fmess-dark alongside Carrier's hook, and adapt their skill into a Carrier theme skill.
Icons: direction A (today's plane plus a dark tile) as the default family. Bundle B (Monochrome) as the second style; C and D only if a more distinctive alternative is wanted.
Picker B: style tiles plus Match theme / Light / Dark.