Merge pull request #3743 from Icinga/feature/add-colorblind-theme

Add colorblind theme

doc/01-About.md

@@ -74,3 +74,10 @@ Currently provided languages:
 * Portuguese
 
 More details about this module can be found in [this chapter](../modules/translation/doc/01-About.md#translation-module-about).
+
+
+## Accessibility <a id="about-accessibility"></a>
+
+In the Icinga Web 2 interface even the blind can see - 
+easy navigation with a screen reader and specific themes for different kinds of vision deficiencies
+make it possible for everyone to monitor their systems without impairments.

doc/03-Configuration.md

@@ -65,7 +65,7 @@ file = "/usr/share/icingaweb2/log/icingaweb2.log"
 
 Option                   | Description
 -------------------------|-----------------------------------------------
-default                  | **Optional.** Choose the default theme. Can be set to `Icinga`, `high-contrast`, `Winter` or your own installed theme. Defaults to `Icinga`. Note that this setting is case-sensitive because it refers to the filename of the theme.
+default                  | **Optional.** Choose the default theme. Can be set to `Icinga`, `high-contrast`, `Winter`, 'colorblind' or your own installed theme. Defaults to `Icinga`. Note that this setting is case-sensitive because it refers to the filename of the theme.
 disabled                 | **Optional.** Set this to `1` if users should not be allowed to change their theme. Defaults to `0`.
 
 Example:

public/css/themes/colorblind.less

@@ -0,0 +1,47 @@
+/*! Icinga Web 2 | (c) 2019 Icinga Development Team | GPLv2+ */
+
+@color-ok: #CCFFD7;
+@color-critical: #FE5566;
+@color-critical-handled: #FF99AA;
+@color-warning: #EAD010;
+@color-warning-handled: #FFF399;
+@color-unknown: #7791E0;
+@color-unknown-handled: #B8C6FF;
+@color-unreachable: @color-unknown;
+@color-unreachable-handled: @color-unknown-handled;
+@color-pending: #000000;
+
+/* Adapt font color to match handled / unhandled states and maintain readability with text-shadows */
+.badge {
+  font-weight: 800;
+}
+
+.state-ok,
+.state-up {
+  color: black;
+}
+.state-warning,
+.state-critical,
+.state-down,
+.state-unknown {
+  &.handled {
+    color: black;
+  }
+}
+.state-warning,
+.state-critical,
+.state-down,
+.state-unknown {
+  color: white;
+}
+.state-warning:not(.handled) {
+  text-shadow: 0 0 3px mix(#000000, @color-warning, 60);
+}
+.state-critical:not(.handled),
+.state-down:not(.handled) {
+  text-shadow: 0 0 1px mix(#000000, @color-critical, 20);
+}
+.state-unknown:not(.handled),
+.state-unreachable:not(.handled) {
+  text-shadow: 0 0 1px mix(#000000, @color-unknown, 20);
+}