AdguardTeam
Feature Request: Optional Dark Theme
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.
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.
~~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.
https://chrome.google.com/webstore/detail/dark-reader/eimadpbcbfnmbkopoojfekhnkhdbieeh https://addons.mozilla.org/en-US/firefox/addon/darkreader/
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.
@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.
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.
@Ultrabenosaurus Amazing work! I'll link to that in my original comment.
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¿
@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
@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.
Hope this gets added soon, this is 2020, we expect dark mode on all the things!
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
@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!
@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.
@WildByDesign glad you're finding it useful. Also just pushed new builds tagging v0.100.9-128-g82aa.
+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
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!
@WildByDesign glad to hear it! Hopefully the next time it breaks is due to the AdGuard Home team adding an official dark theme!
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.
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! :)
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!
For me, the font is changed everywhere to Times New Roman, or something similar... I’m guessing that’s not the expectation...
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.
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
inheritand put the rule at the same point or before AGH actually sets the default font. I'll update the default tosans-serifnow, 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;
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.
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
: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)
