Feature Request: Optional Dark Theme

[Ultrabenosaurus]

Please can you add an optional dark theme of some sort? There are plenty of examples online to take inspiration from like community-made Atom themes hosted on Github. I have a browser extension that allows me to turn any website "dark" but it basically just inverts CSS colours, so the colour-coded bits in AdGuard Home and the logo in the top-left don't really work.

Screenshot:


Your environment

Description	Value
Version of AdGuard Home server:	0.93
How did you setup DNS configuration:	Primary DNS for my Router
If it's a router or IoT, please write device model:	Raspberry Pi 3 Model B
Operating system and version:	latest Raspbian (I updated last night)

EDIT

For those interested I have published my latest dark theme CSS on userstyles.org for Stylus users:

https://userstyles.org/styles/177418/adguard-home-dark

I recommend using the "Customize Settings" button to set the IP address or local domain of your AdGuard Home interface before installing the theme, so that it works straight away. I've also added a setting so you can specify a main font; personally, I quite like Lato at the moment. Thanks to @carlbennett for the initial CSS and inspiration to tinker with this.

[ameshkov]

Well, the UI is not our top priority at the moment, but we'll take this feature request into account once we start working on the final design.

[Ultrabenosaurus]

That's fine, I thought that'd be the case for now :)

[frenck]

It would look amazing though...

[carlbennett]

I'm making a userstyle theme for those interested. This is just a work in progress with what I have right now. But for me, this is so much nicer already.

@Ultrabenosaurus made this into an official style on userstyles.org: https://userstyles.org/styles/177418/adguard-home-dark

Get the Stylus extension: https://add0n.com/stylus.html

When you install the Stylus extension and install the custom style, you will need to go into Stylus and change the IP address in this style to match the location of your AdGuard Home install, otherwise the style will not work.

:+1:

Here's a preview.

[ghost]

https://chrome.google.com/webstore/detail/dark-reader/eimadpbcbfnmbkopoojfekhnkhdbieeh https://addons.mozilla.org/en-US/firefox/addon/darkreader/

[carlbennett]

I don't want to have to keep flipping a switch. That extension doesn't work well on some pages. If I enable it just for AdGuard Home, it changes the color on other sites too, because it's a global toggle. I like having finer control over specific pages. I have a pinned tab with AdGuard Home, so it's always open. I do have that extension already installed and available to me, though.

[ghost]

[Ultrabenosaurus]

@carlbennett I've added a few bits to improve the Query Log page:

