Hi,
Dark mode for pi-hole web interface is required so kindly add this feature to the pi hole so that people who love dark mode can use without burning their eyes.
There's an addon called DarkReader for all major browsers, this gives PiHole (and pretty much all other sites out there) a good dark theme for the Admin panel.
[...]
Well, just saying: When you ensure proper lighting in your rooms and do not increase your screen brightness to maximum, then you won't "burn your eyes" given white background. 
Having said that - I know what you mean and rest assured that it'll come at some point. Work is and has been going on for some time, however, a lot of code needs adaptation for fully working theme support. This is likely the reason for why dark mode has also been rejected by the original AdminLTE project.
I wanted to bring user-theming to Pi-hole for a long time and have been working on this every now and then. An issue it that none of the code contributors is a designer (at least not that I'm aware of), however, advice from one would certainly not hurt the overall process. It will be a notable effort to make all the colors definable externally. However, when we reach this point, then colors would need to get picked.
Our current plan is to implement theming support maybe for v5.1. We will likely provide a light and a dark default theme in the beginning. We'll see how things evolve from there. All I can say is that this feature is being and has been worked on for some time.
I just squashed and pushed what I have so far (incomplete!), so if you want to try it (and if you are on the v5.0 beta), run
pihole checkout web new/dark
Make sure to flush your browser cache after running this command. There is currently no theme selector implemented so I hard-coded the dark theme for demonstration.
4 Likes
Looks already great. A few tweaks here an there....
I especially like the "night sky" background.
You know, when we're already doing it, then we can also do it properly.
I pushed a few more commits and it should now be mostly done. When you mean thinks like check boxes or textbox resize-manipulators
then I don't have good news: They are controlled by the operating system on most browsers. We cannot do much about them without a lot of effort. However, if you know other projects knowing how to do it, I will certainly take a look at them.
Most things look great now.
resize-manipulators look look better in chrome than in firefox (so small I've never noticed them before in standard theme)
Ah, yeah, these three things you mention are known.
- The login page: I simply haven't looked at it yet, I disabled authentication on my Pi-hole at home
- Teleporter file input: This has always been like this, with (longer) German texts, its just more obvious:
- Network table background: I have to change to entire concept for this. Yet to be done.
Concerning check box suggestions: I tried something similar to the first, but didn't succeed (more other issues generated by this). I may try again.
Concerning resize handles: They all seem rather extensive for a small task. Let's see. Further experiments needed here as well.
I pushed my work from yesterday night. I implemented a theme changer, you'll also have to run
pihole checkout core new/dark
to get this to work properly.
1 Like
Omg!
Wow!
A post was split to a new topic: Gravity error
I know were talking about design and taste again, but I noticed you also modified the "light theme" in new/dark.
I found it quite useful to see the whole row colored (red=blocked, green=permitted) instead of only the status colored.
With the whole line colored, already a quick gaze was sufficient to see if a domain was blocked. Now I have to shift to status to see if it was blocked or not.
I agree. I felt this change necessary because it was hard to read the text on the dark background. Whichever green I tried, it was difficult to read. Too dark variants (like the original green color also in your screenshot above) had too little contrast to be readable, too bright ones hurt the eye without being more readable. Suggestions are welcome and I'll be more than happy to change this.
edit Pushed a change to restore entire row coloring.
Can try it out but the result might be to keep it for light and change it only for dark.
Styling is only done through CSS classes, it would be a lot more complicated to have features (and this would be one) to depend on the selected skin.
Please try with the most recent push, I made the green a bit brighter in dark mode, it seems to work for me now, but my laptop is already in night mode and the screen is dim (battery almost empty) so this may not be the best reference.
That means: same text color for all styles?
nanopi@nanopi:~$ pihole -up
[i] Checking for updates...
[i] Pi-hole Core: up to date
[i] Web Interface: update available
[i] FTL: up to date
[i] Warning: You are using FTL from a custom branch (release/v5.0) and might be missing future releases.
[i] Pi-hole Web Admin files out of date, updating local repo.
[✓] Check for existing repository in /var/www/html/admin
[i] Update repo in /var/www/html/admin...
: Could not update local repository. Contact support.
No, it just means either all skins have all columns in a row or only one colored. The color can obviously be a different one 
Hmm, try
cd /var/www/html/admin
sudo git reset --hard HEAD^^
sudo git pull
Thanks.
The green is fine, the red in dark mode is a bit to aggressive for my taste.
BTW: is there any difference between midnight and afternoon other than the buttons?