Skip to content

logo Pihole

Custom Pihole CSS

Aquamarine Theme

https://theme-park.dev/CSS/themes/pihole/XXX.css

aquamarine.css

hotline.css

hotpink.css

dracula.css

dark.css

organizr.css

space-gray.css

overseerr.css

plex.css

nord.css

🛠️ Installation

Setup

Note

Tested on Web Interface v5.5 Set theme to dark in the Web interface menu.

Subfilter CSP

Because Pi-hole uses CSP it will block any attempts to inject stylesheets. This will add https://raw.githubusercontent.com and https://theme-park.dev 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://theme-park.dev \'unsafe-inline\'">';
sub_filter
'</head>'
'<link rel="stylesheet" type="text/css" href="https://theme-park.dev/CSS/themes/pihole/pihole-base.css">
<link rel="stylesheet" type="text/css" href="https://theme-park.dev/CSS/variables/<THEME>.css">
</head>';
sub_filter_once on;

Screenshots

Aquamarine Theme

Hotline Theme

Hotpink Theme

Dracula Theme

Dark Theme

Organizr Theme

Space-gray Theme

Overseerr Theme

Plex Theme

Nord Theme


Last update: October 25, 2021