184 lines
4.9 KiB
Markdown
184 lines
4.9 KiB
Markdown
# 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`
|