# Theme.Park - Self-Hosted CSS Themes

## Overview

[Theme.Park](https://github.com/themepark-dev/theme.park) provides custom CSS themes for various self-hosted applications. This setup runs theme.park locally to eliminate external dependencies on GitHub/CDN.

## Why Self-Host?

- **No external dependency**: If GitHub or theme-park.dev goes down, your themes keep working
- **Faster loading**: CSS served locally instead of from CDN
- **Privacy**: No external requests from your apps

## Deployment

### Stack Location
- **Compose file**: `Atlantis/theme-park/theme-park.yaml`
- **Portainer Stack ID**: 498
- **Container name**: `theme-park`

### Ports
| Port | Protocol | Purpose |
|------|----------|---------|
| 8580 | HTTP | CSS serving |
| 8543 | HTTPS | CSS serving (unused) |

### Config Path
```
/volume2/metadata/docker2/theme-park
```

## Themed Applications

All apps use **Dracula** theme with self-hosted CSS:

### Atlantis (192.168.0.200)

| Application | Stack | Theme Method |
|-------------|-------|--------------|
| Sonarr | arr-stack | DOCKER_MODS |
| Radarr | arr-stack | DOCKER_MODS |
| Lidarr | arr-stack | DOCKER_MODS |
| Bazarr | arr-stack | DOCKER_MODS |
| Prowlarr | arr-stack | DOCKER_MODS |
| Tautulli | arr-stack | DOCKER_MODS |
| SABnzbd | arr-stack | DOCKER_MODS |
| Jackett | arr-stack | DOCKER_MODS |
| Whisparr | arr-stack | TP_HOTIO |
| Plex | arr-stack | DOCKER_MODS |
| Deluge | arr-stack | DOCKER_MODS |
| LazyLibrarian | arr-stack | DOCKER_MODS |
| Syncthing | syncthing-stack | DOCKER_MODS |

### Calypso (192.168.0.250)

| Application | Stack | Theme Method |
|-------------|-------|--------------|
| Sonarr | arr-stack | DOCKER_MODS |
| Radarr | arr-stack | DOCKER_MODS |
| Lidarr | arr-stack | DOCKER_MODS |
| Bazarr | arr-stack | DOCKER_MODS |
| Prowlarr | arr-stack | DOCKER_MODS |
| Readarr | arr-stack | DOCKER_MODS |
| Tautulli | arr-stack | DOCKER_MODS |
| SABnzbd | arr-stack | DOCKER_MODS |
| Whisparr | arr-stack | TP_HOTIO |
| Plex | arr-stack | DOCKER_MODS |
| Syncthing | syncthing-stack | DOCKER_MODS |

### Via Nginx Proxy Manager (CSS sub_filter injection)

| Application | Domain | NPM Host ID |
|-------------|--------|-------------|
| Gitea | git.vish.gg | 3 |
| Uptime-Kuma | kuma.vish.gg | 41 |
| Nginx Proxy Manager | npm.vish.gg | 35 |

## Configuration

### Required Environment Variables

For LinuxServer.io containers:
```yaml
environment:
  - DOCKER_MODS=ghcr.io/themepark-dev/theme.park:<app_name>
  - TP_SCHEME=http
  - TP_DOMAIN=192.168.0.200:8580
  - TP_THEME=dracula
```

For Hotio containers (e.g., Whisparr):
```yaml
environment:
  - TP_HOTIO=true
  - TP_SCHEME=http
  - TP_DOMAIN=192.168.0.200:8580
  - TP_THEME=dracula
```

### Critical Settings

| Variable | Value | Why |
|----------|-------|-----|
| `TP_SCHEME` | `http` | **Required!** Local theme-park only serves HTTP. Without this, mod defaults to `https` and CSS fails to load |
| `TP_DOMAIN` | `192.168.0.200:8580` | Must be the NAS's **LAN IP**, not Docker gateway. The user's browser must be able to reach this URL |

### Common Mistakes

1. **Using Docker gateway IP (172.24.0.x)**: Containers can reach this, but user browsers cannot
2. **Missing TP_SCHEME=http**: Mod defaults to https, which the local server doesn't serve
3. **Using hostname instead of IP**: Container DNS may not resolve `atlantis`

## Available Themes

- dracula (current)
- nord
- hotline
- dark
- plex
- aquamarine
- space-gray
- organizr
- hotpink
- onedark

To change theme, update `TP_THEME` in compose files and redeploy.

## Apps That Cannot Be Themed

| App | Reason |
|-----|--------|
| Jellyseerr | Not a LinuxServer image; not proxied via NPM (direct access only) |
| Portainer | Accessed directly, not proxied via NPM |
| AdGuard | Not a LinuxServer image; accessed directly |
| Vaultwarden | No theme.park support |
| Wizarr | No theme.park support |
| Homarr | No theme.park support |
| Audiobookshelf | Not a LinuxServer image, no DOCKER_MODS support |

## Troubleshooting

### Theme not showing?

1. **Check env vars are set**:
   ```bash
   docker exec sonarr env | grep TP_
   ```
   Should show:
   ```
   TP_SCHEME=http
   TP_DOMAIN=192.168.0.200:8580
   TP_THEME=dracula
   ```

2. **Check CSS is injected into HTML**:
   ```bash
   docker exec sonarr grep "stylesheet.*8580" /app/sonarr/bin/UI/index.html
   ```
   Should show `http://192.168.0.200:8580/css/...`

3. **Test CSS fetch from inside container**:
   ```bash
   docker exec sonarr curl -s http://192.168.0.200:8580/css/base/sonarr/dracula.css | head -3
   ```

4. **Hard refresh browser**: Ctrl+Shift+R to clear cached CSS

### Container logs
```bash
docker logs sonarr 2>&1 | grep -i theme
```

Look for:
```
|  Sonarr theme.park Mod  |
'TP_THEME'=dracula
Adding the stylesheets
```

## Related Files

- Theme-park compose: `Atlantis/theme-park/theme-park.yaml`
- Arr-suite compose: `Atlantis/arr-suite/docker-compose.yml`
- Syncthing compose: `Atlantis/syncthing.yml`