implement color-blind friendly mode / light mode

[CalAlaera]

Describe the issue

AdNauseam does not have a light mode, which is needed for accessibility by users with certain vision problems. Please add one, ideally respecting the browser's light/dark mode settings.

Screenshot in which the issue can be seen

Virtually any screen before or after install, including but not limited to:

Steps for anyone to reproduce the issue

1. Set your browser to light mode
2. Install AdNauseam

Your settings

• OS/version: Windows 11
• Browser/version: Firefox 115.0.2
• AdNauseam version: 3.17.0
• Other extensions you have installed: N/A
• AdNauseam settings: Default (first install)

Your filter lists

Default (first install)

Your location/country

United Kingdom

[mneunomne]

Thats a good point @CalAlaera. I had considered implementing one before, but didn't manage to do so. I wonder if there is a simple way with a css overlay filter to do that.

[CalAlaera]

@mneunomne To be clear, I'm not a developer, and I know nothing about CSS, so please take this as the uninformed speculation that it is. But could it be as simple as just removing colours from the CSS and allowing the browser to use its defaults? uBlock Origin managed it so "how hard could it be" :P

[ice-fly]

@CalAlaera I quickly went and inverted common.css, menu.css, and dashboard.css using https://jalu.ch/coding/css-negative.php Although you could probably do a better job inverting the black and whites only using 5 minutes on chat gpt to retain the blue/ purple color scheme. The real problem, as you can see is the tiled background gray_grid.png. Perhaps instead of using a tiled image we could switch to a CSS only method of making the grid?: How to make a grid (like graph paper grid) with just CSS? There are also images which are just logos on white background. Those would need to be added to the CSS/HTML as svgs: Invert svg image using css?

if you can recreate the images in css, then maybe another developer could implement a @media (prefers-color-scheme: light) to catch the cases where someone is running light mode on OS/browser. (I assume you are doing that?)

Try playing around with inspect element. Who knows maybe you'll become a big contributor?

[mneunomne]

Yes, a simple inversion of css colors won't do because we have multiple assets we use as well. Maybe the best (and most proper) solution would be to simply create a light theme on css and substitute all colors and have alternative light-mode assets.

[dhowe]

Lets make this happen for the next release

[mneunomne]

@dhowe Should we make a light theme, or a color-blind-friendly mode? The light implies that everything will be light-themed if the user browser configuration is also light. A color blind mode would only be applied of the user checks in the option on the dashboard "Color-blind friendly"

[dhowe]

my sense is that light/accessible mode should be opt-in only, via settings... this would imply the latter option above (unless the former requires less implementation time) - note also that we already have a color-blind friendly option in settings

[mneunomne]

https://addons.mozilla.org/de/firefox/addon/adnauseam/reviews/1981205/

"Good idea, but completely unusable for me thanks to being locked in dark mode and not respecting my light-mode-only accessibility settings."

Should definitely go to next release.

[mneunomne]

Implemented light/color-blind-friendly mode. Not optimal aesthetics, but maybe good enough for next release. @dhowe what do you think?

I was able to finally refactor our css and now created a set adn-color-palette which will make it much more easy if we want to change our theme. There are still many improvements that can be done in this refactoring, but it is already much better now. @dhowe if you think it looks good then we merge, otherwise we can make some design readjustments, then do some thorough test to see if I didn't miss anything. The vault needs a bit if re-design in light-mode perhaps.

[dhowe]

This is a very good start, but we should get @mushon to weigh in

meantime, 2 questions:

1. Would it be it difficult to remove the background grid in this mode, and just have a pale gray color instead ?
2. Can we avoid the use of white text on the light bg, such as below?

[mushon]

generally I agree, but I'm not sure where this screenshot is coming from, the background is supposed to be dark like this:

That makes both the white titles have high color contrast and the background pattern too subtle to be an issue for accessibility.

[dhowe]

that screenshot is from the colorblind mode above that @mneunomne has been working on (screenshots here)

[mushon]

ok, re-reading the thread. I am not sure accessibility means mandatory light-mode, but if that's the way you want to go then obviously we will have to invert the light titles and there's no problem to remove the pattern as well.

[CalAlaera]

I'm very grateful my feature request has been taken seriously and people are working on it! Though just to clarify, I did specifically ask for a light mode, preferably respecting the choice made in the browser's options for light or dark mode.

(though it wouldn't be the end of the world if light/dark was toggleable in the options menu, obviously)

[mneunomne]

@mushon it seems that couple users said they have issues using dark mode because of visual impairment, so that's we decided to enable in this way. From what I read there are multiple types of visual impairment and dark mode affects at least some forms of it.

[mneunomne]

And @mushon, maybe would be good if we have a visual reference on figma of the light mode? I did it on the go by changing to the colors we were already using on our interaface, but I am not really an interface designer.

[mushon]

Yeap, fair enough. In that case we need to make sure all texts meet the minimum contrast requirements. I recommend not to use color inverse as the starting point but to actually work with a white background and use high contrast for text elements. Quick screenshot:

[mneunomne]

Already implement, specific issues regarding light-mode can be created in separate tickets. Closing now.