# 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:

```css
/* 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.