Dark theme readability feedback and API bugs issue

[ainar-g]

Prerequisites

• I have checked the Wiki and Discussions and found no answer

• I have searched other issues and found no duplicates

• I want to request a feature or enhancement and not ask a question

Description

In this issue we would like to gather feedback regarding the dark theme (#613).

Please read the following instructions before posting!

1. do not post feedback based on personal taste (i.e. “I don't like this colour”, etc.);
2. do post feedback regarding contrast and readability issues (i.e. “the text in this dialog becomes barely readable”) or API breaking;
3. do look through the previous comments to make sure someone hadn't made one about the same issue before;
4. add a screenshot or a video of the issue;
5. add your browser and OS information;

[Birbber]

• Too light fields for dhcp settings (Encryption settings too): https://uploads.adguard.org/annrgy_u7t2e.png
• "Previous" and "Next" are almost invisible in dark mode (client settings, etc.): https://uploads.adguard.org/annrgy_54gtv.png
• Scroll colors should be less bright: https://uploads.adguard.org/annrgy_dga4l.png
• Fix hint color: https://uploads.adguard.org/annrgy_g9bqf.png
• The login form is always light: https://uploads.adguard.org/annrgy_e0okw.png
• Color for blocked services is too bright: https://uploads.adguard.org/annrgy_ajjts.png
• Tabs on "New client" section should be highlighted by clicking: https://uploads.adguard.org/annrgy_dlwmk.mp4
• The background is not transparent after opening the add client window: https://uploads.adguard.org/annrgy_279ma.mp4
• Fields turn gray when disabled: https://uploads.adguard.org/annrgy_3d7qg.mp4

[ainar-g]

It seems like we forgot to include the updates locales for the theme selector into the release. This should be fixed as well.

The beta version v0.108.0-b.25 does include them, so those who require it can temporarily switch to that version.

[WildByDesign]

The only issue that I noticed so far is that the initial Login page does not have dark mode yet even after dark has been manually selected.

Great work, AdGuard Team. Everything looks quite good so far.

[Alex-302]

The highlighting of blocked requests is too pale.

Details

[ameshkov]

Flashing when navigating to the dashboard:
https://uploads.adguard.org/up04_screencast_gj29c.mp4

[CodeSapiens]

I appreciate the work and time involved in making this change, but I believe it should be a configurable option.
Perhaps it should be under Settings -> General Settings?

[ainar-g]

@CodeSapiens, the theme selector is at the bottom of the page, near the language selector.

[CodeSapiens]

It does not show up for me.

[ainar-g]

It should be there, unless you're logged out:

Are you sure that that isn't a browser cache issue? How did you install AdGuard Home? If you're using something like the Home Assistant plugin, they usually need some time to update their APIs as well. Also, logging out and logging in might help as well.

[CodeSapiens]

I have closed the browser, cleared cookies, restarted the router, and still no joy. I have two AGH installations, and only the one installed on a GL.iNet router (OpenWRT) prompted me to upgrade to the new version. The other installation is on a Raspberry Pi, also OpenWRT, and that one is still running v0.107.21 and does not show an icon to check for updates at the bottom of the page. The updated OpenWRT package list still shows 0.107.21-1 as the latest version, which as you suggested, is most likely due to their APIs not being updated yet.

Question: Is there something I can change on the Raspberry Pi installation to force AGH to check for updates automatically?

Thanks for your time Ainar-g.

[ainar-g]

GL.iNer routers may have their own authorization scheme, so that might be it. We'll investigate that, thanks. In the meantime you can stop your AGH and edit the configuration file to say:

# …
theme: light

Question: Is there something I can change on the Raspberry Pi installation to force AGH to check for updates automatically?

Such questions are better discussed in the GitHub Discussions. And that may have something to do with packaging.

[CodeSapiens]

Thanks again for your time.

[Alex-302]

Dark theme applies too late after refreshing a page

Details

[Alex-302]

Font in navbar is too dark

Details

[Birbber]

When checking filters updates 'Loading' is too dark: https://uploads.adguard.org/annrgy_pemty.mp4

[Hanif-Faez]

The queries dropdown menu is barely readable

[EugeneOne1]

The coloring of log entries for rewritten requests makes the IP of a client unreadable.

[Skyxim]

I had a problem viewing the details log with the font reversed and the background still white. It works the same way on my phone

[unknown4849]

in firefox seem imposible to read this.

but in Chromium base (brave , edge) can be read but text gray and white background

[ainar-g]

Most of the issues should now be fixed on the Edge channel, and the fixes will be shipped in the upcoming release. There are some elements which aren't as easily styled, and we'll try to figure them out later. If anyone finds other issues, please report them separately. Thanks everyone for the feedback!

[ngosang]

Great work but there are still some issues.

[ameshkov]

@ngosang could you please explain what was there in the light theme?

[ngosang]

[ameshkov]

@ngosang thank you! Opened a new issue: #5442