Dark Admin Theme

I can write you a native version as a “drop in” replacement, though I think the option to choose dark or light themed would be better.

I’m not great at CSS, but I hate light themes enough to give it a go.

Just made a standalone “drop in” replacement for AdminLTE.min.css
Not perfect, but here’s the result (sorry for the bad background, just threw something together):

The only thing there that isn’t in the AdminLTE.min.css file is of course the charts which need to be done in JS.
It’s not finished, far from it I’d say. But it’s a good standalone starting point with 0 use of plugins etc… I’ll post the code if anyone is interested.

EDIT: It looks much better in non-boxed mode (see Settings->Web User Interface->Interface appearance)

4 Likes

Yea I’d be interesting in that, the less browser addons the better

Black is okay,, but I'm a huge fans of the dark grey "night themes"

For instance these types of shades:

https://github.com/ITRav4/PlexRedirect

This is grey, not black.

Must just be the lighting on my screen.

I know several web apps that allow you to place theme files into a directory, and then have a dropdown menu to select the desired theme.

It makes stylizing super easy. Here’s an example of a webpage that allows quick changes of theme.

Makes for a good feature request.

the original poster on this thread was using Stylish that does pretty much that. Though a native alternative was needed for proper implementation.

do you have this hosted on github?

Edit: if so, we could write a simple bash script that makes a backup of the original file, download the new one.
Then make a second script to “uninstall”.

Just uploaded it to github!

Check it out: https://github.com/lkd70/PiHole-Dark

Not made a bash or bat script yet, will do so shortly.

1 Like

If not a way to change the theme in the webui, the devs should probably ship pihole with a “default css” file. Similarly to how pihole detects the adlists.list file, then load the replacement css.

Every pihole -up or -r could make sure the default copy remains.

Look simple enough?

Install instructions here:

Created another thread for this so we’re not spamming this old one:

https://discourse.pi-hole.net/t/dark-admin-dashboard/?source_topic_id=647
1 Like

You know what would be really cool?

IDK if either of you use Organizr, but not only does it support themes, but it also let’s you play with Hex Colors directly from the webui.

I would really love to use this theme. It is easy on the eye and very clean.

I have read the other thread and tried to modify the colours. I do appreciate and respect the work @LKD70 has done but I would like to use some more subdued colours in the graphs and use the graphics from this theme. Thus far have been unable to modify the files correctly.

I would be grateful if you could provide the files that create this theme.

TIA

Sjonnie

Hey! Thanks for the mention :slight_smile:

My theme is based at purely making the current appearance a little easier on the eyes.

The only addition I did make is I made an object as to where you can edit the colours for the graphs and such a little quicker. (see the chartStyle object in index.js for this).

The “icons” used in this (if I understand correctly, you mean the ‘ion’ icons, these can be changed very easily to another from the provided list of ion icons in ionicons.min.js

I didn’t change anything like that (despite it looking better) as i wished to keep it as close to the original as possible. Though I’m welcome to suggestions and change on these things if you wish to comment them on my thread. :smiley:

2 Likes

Is there a way to change color on the grafiklines?
By the way :=) Nice work LOVE the dark theme :slight_smile:

Like the pink colour :wink: thx for a nice theme

Love the theme (99%) but hate the background. I logged in with sftp on Filezilla and found the image at /var/www/html/admin/img/boxed-bg.jpg but no matter what I do I cant change the permissions so I can change the img. I tried 755 777 and nothing works. I just get a failed file transfer and permission denied.

Anyone have a clue what Im doing wrong and how to change the image? Thanks.

Is the theme tested with v5?