Colorblind mode

[PixNyb]

Describe the feature request

I'd like some options to change the default UI to a more colorblind friendly option rather than having to rewrite/override large parts of the CSS library

Why do you personally want this feature to be implemented?

I'm having a hard time differentiating between the red and green items on the UI. And since this is the primary method of communicating at a glance it gets a little exhausting.

GitHub for example has a nice colorblind mode where all the green items become blue making it significantly easier to see what's going on

How long have you been using this project?

A few months

Additional information

I've quickly gone ahead and edited the CSS by hand in the browser to show what such a change could look like. Overriding would work (also cost a lot of work finding everything that needs to be overridden) but it would also be nice to have this on a per user basis so that non-colorblind people can still see the graphs as intended

[TwiN]

Could you share your custom CSS?

[PixNyb]

Oh i just changed .bg-green-500 to be a background color that fit something I could differentiate well, didn't save it.

From what i've seen there's .bg-green-500, .text-green-500, .bg-green-700 and then some hover effects. Though I think it'd be better to change the classes when a colorblind mode is selected instead, could be as simple as changing .bg-green-500 to .bg-blue-500 etc. when a colorblind mode is enabled

[PythonGermany]

I have put together a prototype based on #1445 to test the feasibility of implementing it -> #1461

[TwiN]

My problem with implementing a theme system is that it makes making future changes to the UI a lot more complicated, and it means that every change to the UI that involves styling requires verification that the documented themes still work.

For that reason, I would rather document how to use ui.custom-css to implement a colorblind mode, and add generic classes/ids to make adding custom CSS easier (see the custom CSS selectors section in https://gatus.io/docs/appearance for the existing classes and ids that can be used to make styling easier)

[TwiN]

Though I do have to say, @PythonGermany 's idea of having a theme button on the settings bar makes me consider whether we should have something like this:

ui:
  themes:
    - name: colorblind
      custom-css: |
        ...
    - name: halloween
      custom-css: |
        ..
    # etc

where the theme default would use Gatus' default css + ui.custom-css.

This would both allow user-configurable themes without locking people into a specific CSS implementation, therefore leaving us with the obligation of only making sure Gatus' custom class/id names are present on the UI.