Change Brand Color

SocialSwap uses a single theme file for brand colors. Change it once and it applies across buttons, links, focus states, badges, and other UI elements.

File to edit

public/css/theme.css

Near the top of the file, update these variables:

:root {
    --ss-primary: #e85d04;        /* main brand color */
    --ss-primary-hover: #c24a00;  /* darker hover state */
    --ss-primary-soft: rgba(232, 93, 4, 0.12); /* soft backgrounds / highlights */
}

In the dark-mode block in the same file, also update:

html.dark,
.dark {
    --ss-primary-soft: rgba(232, 93, 4, 0.18);
}

Use your own hex color for --ss-primary, a slightly darker shade for --ss-primary-hover, and a low-opacity rgba version of the same color for --ss-primary-soft.

After saving

1. Clear cache in Admin → Settings → Clear Cache
2. If you use Cloudflare (or another CDN), purge cached CSS
3. Hard refresh the browser (Cmd+Shift+R / Ctrl+Shift+R)

You do not need to edit every CSS file — redesigned and legacy styles pull from these tokens.