High-contrast theme ruined by browser forcing dark mode

[SodaWithoutSparkles]

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

• URL: https://tricorder.pi-hole.net/ai9SyKfe/

Screenshots

High contrast dark + colourful

Pi-hole midnight theme (dark) + colourful

Pi-hole midnight theme (dark) + not colourful

High contrast + not colourful

Additional context

N/A

[SodaWithoutSparkles]

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]

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]

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

[rdwebdesign]

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

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

[SodaWithoutSparkles]

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]

Confirm fixed.