Feature Request: Optional Dark Theme

Ultrabenosaurus commented 5 years ago

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:

![image](https://user-images.githubusercontent.com/1901532/53680286-17677b80-3cd1-11e9-9b00-26f3d5bfcafd.png)

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.

t3dium commented 2 years ago

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?

This is a dns server, I don’t see why ui should be top priority tbf. I’d get dark reader for the time being if you need dark mode, works on all platforms.

benisai commented 2 years ago

This issue should be at the top. I review logs to often and the white is killing my eyes. Please give us a dark mode.

ghost commented 2 years ago

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

in my case on brave simply modify

192.168.1.13##html:style(background-color: #3e3e42 !important) to 192.168.1.13##html:style(html{background-color: #3e3e42 !important})

fixed some white/grey problem on the background.

carlbennett commented 2 years ago

I discovered another GitHub user who also created their own AdGuard dark themes and shared them:

https://docs.theme-park.dev/themes/adguard/ https://github.com/GilbN/theme.park/

KaKi87 commented 2 years ago

The Installation section and the Setup page which it links to, don't explain how to actually install the theme on AdGuard Home, though.

AlecRust commented 2 years ago

https://docs.theme-park.dev/setup/#stylus-method

KaKi87 commented 2 years ago

Oh, but that's client-side.

AlecRust commented 2 years ago

https://docs.theme-park.dev/setup/#methods

ghost commented 2 years ago

https://docs.theme-park.dev/setup/#methods

i'm not quite fan to call external code to adguard home, better to download the code review it and add it. or use the adblock (brave trick) who work well

carlbennett commented 2 years ago

A CSS file is pretty benign, it's not like it's JavaScript. The installation methods that @GilbN provides are adequate. I'm using the nginx sub_filter method and it works well, but I'm sure the Stylus would be okay too (again, it's pure CSS).

ghost commented 2 years ago

A CSS file is pretty benign, it's not like it's JavaScript. The installation methods that @GilbN provides are adequate. I'm using the nginx sub_filter method and it works well, but I'm sure the Stylus would be okay too (again, it's pure CSS).

sure but since the adblock trick do the jobs will not take any risk at all ^^

charles-001 commented 2 years ago

@rodalpho Your rule changes are not working for me for some reason - has anything changed?

ghost commented 2 years ago

@rodalpho Your rule changes are not working for me for some reason - has anything changed?

No it's work like a charm for me, what's your browser and your adblock ? do you have the right url before the ## ?

charles-001 commented 2 years ago

@rodalpho Your rule changes are not working for me for some reason - has anything changed?

No it's work like a charm for me, what's your browser and your adblock ? do you have the right url before the ## ?

I'm using Chrome. I've tried it with uBlock and Adguard... nothing works. I'm using the correct IP for the URL. Isn't this where you put the rules?

ghost commented 2 years ago

@rodalpho Your rule changes are not working for me for some reason - has anything changed?

No it's work like a charm for me, what's your browser and your adblock ? do you have the right url before the ## ?

I'm using Chrome. I've tried it with uBlock and Adguard... nothing works. I'm using the correct IP for the URL. Isn't this where you put the rules?

can't help much i do use the brave intergrated adblock (with my change (see past message)) to adapt it.

Albirew commented 2 years ago

did you clicked on the big blue "Apply changes" button? it should be grey like the others when there are no change pending...

Bugz000 commented 2 years ago

@rodalpho Your rule changes are not working for me for some reason - has anything changed?

No it's work like a charm for me, what's your browser and your adblock ? do you have the right url before the ## ?

I'm using Chrome. I've tried it with uBlock and Adguard... nothing works. I'm using the correct IP for the URL. Isn't this where you put the rules?

can't help much i do use the brave intergrated adblock (with my change (see past message)) to adapt it.

i just applied the two lines using brave internal engine and it works great, guys doing something wrong for sure, not sure what though

just dropping by to say, Please for the love of god dark theme... how can you spend hours developing and testing this all the while staring at the vast expanse of eye bleeding white?

the works has even been done for you, just plug it in, there's us who request it - there's an order of magnitude more who would appreciate it but won't say anything - google also proved that displaying dark themes saves energy globally - it should absolutely be common practice to begin with a black panel than white - it should be encouraged on all fronts

i do not need over 90% of the pixels on my 42" monitor to be blaring the highest lumen white light at me for me to read all 500 black pixels of the text that is being displayed... please Dark mode. it's not that hard.

charles-001 commented 2 years ago

did you clicked on the big blue "Apply changes" button? it should be grey like the others when there are no change pending...

I did, yeah. Still not working for me :/

charles-001 commented 2 years ago

I installed Brave web browser and it works fine. Seems like uBlock/Adguard doesn't work for some reason.

Albirew commented 2 years ago

just dropping by to say, Please for the love of god dark theme... how can you spend hours developing and testing this all the while staring at the vast expanse of eye bleeding white?

when i put my PR for dark theme, it got refused because they already work on a revamp of the web interface with dark theme included:

Thanks for the contribution, but as you can see that issue is already marked to be resolved in v0.108. We're actually planning a full redesign in that version, see #2554.

Bugz000 commented 2 years ago

just dropping by to say, Please for the love of god dark theme... how can you spend hours developing and testing this all the while staring at the vast expanse of eye bleeding white?

when i put my PR for dark theme, it got refused because they already work on a revamp of the web interface with dark theme included:

Thanks for the contribution, but as you can see that issue is already marked to be resolved in v0.108. We're actually planning a full redesign in that version, see #2554.

yeah, 2 ticked since january 2021... for the sake of adding two lines of css? my argument isn't that it's not being done, or that solutions don't exist, it's that it's taking so long to enter 2 lines when this really should have been done from the start

user45876 commented 2 years ago

Also just wanted to say hi and 0lease, please add a dark theme. Please.

kmanwar89 commented 2 years ago

+1 here - can we please get a dark theme?

For those of us OK with bleeding-edge releases, can an alpha or beta be released with the dark theme? We have no information on WHEN the next version will be released, and there's no info in the roadmap. You might say we're being left in the dark.....(without a dark theme to match!)

raykai commented 2 years ago

Seeing as https://adguard-dns.io/ (AdGuard DNS) has a dark theme now. Can we plz get an official dark coption for AdGuard Home? It has been requested over 3 years ago.

kmanwar89 commented 2 years ago

Seeing as https://adguard-dns.io/ (AdGuard DNS) has a dark theme now. Can we plz get an official dark coption for AdGuard Home? It has been requested over 3 years ago.

Good luck? We should be asking @ainar-g why this is not a planned feature?

Is adding in dark mode that contentious?

ainar-g commented 2 years ago

@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.

ghost commented 2 years ago

@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 commented 1 year ago

@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 commented 1 year ago

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

see PR #4527

rodalpho commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

Actually the reply you screenshotted is justified.

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

siewers commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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

mattish91 commented 1 year ago

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 commented 1 year ago

@mattish91 That looks incredible. Thank you for sharing.

WildByDesign commented 1 year ago

It looks like initial dark theme support (https://github.com/AdguardTeam/AdGuardHome/commit/bb9989bb9ab54bfb734880dcb999804c6f2ccda8#diff-06572a96a58dc510037d5efa622f9bec8519bc1beab13c9f251e97e657a9d4edR26) is potentially coming in the next 0.107.22 release with approximate release date of 2023-01-18 (https://github.com/AdguardTeam/AdGuardHome/commit/4e866b7c5b4d2ff777e4917cb91b34a4bbb5e995#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. 👍