Material Design overhaul

[M-Barrows]

This is a design overhaul that presents the dashboard in a black/grey/white theme according to the material design documentation. I've also been able to update the charts a little to be less busy and more playful in color. I have plans to further polish the other pages but I feel this feels like a good consistent start.

Since this is one of the top installed dark themes and served as a starting point for my changes, I thought it best to make a pull request back to the source! That said, I know this is a larger style shift and would understand if it does not fit an aesthetic you are interested in.

[maelcum]

That is a very nice refinement.

• I'm not sure about the brightness of the gridlines. The Query Log is too bright, though, where the current design is much more muted. Same for "Long term data"/"Query Log" and /"Top Lists". The "Tools"/"Query List" though is perfect.

• I love the fact that dialogs like the "Date and time range" picker in the "Long term data"/"Graphics" submenu is skinned. But I would miss the guidelines in the graphics...

• The mixed display in "Settings"/"System" is weird. Could there be a mistake?

[M-Barrows]

Thanks for your comments!

• I agree that the Query Log is bright. I have plans to soften that up a bit in future.
• I'm glad that you like the Date and time range picker. The grid lines in the graphics are still there, they just don't contrast very much. I will work on brightening them up a bit if possible.
• The settings menu has all sorts of odd CSS styling that I haven't quite re-organized yet. I will put this towards the top of my list though!

Thanks again for all of your feedback, it's helpful in focusing my efforts!

[M-Barrows]

@maelcum - check out the newest version of my fork, I think you'll be pleased with the updates! Some notable mentions are:

• Graphic grid lines are easier to see
• Network table colors have been inverted (kept colorful to show recency of client)
• Long Term Data tables are now more muted
• Settings tables have a consistent style
• Doughnut charts are now easier to read bar charts

As always, let me know if there are any issues or requested features!

[maelcum]

@MBarrows20 - getting near perfection with each iteration!
I love the bar chart! Easier to interpret.

The few things I've found are not problems of your (or jacobbates' design) but probably inherent "flaws" in the source:

• Settings/System as well as Settings/Blocklist are missing the ... "highlighted line above the title field"
  Just check Settings/System and compare the two headlines "Network Information" (not ok) and "Danger Zone!" (ok)
• Settings/DHCP still has the too-bright grid lines
• Settings/Teleporter: the two "Export"/"Import" buttons should probably be blue, like the other pages
• Settings/DNS and Settings/DHCP should probably have rectangles around the "Save" Button, like the other pages.

And I am fully aware that all of this is nitpicking! The theme is good as it is!

Thank you for you effort and diligence!

[M-Barrows]

@maelcum, it's not nitpicking if I ask for it - constructive feedback at its finest! Comments on your finds below in the order you made them:

• I believe this was probably done to differentiate "information" from alterable settings. However, I think it would give it a consistent feel to update them all to the same color so consider that on the to-do list.
• Good catch. These tables will be the end of me haha
• I'm not sold on the default blue color from bootstrap yet. I think I can do better to create a unified theme. That said, the color should be consistent so I will at least manage that in the next update
• I think the boxes are a vestige of the old design that I will likely alter/get rid of in future updates. They seem a bit jarring and I could probably make them look better. But, again consistency in design language will be coming.

I'm so happy that you're enjoying the changes and I look forward to continue iterating! I'll tag you when a new version goes live 😄 👨‍💻

[XhmikosR]

@MBarrows20 I'd be personally very interested in landing this in the official repo. As long as we plan ahead, it should be doable with a toggler and a little JS along with the CSS overrides.

Would you be interested in this?

[M-Barrows]

@XhmikosR - I'd be honored if I could contribute to the official PiHole code (especially in such a visible way)! It's been a while since I've looked at this project however and I know there have been a few updates from the PiHole team since my last change. Let me know if you have suggestions for how to easily integrate this functionality.

[XhmikosR]

I'd really like to see a dark theme implemented in the main repo, but I think the best way would be if we could get both @jacobbates and you @MBarrows20 to work with us and find the best solution for this. :)

Adding a toggler isn't a big deal, the rest of the changes is what we should discuss together finding an optimal way to proceed.

If you could please send an email to @dschaper ([email protected]) with your email address he should be able to invite you on Mattermost.

[dschaper]

Invites sent.