Branding & Theme

Customize portal appearance under Portal Settings → Branding & Theme.

What's Configurable

• Logo — SVG preferred; PNG fallback
• Brand colors — Primary, secondary, accent
• Fonts — System fonts default; custom via Google Fonts or self-hosted
• Hero imagery — Default Open Graph and hero images
• Favicon — 32x32 and 192x192 versions
• Custom CSS — For advanced overrides

Match Your Main Brand

Most customers want portals that visually match their primary marketing site. Easiest path:

1. Pull primary/secondary colors from your main brand guide
2. Upload your logo (SVG)
3. Match font family if you have a brand font
4. Test on a single portal before applying to all

Custom CSS

For deeper customization, use the Custom CSS field. Common needs:

/* Tighten spacing on comparison tables */
.comparison-table { row-gap: 0.5rem; }
 
/* Match brand button style */
.cta-primary {
  background: var(--brand-primary);
  border-radius: 8px;
}

GrackerAI applies your CSS after the default stylesheet, so your overrides win.

Light & Dark Mode

Light mode is the default for B2B SaaS portals. Dark mode is recommended for cybersecurity and dev-tool portals where the audience expects it.

Quick Validation

After theming, visit:

• The home page
• A comparison page
• A glossary entry
• The footer

Check on mobile (375px), tablet (768px), and desktop (1280px). GrackerAI handles responsive layout automatically; theme changes are the most common source of layout breakage.