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.

👍

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

[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:
7e2ef01
fa07809

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?! 😭

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?! 😭

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;

[ainar-g]

@kmanwar89, please don't spread misinformation. This is a planned feature, and it's being worked on. Your screenshot is from a duplicate issue. Duplicate issues are closed as not planned, because they are, well, duplicates.

As for why it's not done yet, the reason is simple and boring. We have a limited number of developers, and several large projects over which their time is spread. AdGuard Home's v0.108 redesign, which includes the dark theme, is one of the larger ones. Throughout 2022 pretty much the entire frontend team (and about ⅔ of the backend team) has been busy with AdGuard DNS, leaving only enough time for small fixes in AdGuard Home. Now that it's released, both the backend and the frontend teams have more time for AGH, which is something you all might have noticed by us going through the backlog of issues to make sure we don't miss any real issues.

[BirdInFire]

@kmanwar89, please don't spread misinformation. This is a planned feature, and it's being worked on. Your screenshot is from a duplicate issue. Duplicate issues are closed as not planned, because they are, well, duplicates.

As for why it's not done yet, the reason is simple and boring. We have a limited number of developers, and several large projects over which their time is spread. AdGuard Home's v0.108 redesign, which includes the dark theme, is one of the larger ones. Throughout 2022 pretty much the entire frontend team (and about ⅔ of the backend team) has been busy with AdGuard DNS, leaving only enough time for small fixes in AdGuard Home. Now that it's released, both the backend and the frontend teams have more time for AGH, which is something you all might have noticed by us going through the backlog of issues to make sure we don't miss any real issues.

in my cast after have seen the interface of dns, i would love to see a copy past on adguard home (with the change required) for 2 reason :

• Will help you to maintain both interface with the same code.
• Will bring more consistency in your product.

[kmanwar89]

@kmanwar89, please don't spread misinformation. This is a planned feature, and it's being worked on. Your screenshot is from a duplicate issue. Duplicate issues are closed as not planned, because they are, well, duplicates.

As for why it's not done yet, the reason is simple and boring. We have a limited number of developers, and several large projects over which their time is spread. AdGuard Home's v0.108 redesign, which includes the dark theme, is one of the larger ones. Throughout 2022 pretty much the entire frontend team (and about ⅔ of the backend team) has been busy with AdGuard DNS, leaving only enough time for small fixes in AdGuard Home. Now that it's released, both the backend and the frontend teams have more time for AGH, which is something you all might have noticed by us going through the backlog of issues to make sure we don't miss any real issues.

@BirdInFire - my intention was not to spread "misinformation", simply an honest mistake from a non-developer. The fact that there are multiple, duplicate issues with hundreds (if not thousands) of people requesting the same feature makes it hard to follow which one is the "correct" issue. It seems this issue (#613) is the most correct one, with other duplicates (4771, 4684) having been linked back to this one. My apologies for screenshotting the wrong issue.

However, that doesn't change the fact that this issue (613) has been open for 3.5 years with 0 traction from the developers other than it's a "planned fix". I appreciate the effort you all put into it and eagerly await the fix sometime between now and the next 3.5 years.

In the meantime, I've reverted to using Stylus themes to change the colors myself. I'm not much of a web developer anymore, but I wouldn't think modifying CSS/color themes for an application would be that much of a drain of developer resources. Seems there's plenty of people willing to help speed things along - maybe someone submits a PR to get it fixed before the next release?

[Albirew]

maybe someone submits a PR to get it fixed before the next release?

see PR #4527

[rodalpho]

Adguard Home is free open-source software. Demanding features is unlikely to be fruitful. It doesn't matter how many users want it, unless you're contributing either money or a pull request, the only path forward is to keep this issue alive in a friendly non-demanding way and hope they eventually get around to it. And if they don't, that's OK too. We didn't pay them anything.

[kmanwar89]

Adguard Home is free open-source software. Demanding features is unlikely to be fruitful. It doesn't matter how many users want it, unless you're contributing either money or a pull request, the only path forward is to keep this issue alive in a friendly non-demanding way and hope they eventually get around to it. And if they don't, that's OK too. We didn't pay them anything.

I acknowledge the fact that it's free, and appreciate your sentiment, but it seems the developers aren't interested in even accepting valid PR's, such as the #4527 mentioned above.

Case in point:

Even though someone is doing the 3+ year old pending work for them, it doesn't seem like that PR was accepted for obscure, vague reasons only know to the devs. I would argue that the nature of open source is (or should be) to foster conversation, constructive criticism and accepting valid PR's as they come in. I don't see that happening here - instead it seems contentious to voice my respectful opinions.

I am not a developer and don't have the skills to submit a PR - I can simply give my backing to a valid idea and hope the developers care. I would purchase the product itself, but lack of dark mode is 100% a non-starter.

[KaKi87]

Actually the reply you screenshotted is justified.

Unlike swagger-api/swagger-ui#5964 for example.

[siewers]

This

[...] and accepting valid PRs as they come in.

is not what open source is about. It's a misconception that a PR has to be accepted, just because someone thought it might be a good idea.
I know of open-source projects where maintainers daily have to reject PRs because people think that any idea they might have, is where the project is headed.
There is some weird sense of entitlement where engineers think that, because they put time and effort into something, it's automatically accepted and appreciated. Time and effort do not equal quality or need, which a lot of people tend to believe.

I think the second screenshot is completely on point and politely asks what contributors exactly need to do - discuss it! Otherwise, you end up in a situation where you wasted your own time.

[Jaladhjin]

I came to /agree with this if there wasn't already an option somewhere to set it.

Dark Mode would be so awesome & honestly that's my only gripe & a very small one at that at the moment.

I know I know things like Dark Reader could achieve the same effect but it's just not the same to be very honest 🤣😂

Hoping it gets added.. very much needed for us creatures of the night 😂🤣

[TheScenePool]

My eyes burn every time I open the page on my 1000nit monitor.

[mattish91]

I made some minor improvements to the filter for uBlockOrigin to get closer to a better result with less glitches.

(This is basically pitch black)

my.adguard-home.url##html:style(filter: invert(1))
my.adguard-home.url##button.btn-success:style(background-color: #a145ff !important; border-color: #a145ff !important)
my.adguard-home.url##span.badge-success:style(background-color: #a145ff !important; color: #000 !important;)
my.adguard-home.url##a.active:style(color: #994a8b !important; border-color: #994a8b !important;)
my.adguard-home.url##div#root:style(background-color: #fff !important;)

If there is any interest i might actually clean this up a bit more to keep colors and other things original as filter: invert (1) is a bad choice over actually setting styles correctly. 😂

UPDATE:
Dark mode - Not pitch black, retain default colors on a dark grey background, cards visible and better menu. (still some minor bugs, the scroll bar is still white (Seams not selectable?)

UPDATE 2:
Realized not everything was in order on all pages, so i fixed those now. Some element like in previous version is not editable, like the scrollbar and some service switches under "Blocked services". In order to fix those elements i need access to the actual css files.

UPDATE 3:
Seams i missed some modal stuff, so added those in dark mode too :)

Screenshot here: https://sync.magnusson.gq/index.php/s/jTeLM3gLxXdxerz

my.adguard-home.url##div#root:style(background-color: #111 !important; color: #fff !important;)
my.adguard-home.url##div.header:style(background-color: #000 !important; border-bottom: 1px solid #222 !important;)
my.adguard-home.url##a.nav-link.pl-0.pr-1:style(filter: invert(1) !important)
my.adguard-home.url##.mobile-menu,.footer:style(background-color:#000 !important;)
my.adguard-home.url##.card,.dropdown-menu,.dropdown-menu-arrow,.select.select--language,div.logs__row--white:style(background-color:#222 !important;)
my.adguard-home.url##.select.select--language,select.form-control:style(color:#fff !important;)
my.adguard-home.url##.dropdown-item:hover, .dropdown-item:focus:style(background-color: #333 !important; color:#fff !important;)
my.adguard-home.url##div.logs__text,span.checkbox__label-subtitle,div.form__desc--top,div.form__desc,span.logs__text,div.rt-td:style(color: #999 !important;)
my.adguard-home.url##div.rt-tr-group:style(border-bottom:1px solid #999 !important)
my.adguard-home.url##textarea,input,input.checkbox__input,div.select__control:style(background-color:#111 !important; color: #999 !important;)
my.adguard-home.url##div.logs__row--red:style(border-color: 1px solid red !important; color: red !important;)
my.adguard-home.url##div.logs__table,div.modal-content:style(background-color:#222 !important; color: #fff !important; border-bottom: 1px solid #fff !important;)
my.adguard-home.url##div.progress:style(background-color: #3a3a3a !important;)
my.adguard-home.url##select.form-control:not([size]):not([multiple]):style(background-color:#222 !important;)
my.adguard-home.url##div.ReactModal__Overlay--after-open:style(background-color:#000000cc !important)
my.adguard-home.url##div.tab__control--active:style(color:#FFF !important)
my.adguard-home.url##div.tab__control:style(color:#999 !important)

[WildByDesign]

@mattish91 That looks incredible. Thank you for sharing.

[WildByDesign]

It looks like initial dark theme support (bb9989b#diff-06572a96a58dc510037d5efa622f9bec8519bc1beab13c9f251e97e657a9d4edR26) is potentially coming in the next 0.107.22 release with approximate release date of 2023-01-18 (4e866b7#diff-06572a96a58dc510037d5efa622f9bec8519bc1beab13c9f251e97e657a9d4edR21).

Unfortunately, I do not have a build environment set up and therefore cannot test-build this dark theme branch to see what stage of completeness it may be at.

I am excited to see this coming to life now though and also glad that it may be coming to the stable 0.107.x series also. 👍

[eduardoaddad]

cd76a30

Dark theme support is coming

[ainar-g]

The dark theme has been merged and released to the Edge channel. We plan to ship it together with the other fixes in v0.107.22.

A thank you to all who followed this long-overdue issue. Please follow the instructions in #5375 if you have feedback.

[thecode]

Looks great:

[castillofrancodamian]

"Auto" does not indicate that it is a sector to change this mode.