Themes

Setup

All apps have 5 themes to choose from. https://gilbn.github.io/theme.park/CSS/themes/<APP_NAME>/<THEME_NAME>.css

aquamarine.css
hotline.css
dark.css
plex.css
space-gray.css

Example: https://gilbn.github.io/theme.park/CSS/themes/sonarr/dark.css

As most of these apps doesn't have support for custom CSS you can get around that by using subfilter in Nginx or a browser addon called Stylus.

Subfilter method

Nginx

Add this to your reverse proxy:

proxy_set_header Accept-Encoding "";
sub_filter
'</head>'
'<link rel="stylesheet" type="text/css" href="https://gilbn.github.io/theme.park/CSS/themes/<APP_NAME>/THEME.css">
</head>';
sub_filter_once on;

Where APP_NAME is the app you want to theme and THEME.css is the name of the theme. e.g. aquamarine.css

Example:

location /sonarr {
    proxy_pass http://localhost:8989/sonarr;
    include /config/nginx/proxy.conf;
	proxy_set_header Accept-Encoding "";
	sub_filter
	'</head>'
	'<link rel="stylesheet" type="text/css" href="https://gilbn.github.io/theme.park/CSS/themes/sonarr/plex.css">
	</head>';
	sub_filter_once on;
  }

Apache (Untested)

AddOutputFilterByType SUBSTITUTE text/html
   Substitute 's|</head> '<link rel="stylesheet" type="text/css" href="https://gilbn.github.io/theme.park/CSS/themes/<APP_NAME>/THEME.css">
</head>';|'

Example:

<Location /sonarr>
    ProxyPass http://localhost:8989/sonarr
    ProxyPassReverse http://localhost:8989/sonarr
AddOutputFilterByType SUBSTITUTE text/html
   Substitute 's|</head> '<link rel="stylesheet" type="text/css" href="https://gilbn.github.io/theme.park/CSS/themes/sonarr/plex.css">
</head>';|'
  </Location>

Stylus method

Stylus is a browser extention that can inject custom css to the webpage of your choosing.

Add this in the style page:

@import "https://gilbn.github.io/theme.park/CSS/themes/<APP_NAME>/THEME.css";

Example: @import "https://gilbn.github.io/theme.park/CSS/themes/sonarr/dark.css";

Link to Chrome extention: https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne?hl=en Link to Firefox extention: https://addons.mozilla.org/en-US/firefox/addon/styl-us/

Blackberry Theme Installer method

Blackberry Themes provides a easy to use method of using JS to theme your Organizr tabs. This will only work if your Organizr tab is on a subdirectory (does not work with subdomains). These themes will only be applied when viewed within Organizr.

$.getScript('https://archmonger.github.io/Blackberry-Themes/Extras/theme_installer.js', function(){
    // First variable is your Organizr tab name. Second variable is a link to the theme you want to apply.
    themeInstaller("<TAB_NAME>","https://gilbn.github.io/theme.park/CSS/themes/<APP_NAME>/<THEME_NAME>.css");

    // You can also use this for multiple themes at once by simply calling themeInstaller again!
    themeInstaller("<TAB_NAME>","https://gilbn.github.io/theme.park/CSS/themes/<APP_NAME>/<THEME_NAME>.css");
});