๐ŸŽจ Branding & White Label

Customize the look and identity without touching code.

โš™๏ธEnvironment Variables

Set these in your .env file (or via deployment environment) to change visible branding instantly:

# Basic Identity
BRAND_NAME="My Awesome Media Portal"
BRAND_TAGLINE="Secure. Fast. Yours."

# Logo (file inside /logo directory)
BRAND_LOGO=logo.png

# Colors (hex codes)
BRAND_PRIMARY_COLOR=#1e88e5
BRAND_ACCENT_COLOR=#42a5f5
  • BRAND_NAME: Appears in the top navbar and login header.
  • BRAND_TAGLINE: Subtitle below logo on login page.
  • BRAND_LOGO: File name inside the logo/ folder (served at /logo/<file>).
  • BRAND_PRIMARY_COLOR: Main gradient/button color.
  • BRAND_ACCENT_COLOR: Secondary gradient/button hover color.

๐Ÿ–ผ๏ธChanging the Logo

  1. Place your image (e.g. company.png) in the logo/ folder.
  2. Set BRAND_LOGO=company.png in .env.
  3. Restart the app (or reload if using --reload).
Tip: Recommended size: square 256ร—256 PNG with transparent background.

๐ŸŽจUpdating Colors

The navbar gradient and primary buttons use the two color variables. Pick accessible contrasting colors.

# Example palette
BRAND_PRIMARY_COLOR=#673ab7
BRAND_ACCENT_COLOR=#9575cd
Contrast: Ensure white text remains readable; test quickly in the browser.

๐Ÿ”„Applying Changes

If running with uvicorn --reload, changes apply on next request. Otherwise:

# Restart (manual example)
Ctrl + C
uvicorn main:app --reload

๐ŸงชQuick Test Checklist

  • โ˜‘๏ธ New logo displays in navbar & login page
  • โ˜‘๏ธ Brand name updated across pages
  • โ˜‘๏ธ Tagline visible under logo on login
  • โ˜‘๏ธ Colors applied to navbar & primary buttons
  • โ˜‘๏ธ API still functional (branding doesn't affect logic)

โ“FAQ

Do I need to rebuild anything?

No. Only restart the server if not using auto-reload.

Can I add more variables?

Yesโ€”add to .env, update main.py to inject them into templates.env.globals, then reference in templates.

Can I remove branding entirely?

Set minimal values (e.g. blank tagline, neutral colors) or replace the logo with a transparent PNG.