CSS/themes | ||
Resources | ||
Screenshots | ||
_config.yml | ||
LICENSE | ||
README.md |
A collection of themes/skins for use in conjunction with Organizr or standalone.
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");
});
Feature requests
Current themes in the repo:
- Sonarr
- Radarr
- Lidarr
- Bazarr
- Plex
- Jellyfin
- Ombi
- Tautulli
- Organizr
- Grafana
- Sabnzbd
- Nzbget
- NZBHydra2
- Deluge
- qBittorrent
- Guacamole
- ruTorrent
- Netdata
- Jackett
- html5speedtest
- Filebrowser
- Monitorr
- Logarr
- PLPP
- Synclounge
- The Lounge