Developers hate me for sharing this one weird trick!

Yes..the title is clickbait, and no this does not work on any app/container 😉

I have for some time now been creating css themes/skins for different applications that reside in the “media server/selfhosting” category. Normally you would add the themes using a “subfilter” module like http://nginx.org/en/docs/http/ngx_http_sub_module.html or https://httpd.apache.org/docs/2.4/mod/mod_filter.html. This means that you would have to reverse proxy the application to be able to add the theme. Doing that would only apply the theme when accessing the application though the proxy and not locally.

So, to fix that I’ve created a bunch of docker mods for all the applications that have a linuxserver container.
The docker mod, will run a script at startup to inject the stylesheet into the html file using sed.
The script does the exact same thing as the subfiltering module except it does it on the backend instead of on the proxy side. You can find all the mods here: https://github.com/gilbN/theme.park/tree/docker-mods

The scripts are quite simple and only has a couple of variables.
TP_DOMAIN and TP_THEME
Both these variable have a default value if not set.
TP_DOMAIN is set to theme-park.dev and TP_THEME is set to organizr_dark

Example:

#!/usr/bin/with-contenv bash

echo '---------------------------'
echo '|  Sonarr theme.park Mod  |'
echo '---------------------------'

# Display variables for troubleshooting
echo -e "Variables set:\\n\
'TP_DOMAIN'=${TP_DOMAIN}\\n\
'TP_THEME'=${TP_THEME}\\n"

# Set default
if [[ -z ${TP_DOMAIN} ]]; then
    echo 'No domain set, defaulting to theme-park.dev'
    TP_DOMAIN='theme-park.dev'
fi

if [[ -z ${TP_THEME} ]]; then
    echo 'No theme set, defaulting to organizr-dark'
    TP_THEME='organizr-dark'
fi

# Adding stylesheets
if ! grep -q "${TP_DOMAIN}" /app/sonarr/bin/UI/index.html; then
    echo '---------------------------'
    echo '|  Adding the stylesheet  |'
    echo '---------------------------'
    sed -i "s/<\/head>/<link rel='stylesheet' href='https:\/\/${TP_DOMAIN}\/theme.park\/CSS\/themes\/sonarr\/${TP_THEME}.css'><\/head> /g" /app/sonarr/bin/UI/index.html
    printf 'Stylesheet set to %s\n' "${TP_THEME}
    "
fi

Adding the theme

Adding the mod, is quite simple.
Add the variable DOCKER_MODS=ghcr.io/gilbn/theme.park:<app> e.g. ghcr.io/gilbn/theme.park:sonarr to your docker run  command or compose file.

On Unraid simply click on + Add another Path, Port, Variable, label or Device

And fill out the fields.

As noted earlier it will default to the organizr_dark theme and the theme-park.dev domain. So if you want a different theme, you must add the TP_THEME variable with the value you want.
The available themes are: aquamarine, hotline, space-gray,dark, plex and organizr-dark

Click the banners here for screenshots of the different themes: https://docs.theme-park.dev/#themes

You can find applications that support Docker Mods installation here: https://github.com/gilbN/theme.park/tree/docker-mods
For other installation methods check the wiki https://docs.theme-park.dev/setup/