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

```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.
3.  Update `app/manifest.ts` if you have custom icon paths.

## Docker Deployment

When deploying with Docker, please note that **Next.js inlines `NEXT_PUBLIC_` environment variables at build time**.

This means you cannot simply change the environment variables in `docker-compose.yml` and restart the container to change the branding. You must **rebuild the image**.

### Using Docker Compose

1.  Create a `.env` file with your custom configuration:
    ```bash
    NEXT_PUBLIC_APP_NAME="My Music Game"
    NEXT_PUBLIC_THEME_COLOR="#ff0000"
    # ... other variables
    ```

2.  Ensure your `docker-compose.yml` passes these variables as build arguments (already configured in `docker-compose.example.yml`):
    ```yaml
    services:
      hoerdle:
        build:
          context: .
          args:
            NEXT_PUBLIC_APP_NAME: ${NEXT_PUBLIC_APP_NAME}
            # ...
    ```

3.  Build and start the container:
    ```bash
    docker compose up --build -d
    ```