Affiliate panel theme presets help you quickly align the Affise affiliate panel with your brand identity. No technical skills are required: simply choose a ready-made preset and send the JSON file to your Affise account manager - they will apply it for you.
💰 Applying custom themes to the affiliate panel is available only for certain plans. Contact your Affise account manager to enable the feature and confirm the conditions.
🔎 For an overview of the design editor itself and how Light and Dark modes work, see Design customization.
Ready-made themes
You can choose one of four ready-made themes to adapt the affiliate panel to your brand identity:
Marine: modern sans-serif font, dark-blue sidebar, sky-blue accents, custom menu icons, and an oceanic gradient on the login screen.
Aurora: bold modern fonts, a purple-to-magenta gradient sidebar, uppercase menu items, and a vivid gradient on the login screen.
Forest: classic serif font, deep-green sidebar with mint highlights on the active item, custom menu icons, and a soft light main area. A calm, established look.
Velvet: full dark theme with amber accents and a diagonal gradient in the sidebar. Rich and premium.
How to apply a theme
You can experiment with a theme on your own, but the final configuration is applied by your Affise account manager.
1. Optional. Preview in the theme editor
🔎 Affise has a built-in theme editor inside the Affiliate panel where you can adjust colors, fonts, icons, and chart colors interactively and see the result live. Read more about it here.
To view how the ready-made theme looks in your affiliate panel, do the following:
Go to Affiliate panel > Dashboard.
Add the theme_editor=1 parameter to the end of the page URL to enable the theme editor.
In the lower-right corner, click the Editor icon.
Click Get config.
In the pop-up window, click Edit and paste the JSON of the needed preset. Click Enter.
Theme presets
You can use the following presets:
Marine
{
"fontFamily": "'Space Grotesk', 'EuclidCircularA', 'Open Sans', -apple-system, sans-serif",
"$fontFamilyTitles": "'Space Grotesk', 'EuclidCircularA', 'Open Sans', -apple-system, sans-serif",
"$fonts": [
{ "source": "https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap", "family": "Space Grotesk" }
],
"colorPrimary": "#0369a1",
"colorInfo": "#0369a1",
"colorLink": "#0369a1",
"colorLinkHover": "#0284c7",
"colorLinkActive": "#075985",
"borderRadius": 6,
"borderRadiusLG": 12,
"$colorBgLayout": "#f8fafc",
"$colorBgSidebar": "#0c1e35",
"$colorBgSidebarGradient": "linear-gradient(180deg, #0c1e35 0%, #0a1628 100%)",
"$colorSidebarSplitHorizontal": "rgba(56,189,248,0.18)",
"$colorSidebarFooterLink": "#7dd3fc",
"$colorBgAuthLayout": "linear-gradient(140deg, #0c1e35 0%, #0369a1 60%, #0ea5e9 100%)",
"$colorBgAuthHeader": "transparent",
"$showAuthFormLogo": true,
"$icons": {
"main": "https://affise-news.s3.eu-central-1.amazonaws.com/dashboard_light.svg",
"offers": "https://affise-news.s3.eu-central-1.amazonaws.com/offers_light.svg",
"smartlinks": "https://affise-news.s3.eu-central-1.amazonaws.com/smarlinks_light.svg",
"statistics": "https://affise-news.s3.eu-central-1.amazonaws.com/statistics_light.svg",
"payments": "https://affise-news.s3.eu-central-1.amazonaws.com/payments_light.svg",
"news": "https://affise-news.s3.eu-central-1.amazonaws.com/news_light.svg",
"referrals": "https://affise-news.s3.eu-central-1.amazonaws.com/refferals_light.svg",
"externalLink": "https://affise-news.s3.eu-central-1.amazonaws.com/link_light.svg",
"api": "https://affise-news.s3.eu-central-1.amazonaws.com/api_light.svg",
"support": "https://affise-news.s3.eu-central-1.amazonaws.com/support_light.svg"
},
"$charts": {
"conversions": "#0369a1",
"clicks": "#0ea5e9",
"revenue-usd": "#0c1e35",
"revenue-eur": "#06b6d4",
"revenue-byn": "#67e8f9"
},
"$component": {
"Button": {
"colorPrimary": "#0369a1",
"primaryColor": "#ffffff",
"fontWeight": 600,
"defaultBg": "transparent",
"defaultColor": "#0369a1",
"defaultBorderColor": "#0369a1",
"defaultHoverBg": "#0369a1",
"defaultHoverColor": "#ffffff",
"defaultHoverBorderColor": "#0369a1"
},
"Menu": {
"itemColor": "rgba(255,255,255,0.75)",
"itemSelectedBg": "rgba(56,189,248,0.16)",
"itemSelectedColor": "#7dd3fc",
"itemHoverBg": "rgba(255,255,255,0.06)"
},
"Card": {
"headerBg": "#f0f9ff",
"colorBorderSecondary": "#bae6fd",
"colorBgContainer": "#ffffff"
},
"Tabs": {
"itemSelectedColor": "#0369a1",
"itemActiveColor": "#0369a1",
"inkBarColor": "#0369a1"
}
}
}Aurora
{
"fontFamily": "'Sora', 'EuclidCircularA', 'Open Sans', -apple-system, sans-serif",
"$fontFamilyTitles": "'Bricolage Grotesque', 'Sora', 'EuclidCircularA', 'Open Sans', sans-serif",
"$fonts": [
{ "source": "https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700&display=swap", "family": "Sora" },
{ "source": "https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,[email protected],500;12..96,600;12..96,700;12..96,800&display=swap", "family": "Bricolage Grotesque" }
],
"colorPrimary": "#d946ef",
"colorInfo": "#d946ef",
"colorLink": "#a21caf",
"colorLinkHover": "#c026d3",
"colorLinkActive": "#86198f",
"borderRadius": 6,
"borderRadiusLG": 14,
"$colorBgLayout": "#fafafa",
"$colorBgSidebar": "#1e1b3a",
"$colorBgSidebarGradient": "linear-gradient(165deg, #2a1f4d 0%, #0f0a1f 100%)",
"$colorSidebarSplitHorizontal": "rgba(217,70,239,0.20)",
"$colorSidebarFooterLink": "#f0abfc",
"$colorBgAuthLayout": "linear-gradient(135deg, #1e1b3a 0%, #4a1d6e 50%, #d946ef 100%)",
"$colorBgAuthHeader": "transparent",
"$showAuthFormLogo": true,
"$sidebarTextTransform": "uppercase",
"$buttonTextTransform": "uppercase",
"$charts": {
"conversions": "#d946ef",
"clicks": "#8b5cf6",
"revenue-usd": "#ec4899",
"revenue-eur": "#a855f7",
"revenue-byn": "#6366f1"
},
"$component": {
"Button": {
"colorPrimary": "#d946ef",
"primaryColor": "#ffffff",
"fontWeight": 600,
"defaultBg": "transparent",
"defaultColor": "#d946ef",
"defaultBorderColor": "#d946ef",
"defaultHoverBg": "#d946ef",
"defaultHoverColor": "#ffffff",
"defaultHoverBorderColor": "#d946ef"
},
"Menu": {
"itemColor": "rgba(255,255,255,0.78)",
"itemSelectedBg": "rgba(217,70,239,0.22)",
"itemSelectedColor": "#f0abfc",
"itemHoverBg": "rgba(255,255,255,0.06)",
"fontWeight": 500
},
"Card": {
"headerBg": "#fdf4ff",
"colorBorderSecondary": "#f5d0fe",
"colorBgContainer": "#ffffff"
},
"Tabs": {
"itemSelectedColor": "#d946ef",
"itemActiveColor": "#d946ef",
"inkBarColor": "#d946ef"
}
}
}Forest
{
"fontFamily": "'Lora', 'Open Sans', Georgia, serif",
"$fontFamilyTitles": "'Lora', 'Open Sans', Georgia, serif",
"$fonts": [
{ "source": "https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&display=swap", "family": "Lora" }
],
"colorPrimary": "#15803d",
"colorInfo": "#15803d",
"colorLink": "#15803d",
"colorLinkHover": "#16a34a",
"colorLinkActive": "#166534",
"borderRadius": 8,
"borderRadiusLG": 14,
"$colorBgSidebar": "#0f3a23",
"$colorSidebarSplitHorizontal": "rgba(134,239,172,0.18)",
"$colorSidebarFooterLink": "#86efac",
"$colorBgAuthLayout": "linear-gradient(180deg, #d1fae5 0%, #ecfccb 100%)",
"$colorBgAuthHeader": "transparent",
"$showAuthFormLogo": true,
"$icons": {
"main": "https://affise-news.s3.eu-central-1.amazonaws.com/dashboard_light.svg",
"offers": "https://affise-news.s3.eu-central-1.amazonaws.com/offers_light.svg",
"smartlinks": "https://affise-news.s3.eu-central-1.amazonaws.com/smarlinks_light.svg",
"statistics": "https://affise-news.s3.eu-central-1.amazonaws.com/statistics_light.svg",
"payments": "https://affise-news.s3.eu-central-1.amazonaws.com/payments_light.svg",
"news": "https://affise-news.s3.eu-central-1.amazonaws.com/news_light.svg",
"referrals": "https://affise-news.s3.eu-central-1.amazonaws.com/refferals_light.svg",
"externalLink": "https://affise-news.s3.eu-central-1.amazonaws.com/link_light.svg",
"api": "https://affise-news.s3.eu-central-1.amazonaws.com/api_light.svg",
"support": "https://affise-news.s3.eu-central-1.amazonaws.com/support_light.svg"
},
"$charts": {
"conversions": "#15803d",
"clicks": "#0891b2",
"revenue-usd": "#7c2d12",
"revenue-eur": "#65a30d",
"revenue-byn": "#0e7490"
},
"$component": {
"Button": {
"colorPrimary": "#15803d",
"primaryColor": "#ffffff",
"fontWeight": 600,
"defaultBg": "transparent",
"defaultColor": "#15803d",
"defaultBorderColor": "#15803d",
"defaultHoverBg": "#15803d",
"defaultHoverColor": "#ffffff"
},
"Menu": {
"itemColor": "rgba(255,255,255,0.92)",
"itemSelectedBg": "rgba(134,239,172,0.16)",
"itemSelectedColor": "#86efac",
"itemHoverBg": "rgba(255,255,255,0.08)"
},
"Card": {
"headerBg": "#f0fdf4",
"colorBorderSecondary": "#bbf7d0",
"colorBgContainer": "#ffffff"
},
"Tabs": {
"itemSelectedColor": "#15803d",
"itemActiveColor": "#15803d",
"inkBarColor": "#15803d"
}
}
}Velvet
{
"fontFamily": "'Plus Jakarta Sans', 'Open Sans', -apple-system, sans-serif",
"$fonts": [
{ "source": "https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap", "family": "Plus Jakarta Sans" }
],
"colorPrimary": "#f59e0b",
"colorInfo": "#f59e0b",
"colorLink": "#fbbf24",
"colorLinkHover": "#fcd34d",
"colorLinkActive": "#f59e0b",
"colorText": "rgba(255,255,255,0.92)",
"colorTextSecondary": "#a8a29e",
"colorTextDescription": "#a8a29e",
"colorBgContainer": "#1c1917",
"colorBgElevated": "#292524",
"colorBorder": "rgba(255,255,255,0.08)",
"colorSplit": "rgba(255,255,255,0.06)",
"$colorBgLayout": "#0c0a09",
"$colorBgSidebar": "#7c2d12",
"$colorBgSidebarGradient": "linear-gradient(165deg, #7c2d12 0%, #1c1917 100%)",
"$colorSidebarSplitHorizontal": "rgba(255,255,255,0.12)",
"$colorSidebarFooterLink": "#fbbf24",
"$colorBgAuthLayout": "#0c0a09",
"$colorBgAuthHeader": "transparent",
"$cartesianGridOpacity": 0.3,
"$charts": {
"conversions": "#f59e0b",
"clicks": "#3b82f6",
"revenue-usd": "#ef4444",
"revenue-eur": "#10b981",
"revenue-byn": "#ec4899",
"revenue-rub": "#a855f7"
},
"$component": {
"Button": {
"colorPrimary": "#f59e0b",
"primaryColor": "#1c1917",
"fontWeight": 600,
"defaultBg": "transparent",
"defaultColor": "#f59e0b",
"defaultBorderColor": "#f59e0b",
"defaultHoverBg": "#f59e0b",
"defaultHoverColor": "#1c1917",
"defaultHoverBorderColor": "#f59e0b"
},
"Menu": {
"itemSelectedBg": "rgba(245,158,11,0.18)",
"itemSelectedColor": "#fbbf24"
},
"Card": {
"colorBorderSecondary": "rgba(255,255,255,0.08)",
"headerBg": "#292524",
"colorBgContainer": "#1c1917"
}
}
}2. Send the JSON to your Affise account manager
Once you choose a configuration, whether it is one of the four presets or an export from the theme editor, simply share the JSON with your Affise account manager. They apply it to your Affiliate panel via Admin panel > Settings > Affiliates > Appearance in the Customize parameters in your affiliate panel section.
⚠️ Light and Dark are two independent JSON configurations stored independently. To support both modes, send a JSON file for each.
What can be styled
You can also customize the panel from scratch, adjusting every part of it. The table below maps each part of the panel to the configuration keys that control it.
Panel area | JSON keys |
Main brand color |
|
Link colors |
|
Sidebar background |
|
Active menu item |
|
Login screen background |
|
Logo on the login screen |
|
Primary buttons |
|
Secondary buttons |
|
Font |
|
Heading font |
|
UPPERCASE menu items |
|
Corner rounding |
|
Chart line colors |
|
Custom menu icons |
|
Targeted snippets for specific tweaks
Each block below is a self-contained JSON snippet. Copy the one you need and either add it to your existing configuration or use it on its own, as each snippet works independently.
Change only the brand color:
{
"colorPrimary": "#e16b5a",
"colorInfo": "#e16b5a",
"colorLink": "#e16b5a"
}Make the sidebar dark:
{
"$colorBgSidebar": "#1B222B"
}Sidebar with a diagonal gradient:
{
"$colorBgSidebar": "#6A357B",
"$colorBgSidebarGradient": "linear-gradient(135deg, #6A357B 0%, #120A31 100%)"
}Active menu item in your brand color:
{
"$component": {
"Menu": {
"itemSelectedBg": "#774CDC",
"itemSelectedColor": "#FFFFFF"
}
}
}🔎 If your brand color is dark, the active item text is usually white. If your brand color is light (yellow, mint, coral), use black.
Buttons fully filled with the brand color:
{
"$component": {
"Button": {
"colorPrimary": "#2D8546",
"primaryColor": "#ffffff",
"fontWeight": 600,
"defaultBg": "#2D8546",
"defaultColor": "#ffffff",
"defaultBorderColor": "#2D8546",
"defaultHoverBg": "#2D8546",
"defaultHoverColor": "#ffffff"
}
}
}Outlined buttons (instead of filled):
{
"$component": {
"Button": {
"colorPrimary": "#774cdc",
"primaryColor": "#ffffff",
"fontWeight": 600,
"defaultBg": "transparent",
"defaultColor": "#774cdc",
"defaultBorderColor": "#774cdc",
"defaultHoverBg": "#774cdc",
"defaultHoverColor": "#ffffff"
}
}
}Brand the login screen:
{
"$showAuthFormLogo": true,
"$colorBgAuthLayout": "linear-gradient(180deg, #BCFECE 0%, #D7FEC2 100%)",
"$colorBgAuthHeader": "transparent"
}Connect a Google Font:
{
"fontFamily": "'Inter', sans-serif",
"$fonts": [
{
"source": "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap",
"family": "Inter"
}
]
}Use a separate font for headings:
{
"$fontFamilyTitles": "'Unbounded', sans-serif",
"$fonts": [
{
"source": "https://fonts.googleapis.com/css2?family=Unbounded:[email protected]&display=swap",
"family": "Unbounded"
}
]
}UPPERCASE menu items and buttons:
{
"$sidebarTextTransform": "uppercase",
"$buttonTextTransform": "uppercase"
}More rounded corners:
{
"borderRadius": 12,
"borderRadiusLG": 20
}Custom chart colors:
{
"$charts": {
"conversions": "#f64A7E",
"clicks": "#4999F6",
"revenue-usd": "#000000",
"revenue-eur": "#F44747"
}
}Custom menu icons:
{
"$icons": {
"main": "https://cdn.example.com/dashboard.svg",
"offers": "https://cdn.example.com/offers.svg",
"smartlinks": "https://cdn.example.com/smartlinks.svg",
"statistics": "https://cdn.example.com/statistics.svg",
"payments": "https://cdn.example.com/payments.svg",
"news": "https://cdn.example.com/news.svg",
"referrals": "https://cdn.example.com/referrals.svg",
"support": "https://cdn.example.com/support.svg",
"api": "https://cdn.example.com/api.svg"
}
}🔎 Each link must point to an SVG file. Replace cdn.example.com with your own CDN or hosting.
Sidebar footer link color:
{
"$colorSidebarFooterLink": "#52A3FF"
}🔎 This is the color of the Privacy Policy and Terms And Conditions links at the bottom of the sidebar. When the sidebar background is dark, set a light accent color so the links remain readable.
Hide Ref ID in tracking links:
{
"$offers": {
"hideRefId": true
}
}
How to combine multiple snippets
A JSON object is a list of key: value pairs in curly braces. To combine two snippets, merge their contents into a single object, separating entries with commas. If both snippets contain a $component block, merge the contents of that block too.
{
"colorPrimary": "#774cdc",
"colorInfo": "#774cdc",
"colorLink": "#895bf5",
"$component": {
"Button": {
"colorPrimary": "#774cdc",
"primaryColor": "#ffffff",
"fontWeight": 600
}
}
}
FAQ
I want my buttons to be a different color than my main brand color. Is that possible?
Yes. In the button block, set your color in Button.colorPrimary and Button.defaultBg / defaultColor — these override the global brand color.
For the active menu item color, should I use black or white?
If the background of the active item is dark (blue, purple, deep green), use white (#FFFFFF). If it's light (yellow, mint, beige), use black (#000).
What happens if I leave a variable out?
Nothing breaks. When the manager applies your JSON, any variable you didn't set falls back to the value from the selected base theme or to the Affise default. You can start with one or two fields and add more as needed.
I have both Light and Dark modes. Do I need two configurations?
Yes. Light and Dark are two independent JSON configurations stored separately. Send your manager one JSON for each mode you want to support.
I'm not a developer. Where do I get my brand colors?
Open your company logo in any graphics editor or use an online color-picker tool (for example, image-color-picker.com). A color is the six characters after #, for example, #2D8546. Paste those into the JSON.
Why can't I save the theme myself in the Admin panel?
Saving custom themes is a paid feature handled on the Affise side. You can design and preview themes for free using the playground (theme_editor=1), but applying the configuration to your live Affiliate panel goes through your account manager.
Please contact the Affise Customer Support team regarding all raised questions via the e-mail: [email protected].