hoerdle/WHITE_LABEL.md

White Labeling Guide

This application is designed to be easily white-labeled. You can customize the branding, colors, and configuration without modifying the core code.

Configuration

The application is configured via environment variables. You can set these in a .env or .env.local file.

Branding

Variable	Description	Default
NEXT_PUBLIC_APP_NAME	The name of the application.	Hördle
NEXT_PUBLIC_APP_DESCRIPTION	The description used in metadata.	Daily music guessing game...
NEXT_PUBLIC_DOMAIN	The domain name (used for sharing).	hoerdle.elpatron.me
NEXT_PUBLIC_TWITTER_HANDLE	Twitter handle for metadata.	@elpatron

Analytics (Plausible)

Variable	Description	Default
NEXT_PUBLIC_PLAUSIBLE_DOMAIN	The domain to track in Plausible.	hoerdle.elpatron.me
NEXT_PUBLIC_PLAUSIBLE_SCRIPT_SRC	The URL of the Plausible script.	https://plausible.elpatron.me/js/script.js

Credits

Variable	Description	Default
NEXT_PUBLIC_CREDITS_ENABLED	Enable/disable footer credits (true/false).	true
NEXT_PUBLIC_CREDITS_TEXT	Text before the link.	Vibe coded with ☕ and 🍺 by
NEXT_PUBLIC_CREDITS_LINK_TEXT	Text of the link.	@elpatron@digitalcourage.social
NEXT_PUBLIC_CREDITS_LINK_URL	URL of the link.	https://digitalcourage.social/@elpatron

Theming

The application uses CSS variables for theming. You can override these variables in your own CSS file or by modifying app/globals.css.

Key Colors

Variable	Description	Default
--primary	Main action color (buttons).	#000000
--secondary	Secondary actions.	#4b5563
--accent	Accent color.	#667eea
--success	Success state (correct guess).	#22c55e
--danger	Error state (wrong guess).	#ef4444
--warning	Warning state (stars).	#ffc107
--muted	Muted backgrounds.	#f3f4f6

Example: Red Theme

To create a red-themed version, add this to your CSS:

:root {
  --primary: #dc2626;
  --accent: #ef4444;
  --accent-gradient: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%);
}

Assets

To replace the logo and icons:

1. Replace public/favicon.ico.
2. Replace public/icon.png (if it exists).
3. Update app/manifest.ts if you have custom icon paths.