Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

High-contrast theme ruined by browser forcing dark mode #2554

Closed
SodaWithoutSparkles opened this issue Mar 23, 2023 · 6 comments · Fixed by #2555 or #2594
Closed

High-contrast theme ruined by browser forcing dark mode #2554

SodaWithoutSparkles opened this issue Mar 23, 2023 · 6 comments · Fixed by #2555 or #2594

Comments

@SodaWithoutSparkles
Copy link
Contributor

SodaWithoutSparkles commented Mar 23, 2023

Versions

  • Pi-hole: 5.16.1
  • AdminLTE: 5.19
  • FTL: 5.22

Platform

  • OS and version: Debian Bullseye
  • Platform: Raspberry pi

Expected behavior

High contrast dark theme has a higher contrast than normal midnight dark theme

Actual behavior / bug

High contrast theme has a lower contrast, especially in green colours, when "colourful query log" is also enabled

Steps to reproduce

Steps to reproduce the behavior:

  1. Go to web admin page
  2. Go to settings > web interface
  3. Under "Theme and layout", choose "High contrast dark"
  4. Under "Interface settings (auto saved)" > "Per Browser Settings", enable "Colorful Query Log"
  5. Go to "Query log" and expect to see forwarded entries has lower contrast
  6. Repeat from step 3, but choose "Pi-hole midnight theme (dark)" instead
  7. Forwarded entries has higher contrast

Debug Token

Screenshots

High contrast dark + colourful
Screenshot_2023-03-23-15-33-05-135_com.android.chrome-edit.jpg

Pi-hole midnight theme (dark) + colourful
IMG_20230323_154431.jpg

Pi-hole midnight theme (dark) + not colourful
Screenshot_2023-03-23-15-43-55-252_com.android.chrome-edit.jpg

High contrast + not colourful
Screenshot_2023-03-23-15-43-35-844_com.android.chrome-edit.jpg

Additional context

N/A

@SodaWithoutSparkles
Copy link
Contributor Author

SodaWithoutSparkles commented Mar 23, 2023

Oh I figured out why. The issue is that the browser has detected that the system-wide dark mode is on. So it enables a feature to turn every non-dark mode site to dark mode by using some "clever" filters. The problem is that a) the filters ain't really that clever and b) the browser has trouble detecting if that site is already in dark mode. Therefore it attempts to change sites that are already in dark mode to "darker mode", which went wrong.

Some dark mode sites dont have their site ruined however. So it is possible to avoid this.

This may help:
https://stackoverflow.com/questions/62989878/how-to-prevent-force-dark-mode-by-system

Using Chrome for android 111.0.5563.58

@SodaWithoutSparkles SodaWithoutSparkles changed the title High-contrast theme has lower contrast when colourful query log is enabled High-contrast theme ruined by browser forcing dark mode Mar 23, 2023
@SodaWithoutSparkles
Copy link
Contributor Author

SodaWithoutSparkles commented Mar 23, 2023

Found out the solution. Just need to add color-scheme: dark css to the html element in every dark mode scheme.

For people who want a quick patch, insert the following to line 36 of /var/www/html/admin/scripts/pi-hole/php/header.php. This will be deleted in the next update/repair. This also ignores whatever mode is set and assumes it is dark mode.

<style>
  html { color-scheme: dark; }
</style>

I will try to modify the css files in this repo and start a PR in 24 hours when I have access to a computer.

SodaWithoutSparkles added a commit to SodaWithoutSparkles/Pi-hole_AdminLTE that referenced this issue Mar 23, 2023
Signed-off-by: SodaWithoutSparkles <[email protected]>
SodaWithoutSparkles added a commit to SodaWithoutSparkles/Pi-hole_AdminLTE that referenced this issue Mar 23, 2023
This reverts commit ad37242.
SodaWithoutSparkles added a commit to SodaWithoutSparkles/Pi-hole_AdminLTE that referenced this issue Mar 23, 2023
Signed-off-by: SodaWithoutSparkles <[email protected]>
SodaWithoutSparkles added a commit to SodaWithoutSparkles/Pi-hole_AdminLTE that referenced this issue Mar 23, 2023
Signed-off-by: SodaWithoutSparkles <[email protected]>
@SodaWithoutSparkles
Copy link
Contributor Author

Deleted branches that are unverified. The final PR should be OK.

@rdwebdesign
Copy link
Member

Chrome's auto dark-mode option is messing with the colors.

This is the same problem reported here:
#2501 (comment)

@SodaWithoutSparkles
Copy link
Contributor Author

SodaWithoutSparkles commented Mar 23, 2023

Chrome's auto dark-mode option is messing with the colors.

This is the same problem reported here:
#2501 (comment)

I know. Thats what I have addressed in #2554 (comment)

But the issue is, as said:

Some dark mode sites dont have their site ruined however. So it is possible to avoid this [Chrome's auto dark-mode option is messing with the colors].

After some investigation, I found out that by telling the browser (Chrome) that "hay, I am already in dark mode!" the browser would not force auto dark-mode and leave the colours untouched. That's what I am doing in #2555.

This issue differs from 2501. 2501 is about aesthetics. This issue is about actual readability.

@SodaWithoutSparkles
Copy link
Contributor Author

Confirm fixed.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
3 participants