Dark Mode for Web Interface

No, only the buttons differ (mainly to show in code how to do this:

(first element is the description, second one the style sheet, third one the radio/checkbox style, fourth one the radio/checkbox style variant (colors are modifiable for the simple minimal style)).

I will likely only keep the midnight one.

Aggressive as in "too bright" or "too dark" or ... ? Even if there is the danger of repeating myself: Suggestions welcome!

Was not sure, had to try it out. Was to dark.


After (#de3033)

I wanted to modify the network table as well but could not find a (how do you call that, item?) in the default-dark.css. It looks like the rgb are set for every row separately.

I am digging the dark theme. One thing that has popped up for me today with it is a couple of the bars in the activities table on the homepage is almost black. I was trying to figure out how to change it but am not a programmer of any kind. It might be worth filtering this color out in the dark theme (maybe replace it with the inverse).

They are inherited from AdminLTE here:

This is not very easy as

Sure, that's the idea of the background: It should give you additional information about the individual item. You are looking for this:

Found those but they seem just to change the color of the legend at the bottom.

After saving the dark theme after entering the dashboard there is still a light theme and the default theme is again in the settings. Settings are not saved.

Did you miss this one?

1 Like

ok... error: unable to complete update, please contact support, but works :smiley:


You guys need to add a toggle button for dark/light mode. Check out the link below:

Also the color for blocking and whitlisting in the query section isnt that much visible in the dark mode so kindly fix that too.


For efficiency reasons, the colors are only loaded into the table algorithm when the table is drawn, not in real time. This is necessary to compute the gradient.

You can do one of the following:

  1. Change the colors directly in the style sheet I referenced above
  2. Change the underlying variables, like:
    (this needs my most recent commit to work)

Why? The theme changer has many advantages like allowing more than one theme. Users can then submit themes (or use their own locally, even) and everyone else will benefit.

Having said that, this is WIP and nothing is set in stone, yet!

@yubiuser Is looking at them and found the green okay. There will be no optimal solution that will be best for everyone, hence, the ability to add an arbitrary amount of different themes. You can select your favorite one or add your own tweaks to a new one.

Well, okay, if it works... still, please try

cd /etc/.pihole
sudo git reset --hard HEAD^^
sudo git pull

to ensure you're on track and don't experience any issues in the future.

1 Like

Done. Themes look great. Thanks for your work and support.

Addendum to:

One should never say we aren't trying. It doesn't work. It can only style very simple pages. Furthermore, we'd have to allow unsafe-inline scripts as it modifies the page styling in a rather dirty way. This is not really something we want to do (note that the test page doesn't have Content Security rules at all).

Compare normal

to "dark mode"

I'm pretty sure you'd find this "dark mode" insufficient.


I pushed two more things:

  1. Suppress the white "flashing" on page reload in dark mode by setting a black body property early on, and
  2. Improve overlays on dashboard graphs shown during data loading/parsing.

Well you guys should add a themes tab in the settings tab where people can select themes and can also upload their custom themes to their pi-hole from the Web UI. You can also make a themes section on the pihole forum where users can submit their custom themes and others can download that file and use it on their pihole.

Yep, I was looking in the wrong place then. I was looking in:


When I have spare time I will try and read on it some so maybe I won't continue to ask repeat dumb questions.

Feel free to open a PR and submit your code changes.


I seem to have the tendency to like brighter colors more. Please note the 24h color is missing as I have no device last seen then.

$(".network-gradient").css("background-image","linear-gradient(to right, #2d6b1a 0%, #525200 100%");

That's also why I am in favor of a theme picker instead of the one dark mode that needs to suit anyone. You can prepare your own style sheet (I even added comments in a lot of places what is styling what in case this is not obvious) and submit it to upstream Pi-hole. We will then review and include it for anyone in the next release.

By this, everyone can benefit. And if users want to create their own custom style, the can start from the one which the like the most, reducing the absolute amount of work they'll have to put in to get what they want.

1 Like

Me too.
But I would proceed differently from here. Instead of

I would suggest to deliver only 2 themes by default (light/dark) and no user generated. But instead extend the 'theme manager' a bit more, allowing to pick a folder or file that contains the user modified style templates. I can imagine a ecosystem of themes growing here on discourse where users share and discuss their themes (new discourse category "themes"?). I think it is beyond pihole's scope to review and include dozens of user generated themes - but maybe provide the necessary infrastructure?

Then you add the attack vector of remote code. Even if not exploitable under all circumstances,

IE and Firefox both contain ways to execute JavaScript from CSS. [source]

This can be dangerous as users could use this to take (remote!) control of your Pi-hole, at least as long as you have the dashboard open. They could steal your login password as well as your entire settings or even manipulate them. Even when there are security measures in our dashboard which prevent foreign JS code execution, you can never be safe against possible zero-day exploits of browsers which are simply not fixed due to either not being known publicly or by users using ancient browsers (most prominent with Internet Explorer which is still used out there).

Hence, I feel the ultimate necessity to review the submitted style sheets before we provide them to other users to ensure safety on their side. Furthermore, when people offer their style sheets for downloading on whatever platform, they may collect the IP addresses of Pi-hole users which is something touching your privacy as well. We don't want this and this is also the reason why we try hard to ensure you get everything around Pi-hole from Github itself so you can be sure we're not collecting information on Pi-hole users. Privacy first has always been and will always be one of the top priorities of Pi-hole!

Having said all that, I'm still convinced that people submitting style sheets is a good idea. We can review and merge them and all users will be able to use them while they can rely on Pi-hole's privacy rules.

I don't expect a huge rush of contributions, but, of course, there is also the maintainability criterion. If it settles down at 5 style sheets, no problem, when we add new features which need new colors for which nothing similar exists to date, we'd have to add this to all style sheets ourselves and imagine how the initial designer would have liked things to look like. Or rather, we have to have dedicated users we can contact during each beta phase to adapt their style sheets.

You see, there is a lot of need for discussion, however, I don't think we should have unreviewed style sheets floating around.