Dark Mode for Web Interface

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
Screenshot at 2020-04-29 20-42-58
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)

Room for improvement

Bildschirmfoto zu 2020-04-29 20-51-58

Checkboxes

CSS: Checkbox styling
https://codepen.io/bbodine1/pen/novBm

Resize handle

html - How can I change the look of resize handles? - Stack Overflow
https://jsfiddle.net/MM94f/
HTML Form How to - Create Custom CSS3 TextArea Resize Handle

Ah, yeah, these three things you mention are known.

  1. The login page: I simply haven't looked at it yet, I disabled authentication on my Pi-hole at home
  2. Teleporter file input: This has always been like this, with (longer) German texts, its just more obvious:
    Screenshot at 2020-04-29 21-10-04
  3. 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.

:flushed:

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 :slight_smile:

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?

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.

Before:

After (#de3033)


EDIT
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.