body { background-color: #222; color: #eee; }
a { color: #aaffaa; }
.header { background-color: #336633; color: #eee; }
.mobile-menu { background-color: inherit; }
.footer { background-color: #113311; }
.footer a:not(.btn) { color: #aaffaa; }
.card, .rt-tr { background-color: #333; }
.card-table tr td, .card-table tr th { border-color: #555; }
.rt-tr.red { background-color: #5f3333; }
.rt-tr.green { background-color: #335f33; }
.rt-tr.-even { filter: brightness(85%); }

I've set specific colours for the red and green rows, which your CSS left as mostly-white, and made the rows alternate with a slightly darker grey. The alternating bit also required specifying a default colour for .rt-tr which I tacked onto your .card declaration.

[Ultrabenosaurus]

For those interested I have published my latest dark theme CSS on userstyles.org for Stylus users:

https://userstyles.org/styles/177418/adguard-home-dark

I recommend using the "Customize Settings" button to set the IP address or local domain of your AdGuard Home interface before installing the theme, so that it works straight away. I've also added a setting so you can specify a main font; personally, I quite like Lato at the moment.

[carlbennett]

@Ultrabenosaurus Amazing work! I'll link to that in my original comment.

[iganeshk]

Here's my attempt on dark theme for Adguard Home after getting blinded multiple times accessing from phone.

https://github.com/iganeshk/AdGuardHome/

Installation:

Clone the original repository

git clone https://github.com/AdguardTeam/AdGuardHome

Download and apply the dark theme patch onto it

wget https://raw.githubusercontent.com/iganeshk/AdGuardHome/dev-personal/dark-mustard-theme.patch
git apply dark-mustard-theme.patch
# comment out target builds which aren't required in the release.sh script and build
./release.sh

Deploy the binary¿

[WildByDesign]

@Ultrabenosaurus Excellent work with this Stylus theme. Thank you for creating and sharing this. I've been using it for the past 3-4 days and it's fantastic.

It appears that a commit in past 24 hours may have messed up your CSS theming specifically regarding the Dashboard menu. Clicking any of the menu items randomly causes that Dashboard menu section to have the background go all black. You can test this on the most recent AGH beta build that was compiled today. These changes will likely make it into stable release in a few days or so, therefore I just wanted to give you a heads up. I really enjoy your theme.

I don't know CSS at all so I cannot help with a suggested fix, but I believe that the following commit may be what caused the changes and requiring some fixes for your Stylus theme. Link: https://github.com/AdguardTeam/AdGuardHome/commit/a5c2ad1b2fa52a071beb759d6b673de73a3d4f4d

[Ultrabenosaurus]

@WildByDesign I'm glad you like it, and thanks for the heads up. I only use "stable" releases myself, but I'll keep an eye out for any issues with the CSS in the next few releases and get it fixed ASAP. I had a look through the changes in that commit but couldn't see any HTML or CSS changes.

[rodalpho]

Hope this gets added soon, this is 2020, we expect dark mode on all the things!

[iganeshk]

Hope this gets added soon, this is 2020, we expect dark mode on all the things!

give this a try meanwhile, building against master and pushing docker images as well

[WildByDesign]

@iganeshk Are you able to share some compiled binaries from your sources? Unfortunately I haven't figured out how to compile from within Windows 10 WSL1 or WSL2. It's just an area that is very unfamiliar to me still.

EDIT: Sorry, I just checked your releases now. Silly me. I will try yours now. Cheers!

[WildByDesign]

@iganeshk I have been using your builds for a couple of days now and I am absolutely enjoying it. Easy on the eyes, excellent colour combinations, professional looking, etc.

Keep up the great work. Thank you for sharing this with the community. I've updated to updated (v0.100.9-91-g9a81) build from yesterday now as well. It would be much appreciated if you can continue sharing these builds from time to time until AGH has a built-in dark theme.

Hopefully the developers will find a way to merge this into their codebase. Although that would require some sort of drop-down theme selection or slider of some sort to choose colour schemes.

[iganeshk]

@WildByDesign glad you're finding it useful. Also just pushed new builds tagging v0.100.9-128-g82aa.

[ghost]

+1 for dark mode, at night the sudden bright white hurts - usually try to configure AdGuard Home during the night to avoid any issues when people are trying to use the internet

[WildByDesign]

It appears that a commit in past 24 hours may have messed up your CSS theming specifically regarding the Dashboard menu. Clicking any of the menu items randomly causes that Dashboard menu section to have the background go all black. You can test this on the most recent AGH beta build that was compiled today.

@Ultrabenosaurus Good news! This issue has resolved itself with today's stable release v0.101.0.

It's strange because every single beta release (all of them) between the past stable release and this current release have had this menu issue with your theme. It must have something to do with the beta channel releases specifically or potentially they landed a last minute menu fix within hours before the stable release, which commits seem may also be the case.

I think the two following commits (last commits prior to stable release) are likely what fixed the weird menu issue: https://github.com/AdguardTeam/AdGuardHome/commit/7e2ef010399c0a308131c14beca1f35eb9e331fd https://github.com/AdguardTeam/AdGuardHome/commit/fa07809189a0528469d7102c82c5b9f663566681

Regardless, all is well and your Stylus theme is still flawless and fabulous. Cheers!

[Ultrabenosaurus]

@WildByDesign glad to hear it! Hopefully the next time it breaks is due to the AdGuard Home team adding an official dark theme!

[vordenken]

Would love to see a darkmode as well, especially since darkreader in firefox doesnt work on the adguard webpage. Another browser addon just for one site seems a bit overkill too.

[WildByDesign]

AdGuard Home fans! We need some more upvotes to the original comment of this feature request so that the developers can decide based on the amount of upvotes. They quite likely sort the feature requests by the amount of upvotes and determine when and what to implement.

Let's make this happen! :)

[Ultrabenosaurus]

For those interested in my dark theme, I am still actively updating it! At least the parts I can see without going through the new installation procedure... 😉

https://userstyles.org/styles/177418/adguard-home-dark

I have just published an update for the Tags input system in the New Client modal. I have no idea why the AdGuard team made it this way, but the actual list of possible tags is inserted and deleted from the HTML every time the drop-down menu "opens" and "closes". Even when I right-click on the opened menu, it disappears. If I open the Inspector and then open the menu, clicking in Inspector to expand the element closes the menu WHICH DELETES THE HTML!!

WHY?! :sob:

I managed to dissect the structure and classes in the end by inserting a breakpoint on all mousedown events and then stepping through until the menu appears, then using the element picker tool from Inspector to focus it. That way the menu was locked in time so I could play with it in Inspector! Except when I was finished, for some reason Firefox wouldn't step through or resume the code any more and removing the breakpoint also didn't fix it so I had to reload the page!

WHY?! :sob:

Oh well, it's working now. Enjoy!

[Veldkornet]

For me, the font is changed everywhere to Times New Roman, or something similar... I’m guessing that’s not the expectation...

[Ultrabenosaurus]

For me, the font is changed everywhere to Times New Roman, or something similar... I’m guessing that’s not the expectation...

@Veldkornet Using my dark theme? I can only imagine it's because I set the default font value on userstyles.org as inherit and put the rule at the same point or before AGH actually sets the default font. I'll update the default to sans-serif now, but if you click the Customise Settings button on the userstyles.org page before installing the theme you can enter the name of any font you want to use (provided it is installed on your computer). Personally, I really like Lato.

[Veldkornet]

For me, the font is changed everywhere to Times New Roman, or something similar... I’m guessing that’s not the expectation...

@Veldkornet Using my dark theme? I can only imagine it's because I set the default font value on userstyles.org as inherit and put the rule at the same point or before AGH actually sets the default font. I'll update the default to sans-serif now, but if you click the Customise Settings button on the userstyles.org page before installing the theme you can enter the name of any font you want to use (provided it is installed on your computer). Personally, I really like Lato.

I changed it to this, now it looks normal: font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;

[rodalpho]

It would be great if AGH allowed users to drop a custom CSS file on the filesystem and just use it. I don't want to install another addon just to style this one page. Messed around with custom userContent.css files in Firefox for a bit before giving up, didn't seem to work.

[Ultrabenosaurus]

Apparently the Query Log has blue rows for PTR / "Rewritten by the hosts file rule" entries; now they're dark blue instead of nearly white.

I don't know how new / common these are supposed to be, but I've never seen them before and no one has complained about my theme missing them, so... at least it's fixed now!

https://userstyles.org/styles/177418/adguard-home-dark

[Aikatsui]

:point_right: Optional Dark Theme When implement make sure that dark theme compatible with dark reader extensions and browsers built-in dark mode Eg: chrome://flags > force dark mode for web contents (this has affected with other web apps)

[ghost]

now that github have his dark mode too, can we hope to see one in adguard home too ^^

[MrDrache333]

Thought AdGuard already had that...I mean...piHole has that for a Year now?

[rodalpho]

No, unfortunately all the posts with dark themes in this github issue are userstyles, not part of AGH.

[hl2guide]

Please update AdGuard Home to have a dark mode.

The tool is so useful, please make it easy on our eyes at night.

[grf692]

I can only say I'd like a dark mode too :)

[ameshkov]

Hey all, we'll definitely do that, but only after we finish with the massive redesign #2554

[gyCfjSnO]

Problem Description Web page is very bright when viewing at night

Proposed Solution Have a dark mode to reduce brightness

[rodalpho]

For anyone using uBlock Origin, I figured out how to (very hackily) invert colors. It looks better, if not perfect. I use uBO in my browser as it's superior to AdGuard Home's limited host-based blocking, and run AGH on my LAN to block ads in mobile apps, streamer boxes, etc.

Custom filters:

adguard.domain.com##html:style(filter: invert(1))
adguard.domain.com##html:style(background-color: #3e3e42 !important)

[user858753257]

Any progress here ?

For desktop abgösse I use "DarkReader" . But for mobile I had no chance until now .

[Albirew]

For anyone using uBlock Origin, I figured out how to (very hackily) invert colors. It looks better, if not perfect. I use uBO in my browser as it's superior to AdGuard Home's limited host-based blocking, and run AGH on my LAN to block ads in mobile apps, streamer boxes, etc.

Custom filters:

adguard.domain.com##html:style(filter: invert(1))
adguard.domain.com##html:style(background-color: #3e3e42 !important)

If you want to keep same color set, it's better to use filter:hue-rotate(180deg) invert(1). Maybe it's me seeing devil in details but this way, colors are closer to intended ones (eg: dark blue becomes light blue instead of light orange)

[rodalpho]

Thank you, that does look much better than a straight inversion. Updated my filters!

[WildByDesign]

@Albirew @rodalpho These custom filters for uBlock Origin are interesting and look quite nice. It's a good alternative for now until dark mode is officially here.

Would these custom filters work with AdGuard AdBlocker extension as well? Is the intention to switch adguard.domain.com to the device IP address such as 192.168.0.1?

Thank you both.

[Albirew]

Would these custom filters work with AdGuard AdBlocker extension as well? Is the intention to switch adguard.domain.com to the device IP address such as 192.168.0.1?

Well, I believe it would works since the format is somewhat recognized on every ad blockers. It's also working with IP, for reference, my filters are like this (replace 192.168.1.13 with any IP you want):

192.168.1.13##html:style(filter:hue-rotate(180deg) invert(1))
192.168.1.13##html:style(background-color: #3e3e42 !important)

[WildByDesign]

@Albirew Thank you. That worked for me and looks quite nice. The only issue is that the top 50% of the page is dark background, the bottom 40% or so is light grey background, and then the footer at the bottom is dark background.

Do you have a section of light grey at the bottom where the tables for Top queried domains and Top blocked domains are? Possibly this could be a difference between uBlock Origin and AdGuard Adblocker extensions.

[Albirew]

yep, looks like filter doesn't work on background but still work on background inside of window when applying a filter on background... 🤡 i replaced last rule color with 192.168.1.13##html:style(background-color: #06080c !important) making the same color everywhere

[ToNIX-]

yep, looks like filter doesn't work on background but still work on background inside of window when applying a filter on background... 🤡 i replaced last rule color with 192.168.1.13##html:style(background-color: #06080c !important) making the same color everywhere

Thank you for those filters, it looks absolutely amazing!

[kmanwar89]

Just installed AdGuard and the first thing I noticed was the eye-bleaching white background. Extremely hard on my eyes, so I'm glad there's an open issue for this, though really surprised it's been more than three years to implement something like dark mode. Is UI/UX not a priority, at all?

[MrDrache333]

Just installed AdGuard and the first thing I noticed was the eye-bleaching white background. Extremely hard on my eyes, so I'm glad there's an open issue for this, though really surprised it's been more than three years to implement something like dark mode. Is UI/UX not a priority, at all?

For me it was very easy...deinstalled AdGuard and installed piHole. Has everything i need. Including DarkMode.

[rodalpho]

If pihole supported DoH natively I would probably switch back too. Shrug, no one solution works for everybody.

[ToNIX-]

For me it was very easy...deinstalled AdGuard and installed piHole. Has everything i need. Including DarkMode.

Adguard is less prone to break IMHO and the update from the web page is so convenient that I ditched Pi-Hole.