update-branding

Installation
SKILL.md

update-branding

Changes the CRM logo and/or title. The logo shows in two themes across five screens (desktop + mobile header, login, signup, confirmation) and the title is hardcoded in three places — a naive single-file edit leaves one stale. The steps below catch all of them.

Logo: two asset families

Confirm which the user means — most requests mean only #1.

  1. App logo / wordmark (common) — public/logos/. logo_atomic_crm_dark.svg is light-colored art shown in dark mode + all auth pages; logo_atomic_crm_light.svg is dark-colored art shown in light mode. (logo_atomic_crm.svg is an unused standalone copy.)

    Files are named by the mode they display in, not their color — the "dark-mode" logo must read on a dark background.

  2. Favicon + PWA icons — only if asked. Much bigger (34 PNGs); see below.

Code defaults vs. runtime Settings — they conflict

  • Code defaults (this skill): edit defaultConfiguration.ts + assets. Committed, applies everywhere, and the only way to change the browser-tab title / favicon / PWA icons.
  • Settings UI (/settings → Branding, SettingsPage.tsx): a logged-in user edits title + uploads logos, per-browser, saved to localStorage as CRM.app.configuration (logos as base64), never committed. Covers only the in-app logo + header title.

⚠️ The store shadows the code. useConfigurationContext returns { ...defaultConfiguration, ...storedConfig } (ConfigurationContext.tsx). If branding was ever saved via /settings, your edits to defaultConfiguration.ts won't show in that browser — clear the CRM.app.configuration localStorage key. Suspect this whenever a code change has no visual effect.

Installs
1
GitHub Stars
1.2K
First Seen
Jun 19, 2026
update-branding — marmelab/atomic-crm