Pi-hole Themes

Custom Pi-hole CSS.

Tested on Web Interface v5.1

https://gilbn.github.io/theme.park/CSS/themes/pihole/XXX.css
aquamarine.css
hotline.css
dark.css
space-gray.css
plex.css
organizr-dark.css

⚠️ CSP

Because Pi-hole uses CSP it will block any attempts to inject stylesheets.

This will add https://raw.githubusercontent.com and https://gilbn.github.io to the CSP meta tag in the HTML. Allowing you to load the custom css.

proxy_set_header Accept-Encoding "";
sub_filter
'<meta http-equiv="Content-Security-Policy" content="default-src \'none\'; base-uri \'none\'; child-src \'self\'; form-action \'self\'; frame-src \'self\'; font-src \'self\'; connect-src \'self\'; img-src \'self\'; manifest-src \'self\'; script-src \'self\' \'unsafe-inline\'; style-src \'self\' \'unsafe-inline\'">'
'<meta http-equiv="Content-Security-Policy" content="default-src \'none\'; base-uri \'none\'; child-src \'self\'; form-action \'self\'; frame-src \'self\'; font-src \'self\'; connect-src \'self\'; img-src \'self\' https://raw.githubusercontent.com; manifest-src \'self\'; script-src \'self\' \'unsafe-inline\'; style-src \'self\' https://raw.githubusercontent.com https://gilbn.github.io \'unsafe-inline\'">';
sub_filter
'</head>'
'<link rel="stylesheet" type="text/css" href="https://gilbn.github.io/theme.park/CSS/themes/pihole/<THEME>.css">
</head>';
sub_filter_once on;

⚙️ Installation

Setup

Screenshots

Documentation

Pi-hole Themes

Note: Set theme to dark in the Web interface menu.

⚠️ CSP

⚙️ Installation

Setup

Screenshots