#357 Theme gallery, theme import, OLED black, accent color and font

[Anonymous]

Originally created by: kristofferR

Problem

Carrier offers light, dark and system plus a single custom.css (#88). Themes are the main way rivals differentiate. fMess ships named looks (Zalo, WhatsApp, Teams, each light and dark) with preview cards, a "Settings → Theme → Add…" importer, a theme kit (fMess PR [#44]), a font picker (v0.1.35, fMess [#42]), and users ask for more (fMess [#33]). Other apps ship an OLED true-black theme and a custom accent color.

Design

• Theme file format: a single .css file with a small metadata header (name, author, supports light/dark/both). Themes only override Messenger's CSS custom properties plus a documented set of Carrier hooks, so they survive Facebook markup changes better than selector-based CSS.
• Built-in themes: start with OLED black and two or three distinct looks. Keep the forced light/dark mechanics exactly as they are (see the macOS theme section in CLAUDE.md); a theme is a palette on top of the chosen mode, not a new mode.
• Accent color: a color picker that sets the accent variables.
• Font: pick any installed font for message text, or the default.
• Settings UI: a gallery with preview swatches, "Add theme…" import, remove, and an "Open themes folder" button. custom.css keeps working and applies last.

Testing

Each built-in theme in light and dark on all three platforms: conversation list, thread, composer, media viewer, Carrier's own toasts and menus, login page. Importing a malformed file fails with a clear message.

Part of [#349].

Final design (approved)

Mocks: https://plans.kristofferr.com/d/6apevwctfhig/v/7

• Settings window: widen it from 680 to 900 px, keeping the 720 px height and a 720×620 minimum. Keep the six tabs (General, Appearance, Tray & Startup, Notifications, Privacy, Advanced).
• Appearance tab, top to bottom:
• Light or dark: a switch (System / Light / Dark).
• Theme gallery: four columns, with Default, OLED Black (dark only), Graphite, Warm and High Contrast, then any imported themes. It ends with an "Add theme…" card linking to the themes folder and a "how to make a theme" page.
• Accent color: seven presets, plus "Theme" (use the theme's own accent) and "Custom…".
• Message font: any installed font.
• App icon: see [#369].
• Display: page zoom, System Emoji, Stop Media Autoplay and the nickname options.
• High Contrast: it also turns on by itself when the system asks for more contrast: Increase contrast on macOS, contrast themes on Windows, and the desktop's contrast preference on Linux. Use the page's prefers-contrast where the webview reports it, and otherwise read the OS setting natively.
• Theme files:
• Format: one CSS file whose header comment gives a name, an optional author, five preview colors and an optional mode: light.
• Limits: at most 2 MB, no @import, and only data: URLs.
• Compatibility: themes written for other Messenger apps with the same header import unchanged; Carrier sets the dark-mode marker they rely on. Themes that depend on another app's page hooks may only partly apply. No other app is named in Settings, docs or errors.

[Anonymous]

Originally posted by: kristofferR

[!NOTE]
🤖 Claude Opus 5.5 responding on behalf of Kristoffer

Landed in [#405]: a theme gallery (Default, OLED Black, Graphite, Warm, High Contrast), validated .css theme import with remove and an Open themes folder button, an accent color, and a message font picker scoped to message text. custom.css still applies last. Tested live on Linux.

It is on main and ships in the next release.

[Anonymous]

Ticket changed by: kristofferR

• status: open --> closed