From f4a9db3e58ec774042c702b3d5f5b07143c04510 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Michaela=20Br=C3=BCckner?= <brueckner@data-quest.de>
Date: Tue, 28 Jun 2022 08:46:57 +0000
Subject: Accessibility: Adds an alternative, high-contrast color-scheme,
 closes #96

Closes #96

Merge request studip/studip!728
---
 app/controllers/settings/accessibility.php         |   45 +
 app/views/resources/print/clipboard_rooms.php      |   87 +-
 app/views/settings/accessibility.php               |   32 +
 app/views/settings/general.php                     |   11 -
 .../5.2.14_add_high_contrast_config_entry.php      |   43 +
 lib/navigation/AvatarNavigation.php                |    5 +
 lib/navigation/ProfileNavigation.php               |    5 +
 lib/phplib/Seminar_Auth.class.php                  |    8 +-
 lib/seminar_open.php                               |    8 +
 public/assets/images/icons/blue/accessibility.svg  |    1 +
 public/index.php                                   |    8 +
 public/logout.php                                  |    3 +-
 resources/assets/stylesheets/highcontrast.scss     | 1446 ++++++++++++++++++++
 resources/assets/stylesheets/less/index.less       |   19 +
 resources/assets/stylesheets/mixins/colors.less    |    2 +-
 templates/index_nobody.php                         |   13 +
 webpack.common.js                                  |    3 +-
 17 files changed, 1683 insertions(+), 56 deletions(-)
 create mode 100644 app/controllers/settings/accessibility.php
 create mode 100644 app/views/settings/accessibility.php
 create mode 100644 db/migrations/5.2.14_add_high_contrast_config_entry.php
 create mode 100644 public/assets/images/icons/blue/accessibility.svg
 create mode 100644 resources/assets/stylesheets/highcontrast.scss

diff --git a/app/controllers/settings/accessibility.php b/app/controllers/settings/accessibility.php
new file mode 100644
index 0000000..843264e
--- /dev/null
+++ b/app/controllers/settings/accessibility.php
@@ -0,0 +1,45 @@
+<?php
+/**
+ * Settings_AccessibilityController - Administration of all user accessibility related
+ * settings
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU General Public License as
+ * published by the Free Software Foundation; either version 2 of
+ * the License, or (at your option) any later version.
+ *
+ * @author      Michaela Brückner <brueckner@data-quest.de>
+ * @license     http://www.gnu.org/licenses/gpl-2.0.html GPL version 2
+ * @category    Stud.IP
+ * @since       5.2
+ */
+require_once 'settings.php';
+
+class Settings_AccessibilityController extends Settings_SettingsController
+{
+    public function before_filter(&$action, &$args)
+    {
+        parent::before_filter($action, $args);
+
+        PageLayout::setTitle(_('Barrierefreiheitseinstellungen'));
+        Navigation::activateItem('/profile/settings/accessibility');
+        SkipLinks::addIndex(_('Barrierefreiheitseinstellungen anpassen'), 'layout_content', 100);
+    }
+
+    public function index_action()
+    {
+
+    }
+
+    public function store_action()
+    {
+        CSRFProtection::verifyUnsafeRequest();
+
+        $this->config->store('USER_HIGH_CONTRAST', Request::bool('enable_high_contrast'));
+        $this->config->store('SKIPLINKS_ENABLE', Request::bool('skiplinks_enable'));
+
+        PageLayout::postSuccess(_('Ihre Einstellungen wurden gespeichert.'));
+        $this->redirect('settings/accessibility');
+    }
+
+}
diff --git a/app/views/resources/print/clipboard_rooms.php b/app/views/resources/print/clipboard_rooms.php
index 3202809..e97b8d7 100644
--- a/app/views/resources/print/clipboard_rooms.php
+++ b/app/views/resources/print/clipboard_rooms.php
@@ -1,8 +1,10 @@
 <? if (!$print_schedules): ?>
-    <form class="default" method="post"
-          action="<?= $controller->link_for('resources/print/clipboard_rooms') ?>">
-        <?= CSRFProtection::tokenTag() ?>
-        <? if ($clipboard_selected): ?>
+
+    <? if ($clipboard_selected): ?>
+        <form class="default" method="post"
+              action="<?= $controller->link_for('resources/print/clipboard_rooms') ?>">
+            <?= CSRFProtection::tokenTag() ?>
+
             <input type="hidden" name="clipboard_id" value="<?= htmlReady($selected_clipboard_id) ?>">
             <input type="hidden" name="schedule_type" value="<?= htmlReady($schedule_type) ?>">
             <input type="hidden" name="date" value="<?= htmlReady($selected_date_string) ?>">
@@ -27,16 +29,16 @@
                         ) ?>
                     </legend>
                     <ul>
-                    <? foreach ($available_rooms as $room): ?>
-                        <li>
-                            <label>
-                                <input type="checkbox" value="<?= htmlReady($room->id) ?>"
-                                       checked="checked"
-                                       name="selected_room_ids[]">
-                                <?= htmlReady($room->getFullName()) ?>
-                            </label>
-                        </li>
-                    <? endforeach ?>
+                        <? foreach ($available_rooms as $room): ?>
+                            <li>
+                                <label>
+                                    <input type="checkbox" value="<?= htmlReady($room->id) ?>"
+                                           checked="checked"
+                                           name="selected_room_ids[]">
+                                    <?= htmlReady($room->getFullName()) ?>
+                                </label>
+                            </li>
+                        <? endforeach ?>
                     </ul>
                 <? endif ?>
             </fieldset>
@@ -52,8 +54,13 @@
                     'null'
                 ) ?>
             </div>
-        <? else: ?>
-            <? if(count($available_clipboards)) : ?>
+        </form>
+    <? else: ?>
+        <? if(count($available_clipboards)) : ?>
+            <form class="default" method="post"
+                  action="<?= $controller->link_for('resources/print/clipboard_rooms') ?>">
+                <?= CSRFProtection::tokenTag() ?>
+
                 <fieldset>
                     <label>
                         <?= _('Individuelle Raumgruppe') ?>:
@@ -69,21 +76,21 @@
                         <?= _('Art des Belegungsplanes') ?>:
                         <select name="schedule_type">
                             <option value="w"
-                                    <?= $selected_schedule == 'w'
-                                        ? 'selected="selected"'
-                                        : '' ?>>
+                                <?= $selected_schedule == 'w'
+                                    ? 'selected="selected"'
+                                    : '' ?>>
                                 <?= _('Wochenplan') ?>
                             </option>
                             <option value="w+we"
-                                    <?= $selected_schedule == 'w+we'
-                                        ? 'selected="selected"'
-                                        : '' ?>>
+                                <?= $selected_schedule == 'w+we'
+                                    ? 'selected="selected"'
+                                    : '' ?>>
                                 <?= _('Wochenplan inklusive Wochenende') ?>
                             </option>
                             <option value="d"
-                                    <?= $selected_schedule == 'd'
-                                        ? 'selected="selected"'
-                                        : '' ?>>
+                                <?= $selected_schedule == 'd'
+                                    ? 'selected="selected"'
+                                    : '' ?>>
                                 <?= _('Tagesplan') ?>
                             </option>
                         </select>
@@ -111,19 +118,19 @@
                         'select_clipboard'
                     ) ?>
                 </div>
-            <? else :?>
-                <?= MessageBox::info(
-                    _('Sie müssen zunächst Raumgruppen erstellen'),
-                    [
-                        sprintf(
-                            _('Klicken %shier%s, um ein Raumgruppen anzulegen.'),
-                            '<a href="' . URLHelper::getLink('dispatch.php/room_management/overview/rooms') . '">',
-                            '</a>')
-                    ]
-                )?>
-            <? endif ?>
+            </form>
+        <? else :?>
+            <?= MessageBox::info(
+                _('Sie müssen zunächst Raumgruppen erstellen'),
+                [
+                    sprintf(
+                        _('Klicken %shier%s, um ein Raumgruppen anzulegen.'),
+                        '<a href="' . URLHelper::getLink('dispatch.php/room_management/overview/rooms') . '">',
+                        '</a>')
+                ]
+            )?>
         <? endif ?>
-    </form>
+    <? endif ?>
 <? else: ?>
     <? if (Request::get("allday")) {
         $min_time = '00:00:00';
@@ -158,14 +165,14 @@
                     ],
                     'defaultView' =>
                         in_array(Request::get("defaultView"), ['dayGridMonth','timeGridWeek','timeGridDay'])
-                                 ? Request::get("defaultView")
-                                 : 'timeGridWeek',
+                            ? Request::get("defaultView")
+                            : 'timeGridWeek',
                     'defaultDate' => Request::get("defaultDate", $print_date),
                     'eventSources' => [
                         [
                             'url' => URLHelper::getURL(
                                 'api.php/resources/resource/'
-                              . $room->id . '/booking_plan'
+                                . $room->id . '/booking_plan'
                             ),
                             'method' => 'GET',
                             'extraParams' => [
diff --git a/app/views/settings/accessibility.php b/app/views/settings/accessibility.php
new file mode 100644
index 0000000..7bd19a2
--- /dev/null
+++ b/app/views/settings/accessibility.php
@@ -0,0 +1,32 @@
+<form method="post" action="<?= $controller->store() ?>" class="default">
+    <?= CSRFProtection::tokenTag() ?>
+
+    <fieldset>
+        <legend id="accessibility"><?= _('Barrierefreiheitseinstellungen') ?></legend>
+        <label>
+            <input type="checkbox" name="enable_high_contrast"
+                   value="1"
+                <? if ($config->USER_HIGH_CONTRAST) echo 'checked'; ?>>
+            <?= _('Kontrastreiches Farbschema aktivieren') ?>
+            <?= tooltipIcon(
+                _('Mit dieser Einstellung wird ein Farbschema mit hohem Kontrast aktiviert.')
+            ) ?>
+        </label>
+
+        <label>
+            <input type="checkbox" name="skiplinks_enable"
+                   value="1"
+                <? if ($config->SKIPLINKS_ENABLE) echo 'checked'; ?>>
+            <?= _('Skiplinks einblenden') ?>
+            <?= tooltipIcon(_('Mit dieser Einstellung wird nach dem ersten Drücken der Tab-Taste eine '
+                .'Liste mit Skiplinks eingeblendet, mit deren Hilfe Sie mit der Tastatur '
+                .'schneller zu den Hauptinhaltsbereichen der Seite navigieren können. '
+                .'Zusätzlich wird der aktive Bereich einer Seite hervorgehoben.')) ?>
+        </label>
+
+    </fieldset>
+
+    <footer>
+        <?= \Studip\Button::create(_('Speichern')) ?>
+    </footer>
+</form>
diff --git a/app/views/settings/general.php b/app/views/settings/general.php
index 6074d10..27cf5c9 100644
--- a/app/views/settings/general.php
+++ b/app/views/settings/general.php
@@ -47,17 +47,6 @@ $start_pages = [
     <? endif ?>
 
         <label>
-            <input type="checkbox" name="skiplinks_enable"
-                   value="1"
-                <? if ($config->SKIPLINKS_ENABLE) echo 'checked'; ?>>
-            <?= _('Skiplinks einblenden') ?>
-            <?= tooltipIcon(_('Mit dieser Einstellung wird nach dem ersten Drücken der Tab-Taste eine '
-                .'Liste mit Skiplinks eingeblendet, mit deren Hilfe Sie mit der Tastatur '
-                .'schneller zu den Hauptinhaltsbereichen der Seite navigieren können. '
-                .'Zusätzlich wird der aktive Bereich einer Seite hervorgehoben.')) ?>
-        </label>
-
-        <label>
             <input type="checkbox"
                    name="showsem_enable"
                    value="1"
diff --git a/db/migrations/5.2.14_add_high_contrast_config_entry.php b/db/migrations/5.2.14_add_high_contrast_config_entry.php
new file mode 100644
index 0000000..d0ffac3
--- /dev/null
+++ b/db/migrations/5.2.14_add_high_contrast_config_entry.php
@@ -0,0 +1,43 @@
+<?php
+
+
+class AddHighContrastConfigEntry extends Migration
+{
+    public function description()
+    {
+        return 'Adds configuration field USER_HIGH_CONTRAST';
+    }
+
+
+    public function up()
+    {
+        $db = DBManager::get();
+
+        $db->exec(
+            "INSERT IGNORE INTO `config`
+            (`field`, `value`, `type`, `range`,
+            `section`,
+            `mkdate`, `chdate`,
+            `description`)
+            VALUES
+            ('USER_HIGH_CONTRAST', '0', 'boolean', 'user',
+            'accessibility', UNIX_TIMESTAMP(), UNIX_TIMESTAMP(),
+            'Schaltet ein barrierefreies Stylesheet mit hohem Kontrast ein oder aus.')"
+        );
+    }
+
+
+    public function down()
+    {
+        $db = DBManager::get();
+
+        $db->exec(
+            "DELETE FROM `config_values`
+            WHERE `field` = 'USER_HIGH_CONTRAST'"
+        );
+        $db->exec(
+            "DELETE FROM `config`
+            WHERE `field` = 'USER_HIGH_CONTRAST'"
+        );
+    }
+}
diff --git a/lib/navigation/AvatarNavigation.php b/lib/navigation/AvatarNavigation.php
index de3bee4..a762db7 100644
--- a/lib/navigation/AvatarNavigation.php
+++ b/lib/navigation/AvatarNavigation.php
@@ -38,6 +38,11 @@ class AvatarNavigation extends Navigation
             $navigation = new Navigation(_('Einstellungen'), 'dispatch.php/settings/general');
             $navigation->setImage(Icon::create('admin'));
             $this->addSubNavigation('settings', $navigation);
+
+            // Link to accessibility settings
+            $navigation = new Navigation(_('Barrierefreiheit'), 'dispatch.php/settings/accessibility');
+            $navigation->setImage(Icon::create('accessibility'));
+            $this->addSubNavigation('accessibility', $navigation);
         }
 
         // Link to logout
diff --git a/lib/navigation/ProfileNavigation.php b/lib/navigation/ProfileNavigation.php
index 7a17683..d84f377 100644
--- a/lib/navigation/ProfileNavigation.php
+++ b/lib/navigation/ProfileNavigation.php
@@ -114,6 +114,11 @@ class ProfileNavigation extends Navigation
                     $navigation->addSubNavigation('tfa', new Navigation(_('Zwei-Faktor-Authentifizierung'), 'dispatch.php/tfa'));
                 }
 
+                $navigation->addSubNavigation('accessibility', new Navigation(
+                    _('Barrierefreiheitseinstellungen'),
+                    'dispatch.php/settings/accessibility'
+                ));
+
                 $this->addSubNavigation('settings', $navigation);
             }
 
diff --git a/lib/phplib/Seminar_Auth.class.php b/lib/phplib/Seminar_Auth.class.php
index dbd86b5..ae4a0f0 100644
--- a/lib/phplib/Seminar_Auth.class.php
+++ b/lib/phplib/Seminar_Auth.class.php
@@ -120,7 +120,7 @@ class Seminar_Auth
                 # Check for user supplied automatic login procedure
                 if ($uid = $this->auth_preauth()) {
                     $this->auth["uid"] = $uid;
-                    $sess->regenerate_session_id(['auth', '_language', 'phpCAS']);
+                    $sess->regenerate_session_id(['auth', '_language', 'phpCAS', 'contrast']);
                     $sess->freeze();
                     $GLOBALS['user'] = new Seminar_User($this->auth['uid']);
                     return true;
@@ -170,7 +170,7 @@ class Seminar_Auth
                     case "log":
                         if ($uid = $this->auth_validatelogin()) {
                             $this->auth["uid"] = $uid;
-                            $keep_session_vars = ['auth', 'forced_language', '_language'];
+                            $keep_session_vars = ['auth', 'forced_language', '_language', 'contrast'];
                             if ($this->auth['perm'] === 'root') {
                                 $keep_session_vars[] = 'plugins_disabled';
                             }
@@ -455,5 +455,9 @@ class Seminar_Auth
         // init of output via I18N
         $_language_path = init_i18n($_SESSION['_language']);
         include 'config.inc.php';
+
+        if (isset($_SESSION['contrast'])) {
+            PageLayout::addStylesheet('accessibility.css');
+        }
     }
 }
diff --git a/lib/seminar_open.php b/lib/seminar_open.php
index adb3e42..c95d306 100644
--- a/lib/seminar_open.php
+++ b/lib/seminar_open.php
@@ -101,12 +101,20 @@ if ($auth->is_authenticated() && is_object($user) && $user->id != "nobody") {
         if (UserConfig::get($user->id)->PERSONAL_STARTPAGE > 0 && $i_page == "index.php" && !$perm->have_perm("root")) {
             $seminar_open_redirected = TRUE;
         }
+        if ($_SESSION['contrast']) {
+            UserConfig::get($GLOBALS['user']->id)->store('USER_HIGH_CONTRAST', 1);
+            unset($_SESSION['contrast']);
+        }
         $user_did_login = true;
     }
 
     TwoFactorAuth::get()->secureSession();
 }
 
+if (isset($_SESSION['contrast']) || UserConfig::get($GLOBALS['user']->id)->USER_HIGH_CONTRAST) {
+    PageLayout::addStylesheet('accessibility.css');
+}
+
 // init of output via I18N
 $_language_path = init_i18n($_SESSION['_language']);
 //force reload of config to get translated data
diff --git a/public/assets/images/icons/blue/accessibility.svg b/public/assets/images/icons/blue/accessibility.svg
new file mode 100644
index 0000000..8c78753
--- /dev/null
+++ b/public/assets/images/icons/blue/accessibility.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 54 54" xmlns="http://www.w3.org/2000/svg"><g fill="#28497c"><path d="m27 8c10.5 0 19 8.5 19 19s-8.5 19-19 19-19-8.6-19-19 8.5-19 19-19m0-5c-13.3 0-24 10.7-24 24s10.7 24 24 24 24-10.7 24-24-10.7-24-24-24z"/><circle cx="27" cy="15" r="4"/><path d="m38.2 19.1c-.6-.9-1.7-1.1-2.7-.8l-5.8 2.1c-.8.4-1.8.6-2.7.6h-.2c-.9 0-1.9-.2-2.8-.5l-5.8-2.1c-1-.4-2.1-.1-2.7.8-.8 1.2-.2 2.8 1.1 3.3l7.4 2.7c.3.1.5.4.5.7v3.7c0 .3-.1.6-.2.9l-4.5 7.9c-.5.9-.4 2.1.3 2.8 1.1 1 2.7.7 3.4-.5l3.5-6.1 3.6 6.2c.6 1 1.9 1.4 3 .8 1-.6 1.4-2 .8-3.1l-4.6-7.9c-.2-.3-.2-.6-.2-.9v-3.8c0-.3.2-.6.5-.7l7.2-2.6c1.2-.6 1.8-2.2.9-3.5z"/></g></svg>
\ No newline at end of file
diff --git a/public/index.php b/public/index.php
index cf51712..4206821 100644
--- a/public/index.php
+++ b/public/index.php
@@ -23,6 +23,14 @@ page_open(['sess' => 'Seminar_Session', 'auth' => 'Seminar_Default_Auth', 'perm'
 
 $auth->login_if(Request::get('again') && ($auth->auth['uid'] == 'nobody'));
 
+// if desired, switch to high contrast stylesheet and store when user logs in
+if (Request::get('unset_contrast')) {
+    unset($_SESSION['contrast']);
+}
+if (Request::get('set_contrast') ) {
+    $_SESSION['contrast'] = true;
+}
+
 // evaluate language clicks
 // has to be done before seminar_open to get switching back to german (no init of i18n at all))
 if (Request::get('set_language')) {
diff --git a/public/logout.php b/public/logout.php
index f086e1a..313f589 100644
--- a/public/logout.php
+++ b/public/logout.php
@@ -40,6 +40,7 @@ if ($auth->auth["uid"]!="nobody") {
 
     $logout_user=$user->id;
     $_language = $_SESSION['_language'];
+    $contrast = UserConfig::get($GLOBALS['user']->id)->USER_HIGH_CONTRAST;
 
     // TODO this needs to be generalized or removed
     //erweiterung cas
@@ -66,6 +67,6 @@ if ($auth->auth["uid"]!="nobody") {
     page_close();
 }
 
-header("Location:" . URLHelper::getURL("index.php?logout=true&set_language=$_language"));
+header("Location:" . URLHelper::getURL("index.php?logout=true&set_language=$_language&set_contrast=$contrast"));
 
 ?>
diff --git a/resources/assets/stylesheets/highcontrast.scss b/resources/assets/stylesheets/highcontrast.scss
new file mode 100644
index 0000000..b5fed75
--- /dev/null
+++ b/resources/assets/stylesheets/highcontrast.scss
@@ -0,0 +1,1446 @@
+@import "mixins.scss";
+$darkgray: #30343b;
+$lightgray: #e7ebf1;
+
+$medium-gray: #cccccc;
+$darkergray: #444444;
+
+$contrast-blue: #2849d8;
+$contrast-blue-medium: #2D2C64;
+$contrast-blue-dark: #14246c;
+$contrast-red: #ff0000;
+$medium-red: #c80000;
+$contrast-yellow: #ffff00;
+$lightyellow: #fffa90;
+
+/* General contrasts */
+body #scroll-to-top {
+    background-color: $black;
+
+    &:hover {
+        background-color: $black;
+    }
+}
+
+body.fixed #barTopMenu li > a,
+#barBottomright > ul > li > a {
+    color: $white !important;
+    text-decoration: underline !important;
+}
+
+div.index_container div.index_main {
+    background-color: hsla(0, 0%, 100%, 1);
+}
+
+.js .drag-and-drop {
+    background-color: $white;
+    color: $black;
+    border: 1px solid $black;
+}
+
+.boxed-grid {
+    a {
+        background-color: $white;
+        border: 1px solid $black;
+
+        p {
+            color: $black;
+        }
+
+        img {
+            opacity: 0;
+        }
+
+        &:hover {
+            background-color: $black;
+
+            p, h3 {
+                color: $white;
+            }
+        }
+    }
+
+}
+
+#tour_tip {
+    background-color: $black;
+}
+
+.ui-widget-content {
+    color: $black;
+}
+
+/* HEADER */
+#barBottomLeft,
+#barBottomright {
+    background-color: $black;
+
+}
+
+#barTopFont {
+    background-color: $black;
+    color: $white;
+}
+
+#flex-header {
+    background-color: $white;
+    border-bottom: 1px solid $black !important;
+}
+
+body.fixed #barTopMenu {
+    background-color: $black;
+
+    li  a {
+        color: $white;
+    }
+
+    li:hover {
+        background-color: $white;
+
+        a {
+            color: $black !important;
+            img {
+                filter: brightness(0);
+            }
+
+        }
+    }
+
+}
+
+body:not(.fixed) #barTopMenu > li.active:after,
+#tabs > li.current:after {
+    background-color: $black;
+}
+
+#tabs li,
+#layout_wrapper #layout_page .tabs_wrapper {
+    background-color: $white;
+}
+
+#tabs li.current a,
+#tabs li:hover a,
+body:not(.fixed) #barTopMenu li.active .navtitle,
+body:not(.fixed) #barTopMenu li:hover .navtitle {
+    color: $contrast-blue;
+}
+
+/* RESPONSIVE NAVIGATION AND SIDEBAR */
+#responsive-navigation {
+    background-color: $black;
+    background-image: unset;
+    border-right: 6px solid $black;
+
+    ul > li {
+        background-color: rgba(150,150,150) !important;
+
+        > div > a {
+            color: $black !important;
+        }
+
+        > ul > li {
+            background-color: rgba(255,255,255) !important;
+
+            > div > a {
+                color: $black !important;
+            }
+
+        }
+    }
+
+}
+
+.responsive-display #layout-sidebar {
+    background-color: $black;
+    background-image: unset;
+    border-left: 6px solid $black;
+
+}
+
+/* MESSAGE BOXES */
+div.messagebox_exception {
+    color: $medium-red !important;
+    background-color: $white !important;
+}
+
+/* DIALOG */
+.ui-dialog.ui-widget.ui-widget-content .ui-dialog-titlebar {
+    background-color: $black;
+    color: $white;
+}
+
+ul.message-options > li a img {
+    filter: brightness(0);
+}
+
+/* BUTTONS */
+.ui-dialog.ui-widget.ui-widget-content .ui-dialog-buttonpane .ui-button,
+button.button,
+a.button,
+.fc .fc-button-group .fc-button {
+    border-color: $black !important;
+    color: $black !important;
+}
+
+.ui-dialog.ui-widget.ui-widget-content .ui-dialog-buttonpane .ui-button:hover,
+button.button:hover,
+a.button:hover,
+.fc .fc-button-group .fc-button:hover,
+.fc .fc-button-group .fc-button-active,
+.fc-button-primary:not(:disabled).fc-button-active {
+    background-color: $black;
+    color: $white !important;
+}
+
+button.button[disabled],
+button.button[disabled]:hover {
+    background-color: $white;
+    color: $black !important;
+    cursor: not-allowed;
+}
+
+/* SIDEBAR AND WIDGETS */
+
+.sidebar .sidebar-image {
+    background-image: unset;
+    background: $black;
+
+}
+
+.studip-widget .widget-header,
+.sidebar .sidebar-widget-header {
+    background-color: $black !important;
+    color: $white;
+}
+
+.sidebar-widget-content ul li form,
+.sidebar-widget-content form,
+.-widget-content form {
+    border: unset !important;
+}
+
+.studip-widget,
+.studip-widget:hover {
+    border: 2px solid $black;
+
+}
+
+// hover over sidebar list elements ...
+.sidebar-widget-content > ul > li > a {
+    color: $black;
+
+    &:hover {
+        background-color: $black;
+        color: $white;
+    }
+}
+// .. except for "Ansichten"
+.sidebar-widget-content > ul.sidebar-views > li > a:hover {
+    background-color: transparent;
+    color: $contrast-red;
+
+}
+
+.widget-links button,
+.widget-links.sidebar-views > li.active a,
+.widget-links.sidebar-views > li.active button {
+    color: $black;
+}
+.widget-links.sidebar-views > li:hover button,
+.widget-links.sidebar-views > li:hover a {
+    color: $black;
+    background-color: $medium-gray;
+}
+
+
+.widget-links.sidebar-navigation > li.active {
+    background-color: $black !important;
+    color: $white !important;
+    box-shadow: unset;
+
+}
+
+
+.widget-links.sidebar-navigation > li.active,
+.widget-links.sidebar-navigation > li.active a {
+
+    &::before,
+    &::after {
+        border-left-color: $black;
+    }
+}
+
+
+// "Ansichten" need to be white
+.widget-links.sidebar-views > li.active {
+    background-color: $medium-gray;
+    box-shadow: unset;
+    //border: 1px solid $black;
+    border-top: 2px solid $black;
+    border-bottom: 2px solid $black;
+
+    a {
+        color: $black;
+    }
+
+    &:hover {
+        background-color: $darkergray;
+
+        a {
+            color: $white;
+        }
+    }
+}
+
+.widget-links.sidebar-views > li.active:before {
+    border-left: 10px solid $black;
+}
+
+.widget-links.sidebar-views > li.active:after {
+    border-left-color: $medium-gray;
+}
+
+.sidebar-search input[type=submit] {
+    background-color: $black;
+}
+
+/* Black borders */
+.sidebar .sidebar-widget,
+.sidebar .sidebar-widget-placeholder,
+section.contentbox,
+article.studip,
+form.default,
+table.default {
+    // this is making problems in so many ways
+    border: 2px solid $black;
+
+    > header > nav {
+        > a {
+            color: $white;
+        }
+
+        > a:before {
+            filter: brightness(100);
+        }
+
+        .action-menu .action-menu-icon {
+            filter: brightness(100);
+        }
+
+        .action-menu.is-open .action-menu-icon {
+            filter: brightness(0);
+        }
+    }
+
+}
+
+// remove this border, else you end up having two
+.studip-widget > div > article.studip {
+    border: none !important;
+}
+
+/* Sections,Articles and Forms header */
+section.contentbox header,
+article.studip header,
+form.default fieldset > legend {
+    background-color: $black;
+}
+
+section.contentbox header h1,
+section.contentbox header h1 a,
+section.contentbox section span,
+article.studip > header,
+article.studip > header h1,
+article.studip > header h1 > a,
+article.studip > header > nav > *,
+form.default fieldset > legend  {
+    color: $white !important;
+    border: 1px solid $black;
+}
+
+.action-menu-wrapper .action-menu-icon span,
+.action-menu .action-menu-icon span {
+    border: unset;
+}
+
+section.contentbox header h1 a:before,
+article.studip.toggle > header h1 > a:before,
+article.studip > header h1 > a > img,
+article.studip > header > nav > a > img {
+    filter: brightness(100);
+
+}
+
+// brightness does not work with black icons,so make it white this way
+article.studip > header h1 > img {
+    filter: invert(100%);
+}
+
+
+article.new.toggle > header h1 > a::before {
+    filter: unset !important;
+}
+
+/* Sections,Articles and Forms footer */
+form.default footer,
+table.default > tfoot > tr > td {
+    background-color: $white;
+}
+
+/* Tables */
+table.default > tbody > tr > th,
+table.default > thead > tr > th {
+    background-color: $black;
+    color: $white !important;
+
+    a {
+        color: $white !important;
+        text-decoration: underline;
+    }
+}
+
+tr.sortable th.sortasc:after {
+    filter: brightness(100);
+}
+
+table td.printcontent,
+table td.printcontent:hover {
+    background-color: $white;
+}
+
+table.toolbar,
+td.printhead,
+td.toolbar {
+    background-color: $white !important;
+    background-image: unset;
+    border-top: 2px solid $black;
+    line-height: 30pt;
+}
+
+.table_header_bold {
+    background-color: $black;
+}
+
+// Table header Icons must be white ...
+table.default thead .actions img,
+table.default thead .actions input[type=image],
+table.default thead .actions svg {
+    filter: brightness(100);
+}
+
+// ... but Icons in Table Data must be black
+table.default .actions .action-menu .action-menu-icon {
+    filter: brightness(0);
+}
+
+table.dates .nextdate {
+    background-color: $lightgray;
+
+    > td > a {
+        color: $black;
+    }
+}
+
+/* Action Menu */
+.action-menu-wrapper .action-menu-content,
+.action-menu .action-menu-content {
+    border: 2px solid $black;
+    font-weight: 600;
+}
+
+/* FOOTER */
+#layout_footer {
+    background-color: $black;
+    color: $white;
+    font-weight: 700;
+
+    > ul > li > a {
+        color: $white;
+
+        &:hover {
+            color: $white !important;
+            text-decoration: underline;
+        }
+    }
+
+}
+
+/* ICONS */
+body:not(.fixed) #barTopMenu li.active > a img,
+body:not(.fixed) #barTopMenu li:hover > a img,
+form div.files-search.input-group .input-group-append img {
+    filter: brightness(0) !important;
+}
+
+tr.sortable th.sortdesc:after,
+.course-admin th .course-completion,
+.sortable-table .tablesorter-headerDesc .tablesorter-header-inner:after,
+.sortable-table .tablesorter-headerAsc .tablesorter-header-inner:after,
+.action-menu-wrapper .action-menu-icon, .action-menu .action-menu-icon,
+.contentbox header nav .tooltip-icon,
+article header h1 .tooltip-icon,
+section.course-statusgroups article header h1 a img {
+    filter: brightness(100);
+}
+
+// profile image
+#header_avatar_menu .action-menu-icon,
+.action-menu.is-open .action-menu-icon {
+    filter: unset;
+}
+
+.js form.default.collapsable fieldset legend,
+form.default fieldset.collapsable legend {
+    @include background-icon('arr_1down', 'info_alt', 20);
+}
+.js form.default.collapsable fieldset.collapsed legend,
+form.default fieldset.collapsable.collapsed legend {
+    @include background-icon('arr_1right', 'info_alt', 20);
+}
+
+.sidebar-widget-header .actions a img {
+    filter: brightness(100);
+}
+
+/* Stundenplan / Terminkalender */
+.celltoday {
+    background-color: $white;
+    border: 1px solid $black;
+
+    > a {
+        color: $black;
+        font-size: 1.5em;
+    }
+}
+a:link.calhead {
+    color: $contrast-blue;
+}
+
+.calhead label {
+    color: $contrast-blue !important;
+
+    &:hover {
+        text-decoration: underline;
+    }
+}
+
+a .hidden-tiny-down {
+    color: $contrast-blue !important;
+}
+
+/* Date picker */
+
+// today's date
+.ui-state-highlight {
+    color: $black !important;
+    background-color: $lightyellow !important;
+}
+
+.ui-state-active {
+    color: $white !important;
+    background-color: $black !important;
+}
+
+.ui-state-default,
+.ui-widget-content .ui-state-default {
+    background-color: $white;
+    border: 1px solid $black;
+
+    &:hover {
+        background-color: $black;
+    }
+}
+
+
+/* Calendar categories */
+
+span li.calendar-category1,
+ul li.calendar-category1,
+span li.calendar-category2,
+ul li.calendar-category2,
+span li.calendar-category3,
+ul li.calendar-category3,
+span li.calendar-category4,
+ul li.calendar-category4,
+span li.calendar-category5,
+ul li.calendar-category5,
+span li.calendar-category6,
+ul li.calendar-category6,
+span li.calendar-category7,
+ul li.calendar-category7,
+span li.calendar-category8,
+ul li.calendar-category8,
+span li.calendar-category9,
+ul li.calendar-category9,
+span li.calendar-category10,
+ul li.calendar-category10,
+span li.calendar-category11,
+ul li.calendar-category11,
+span li.calendar-category12,
+ul li.calendar-category12,
+span li.calendar-category13,
+ul li.calendar-category13,
+span li.calendar-category14,
+ul li.calendar-category14,
+span li.calendar-category15,
+ul li.calendar-category15 {
+    color: $black;
+
+}
+
+div.schedule_entry {
+    dl {
+        &.hover:hover { opacity: unset; }
+
+        &.schedule-category1 {
+            background-color: $white;
+            border: 1px solid $calendar-category-1;
+            dt {
+                background-color: $calendar-category-1;
+                color: contrast($calendar-category-1, $black, $white);
+            }
+            dd {
+                color: $black;
+            }
+        }
+        &.schedule-category2 {
+            background-color: $white;
+            border: 1px solid $calendar-category-2;
+            dt {
+                background-color: $calendar-category-2;
+                color: contrast($calendar-category-2, $black, $white);
+            }
+            dd {
+                color: $black;
+            }
+        }
+        &.schedule-category3 {
+            background-color: $white;
+            border: 1px solid $calendar-category-3;
+            dt {
+                background-color: $calendar-category-3;
+                color: contrast($calendar-category-3, $black, $white);
+            }
+            dd {
+                color: $black;
+            }
+        }
+        &.schedule-category4 {
+            background-color: $white;
+            border: 1px solid $calendar-category-4;
+            dt {
+                background-color: $calendar-category-4;
+                color: contrast($calendar-category-4, $black, $white);
+            }
+            dd {
+                color: $black;
+            }
+        }
+        &.schedule-category5 {
+            background-color: $white;
+            border: 1px solid $calendar-category-5;
+            dt {
+                background-color: $calendar-category-5;
+                color: contrast($calendar-category-5, $black, $white);
+            }
+            dd {
+                color: $black;
+            }
+        }
+        &.schedule-category6 {
+            background-color: $white;
+            border: 1px solid $calendar-category-6;
+            dt {
+                background-color: $calendar-category-6;
+                color: contrast($calendar-category-6, $black, $white);
+            }
+            dd {
+                color: $black;
+            }
+        }
+        &.schedule-category7 {
+            background-color: $white;
+            border: 1px solid $calendar-category-7;
+            dt {
+                background-color: $calendar-category-7;
+                color: contrast($calendar-category-7, $black, $white);
+            }
+            dd {
+                color: $black;
+            }
+        }
+        &.schedule-category8 {
+            background-color: $white;
+            border: 1px solid $calendar-category-8;
+            dt {
+                background-color: $calendar-category-8;
+                color: contrast($calendar-category-8, $black, $white);
+            }
+            dd {
+                color: $black;
+            }
+        }
+        &.schedule-category9 {
+            background-color: $white;
+            border: 1px solid $calendar-category-9;
+            dt {
+                background-color: $calendar-category-9;
+                color: contrast($calendar-category-9, $black, $white);
+            }
+            dd {
+                color: $black;
+            }
+        }
+        &.schedule-category10 {
+            background-color: $white;
+            border: 1px solid $calendar-category-10;
+            dt {
+                background-color: $calendar-category-10;
+                color: contrast($calendar-category-10, $black, $white);
+            }
+            dd {
+                color: $black;
+            }
+        }
+        &.schedule-category11 {
+            background-color: $white;
+            border: 1px solid $calendar-category-11;
+            dt {
+                background-color: $calendar-category-11;
+                color: contrast($calendar-category-11, $black, $white);
+            }
+            dd {
+                color: $black;
+            }
+        }
+        &.schedule-category12 {
+            background-color: $white;
+            border: 1px solid $calendar-category-12;
+            dt {
+                background-color: $calendar-category-12;
+                color: contrast($calendar-category-12, $black, $white);
+            }
+            dd {
+                color: $black;
+            }
+        }
+        &.schedule-category13 {
+            background-color: $white;
+            border: 1px solid $calendar-category-13;
+            dt {
+                background-color: $calendar-category-13;
+                color: contrast($calendar-category-13, $black, $white);
+            }
+            dd {
+                color: $black;
+            }
+        }
+        &.schedule-category14 {
+            background-color: $white;
+            border: 1px solid $calendar-category-14;
+            dt {
+                background-color: $calendar-category-14;
+                color: contrast($calendar-category-14, $black, $white);
+            }
+            dd {
+                color: $black;
+            }
+        }
+        &.schedule-category15 {
+            background-color: $white;
+            border: 1px solid $calendar-category-15;
+            dt {
+                background-color: $calendar-category-15;
+                color: contrast($calendar-category-15, $black, $white);
+            }
+            dd {
+                color: $black;
+            }
+        }
+    }
+}
+
+table.calendar-week,
+table.calendar-day {
+    tbody tr td {
+        &.calendar-day-event {
+            a {
+                color: $contrast-blue !important;
+            }
+            div:first-child {
+                background-color: $calendar-day-event;
+                overflow: hidden;
+            }
+            background: $white;
+            border: solid 1px $calendar-day-event;
+        }
+        &.calendar-category1,
+        &.calendar-course-category5 {
+            a {
+                color: $contrast-blue !important;
+            }
+            div:first-child {
+                background-color: $calendar-category-1;
+                overflow: hidden;
+            }
+            background: $white;
+            border: solid 1px $calendar-category-1;
+        }
+        &.calendar-category2,
+        &.calendar-course-category1 {
+            a {
+                color: $contrast-blue !important;
+            }
+            div:first-child {
+                background-color: $calendar-category-2;
+                overflow: hidden;
+            }
+            background: $white;
+            border: solid 1px $calendar-category-2;
+        }
+        &.calendar-category3,
+        &.calendar-course-category2 {
+            a {
+                color: $contrast-blue !important;
+            }
+            div:first-child {
+                background-color:  $calendar-category-3;
+                overflow: hidden;
+            }
+            background: $white;
+            border: solid 1px $calendar-category-3;
+        }
+        &.calendar-category4,
+        &.calendar-course-category3 {
+            a {
+                color: $contrast-blue !important;
+            }
+            div:first-child {
+                background-color: $calendar-category-4;
+                overflow: hidden;
+                color: $black;
+            }
+            background: $white;
+            border: solid 1px $calendar-category-4;
+        }
+        &.calendar-category5,
+        &.calendar-course-category4 {
+            a {
+                color: $contrast-blue !important;
+            }
+            div:first-child {
+                background-color: $calendar-category-5;
+                overflow: hidden;
+                color: $black;
+            }
+            background: $white;
+            border: solid 1px $calendar-category-5;
+        }
+        &.calendar-category6,
+        &.calendar-course-category6 {
+            a {
+                color: $contrast-blue !important;
+            }
+            div:first-child {
+                background-color: $calendar-category-6;
+                overflow: hidden;
+                color: $black;
+            }
+            background: $white;
+            border: solid 1px $calendar-category-6;
+        }
+        &.calendar-category7,
+        &.calendar-course-category8 {
+            a {
+                color: $contrast-blue !important;
+            }
+            div:first-child {
+                background-color: $calendar-category-7;
+                overflow: hidden;
+            }
+            background: $white;
+            border: solid 1px $calendar-category-7;
+        }
+        &.calendar-category8,
+        &.calendar-course-category9 {
+            a {
+                color: $contrast-blue !important;
+            }
+            div:first-child {
+                background-color: $calendar-category-8;
+                overflow: hidden;
+            }
+            background: $white;
+            border: solid 1px $calendar-category-8;
+        }
+        &.calendar-category9,
+        &.calendar-course-category10 {
+            a {
+                color: $contrast-blue !important;
+            }
+            div:first-child {
+                background-color: $calendar-category-9;
+                overflow: hidden;
+            }
+            background: $white;
+            border: solid 1px $calendar-category-9;
+        }
+        &.calendar-category10,
+        &.calendar-course-category11 {
+            a {
+                color: $contrast-blue !important;
+            }
+            div:first-child {
+                background-color: $calendar-category-10;
+                overflow: hidden;
+            }
+            background: $white;
+            border: solid 1px $calendar-category-10;
+        }
+        &.calendar-category11,
+        &.calendar-course-category12 {
+            a {
+                color: $contrast-blue !important;
+            }
+            div:first-child {
+                background-color: $calendar-category-11;
+                overflow: hidden;
+            }
+            background: $white;
+            border: solid 1px $calendar-category-11;
+        }
+        &.calendar-category12,
+        &.calendar-course-category13 {
+            a {
+                color: $contrast-blue !important;
+            }
+            div:first-child {
+                background-color: $calendar-category-12;
+                overflow: hidden;
+                color: $black;
+            }
+            background: $white;
+            border: solid 1px $calendar-category-12;
+        }
+        &.calendar-category13,
+        &.calendar-course-category14 {
+            a {
+                color: $contrast-blue !important;
+            }
+            div:first-child {
+                background-color: $calendar-category-13;
+                overflow: hidden;
+                color: $black;
+            }
+            background: $white;
+            border: solid 1px $calendar-category-13;
+        }
+        &.calendar-category14,
+        &.calendar-course-category15 {
+            a {
+                color: $contrast-blue !important;
+            }
+            div:first-child {
+                background-color: $calendar-category-14;
+                overflow: hidden;
+                color: $black;
+            }
+            background: $white;
+            border: solid 1px $calendar-category-14;
+        }
+        &.calendar-category15,
+        &.calendar-course-category7 {
+            a {
+                color: $contrast-blue !important;
+            }
+            div:first-child {
+                background-color: $calendar-category-15;
+                overflow: hidden;
+                color: $black;
+            }
+            background: $white;
+            border: solid 1px $calendar-category-15;
+        }
+        &.calendar-category255,
+        &.calendar-course-category255 {
+            a {
+                color: $contrast-blue !important;
+            }
+            div:first-child {
+                background-color: $calendar-category-255;
+                overflow: hidden;
+            }
+            background: $white;
+            border: solid 1px $calendar-category-255;
+        }
+        /* Termin von im Stundenplan vorgemerkter Kurs */
+        &.calendar-course-category256 {
+            a {
+                color: $contrast-blue !important;
+            }
+            div:first-child {
+                background-color: $contrast-blue-medium;
+                overflow: hidden;
+            }
+            background: $white;
+            border: solid 1px $contrast-blue-medium;
+        }
+    }
+}
+
+
+/* links */
+div.index_container div.index_main nav div.login_link a {
+    text-decoration: underline;
+
+    p {
+        color: $black !important;
+    }
+}
+
+/* underlined links only in main content,not in navigation */
+a,
+a:link,
+a:visited,
+.content-items .content-item .content-item-link,
+.action-menu.avatar-menu .action-menu-content a:link,
+.action-menu.avatar-menu .action-menu-content a:visited,
+.action-menu .action-menu-item > label {
+    color: $contrast-blue;
+}
+
+#layout_content a,
+#layout_content a:link,
+#layout_content a:visited {
+    text-decoration: underline;
+}
+
+a:hover,
+a:active,
+a:hover.index,
+a:active.index,
+a:hover.tree {
+    color: $red;
+    text-decoration: none;
+}
+
+.header-options img.icon-role-clickable {
+    filter: brightness(100);
+
+}
+
+.header-options a {
+    text-decoration: none !important;
+}
+
+
+/* Text formatting */
+.cke_button_on {
+    background-color: $base-color !important;
+    border: 1px solid $white;
+
+    .cke_button_icon {
+        filter: brightness(10) !important;
+    }
+}
+
+/* Blubber */
+.blubber_thread,
+.blubber_sideinfo {
+    background-color: $white;
+    border: 2px solid $black;
+}
+
+.blubber_thread .empty_blubber_background {
+    color: $black;
+    background-color: $white;
+}
+
+.blubber_threads_widget .sidebar-widget-content ol li.active:before {
+    border-left: 10px solid $black;
+}
+
+.blubber_threads_widget .sidebar-widget-content ol li.active {
+    color: $black;
+    background-color: $medium-gray;
+}
+
+.blubber_threads_widget .sidebar-widget-content ol li:hover {
+    background-color: $darkergray;
+
+    & a {
+        color: $white;
+    }
+}
+
+.blubber_threads_widget .sidebar-widget-content ol li.active:after {
+    border-left: 10px solid $medium-gray;
+    right: -8px;
+}
+
+.blubber_thread ol.comments > li.mine > .content {
+    background-color: $black;
+}
+
+.blubber_thread ol.comments > li.theirs > .content {
+    background-color: $white;
+    border: 1px solid $black;
+
+    &:before {
+        border-right-color: $black;
+    }
+}
+
+.blubber_thread ol.comments > li.theirs > .content:after,
+.blubber_thread ol.comments > li.mine > .content:after {
+    background-color: $white;
+}
+
+.blubber_thread ol.comments > li.theirs > .content > .name,
+.blubber_thread ol.comments > li > .time,
+.blubber_threads_widget .sidebar-widget-content ol li a .info time,
+.blubber_public_info .indented .lowprio_info,
+.blubber_sideinfo .lowprio_info {
+    color: $black !important;
+
+}
+
+#blubber_stream_container img,
+.blubber_thread ol.comments > li.theirs .answer_comment > img {
+    filter: brightness(0);
+}
+
+.blubber_panel .context_info .followunfollow.unfollowed {
+    text-decoration: line-through !important;
+}
+
+/* Suchfelder und -ergebnisse */
+
+::placeholder,
+:-ms-input-placeholder, /* Internet Explorer 10-11 */
+::-ms-input-placeholder { /* Microsoft Edge */
+    color: $black;
+}
+
+#globalsearch-searchbar #globalsearch-list section header {
+    color: $contrast-blue;
+}
+
+#globalsearch-list,
+#globalsearch-searchbar #globalsearch-results article {
+    border: 1px solid $black;
+}
+
+#globalsearch-searchbar #globalsearch-results article > header {
+    background-color: $white;
+}
+
+#search #search-results article {
+    border: 2px solid $black;
+
+    > header {
+        border: unset;
+
+        > h1 {
+            border: unset;
+
+            > a {
+                border: unset;
+                color: $black !important;
+            }
+        }
+
+    }
+}
+
+#search-active-filters .filter-items .button {
+    color: $black !important;
+    background-color: $white;
+    border: 1px solid $black;
+}
+
+table.course-search {
+    border: 2px solid $black;
+
+    caption.legend {
+        background-color: $black;
+        color: $white;
+    }
+}
+
+
+
+/* List tree */
+.css-tree ul:before {
+    border-left: 2px solid $black;
+}
+
+.css-tree ul li:before {
+    border-top: 2px solid $black;
+}
+
+/* Arbeitsplatz */
+.content-items {
+
+    .content-item {
+        background-color: $white;
+        border: solid thin $black;
+
+        .content-item-link {
+            color: unset;
+            display: flex;
+            height: 130px;
+            padding: 10px;
+            transition: 0.5s;
+
+            .content-item-img-wrapper > img {
+                filter: brightness(0);
+            }
+
+            .content-item-text {
+                padding-top: -2px;
+
+                .content-item-title {
+                    color: $base-color;
+                    font-size: 2rem;
+                }
+            }
+
+        }
+
+        &:hover {
+            background-color: $black;
+            color: unset;
+
+            .content-item-img-wrapper > img {
+                filter: brightness(100);
+            }
+
+            .content-item-link {
+                .content-item-text {
+                    .content-item-title {
+                        color: $white;
+                    }
+                    color: $white;
+                }
+            }
+        }
+
+    }
+}
+
+/* Forum */
+#forum .posting {
+    background-color: $white;
+    border: 1px solid $black;
+}
+
+#forum form {
+    display: revert;
+}
+
+/* OER Campus */
+.oer_search .searchform {
+    border: 1px solid $black;
+}
+
+.oer_search .oneliner button {
+    border: 1px solid $black;
+    background-color: $white;
+
+    img {
+        filter: brightness(0);
+    }
+}
+
+.oer_search .browser {
+    background-color: $white;
+    border: 1px solid $black;
+
+    .intro .illustration {
+        background-color: $content-color-20;
+    }
+}
+
+.contentbar {
+    border: 2px solid $black;
+    background-color: $white;
+}
+
+.oer_material_overview article.contentbox header,
+.oercampus_editmaterial article.contentbox header {
+    border-bottom: 1px solid $black;
+}
+
+/* Courseware */
+.cw-ribbon {
+    border: 2px solid $black;
+    background-color: $white;
+}
+
+.cw-ribbon.cw-ribbon-consume {
+    border: 1px solid $black;
+}
+
+.cw-container-wrapper.cw-container-wrapper-consume {
+    border: unset;
+}
+
+.cw-container-wrapper,
+.cw-ribbon-tools {
+    border: 2px solid $black;
+}
+
+.cw-container .cw-container-header,
+.cw-block-header,
+.cw-block-features header,
+.cw-discuss-wrapper header,
+.cw-collapsible .cw-collapsible-title,
+.cw-manager-element .cw-manager-container .cw-manager-container-title {
+    //background-color: $white;
+    border-bottom: 1px solid $black;
+}
+
+.cw-action-widget li button,
+.cw-view-widget li button,
+.cw-export-widget li button,
+.cw-action-widget li a,
+.cw-view-widget li a,
+.cw-export-widget li a {
+    //color: $black !important;
+}
+
+.cw-action-widget-add:hover span,
+.cw-action-widget li button:hover,
+.cw-export-widget li button:hover,
+.cw-action-widget li a:hover,
+.cw-export-widget li a:hover {
+    background-color: $black !important;
+    color: $white !important;
+}
+
+.studip-dialog-body .studip-dialog-header {
+    background-color: $black;
+}
+
+.cw-tiles .tile,
+.cw-companion-overlay {
+    border: 2px solid $black;
+}
+
+.cw-tiles .preview-image {
+    background-color: $white;
+}
+
+.cw-course-manager .cw-course-manager-tabs {
+    border: 1px solid $black;
+    max-width: 548px;
+}
+
+.cw-tabs-nav {
+    border: unset;
+    border-bottom: 1px solid $black;
+}
+
+.cw-collapsible .cw-collapsible-title,
+.cw-manager-element .cw-manager-container .cw-manager-container-title {
+    color: $black;
+}
+
+.cw-collapsible .cw-collapsible-content.cw-collapsible-content-open form {
+    border: unset;
+}
+
+.cw-ribbon-action-menu .action-menu-icon,
+.cw-block-actions .action-menu .action-menu-icon {
+    filter: unset;
+}
+
+.cw-tabs-nav button {
+    color: $contrast-blue;
+}
+
+/* Everything else */
+/* Selections */
+.select2-container--default .select2-results__option--highlighted[aria-selected] {
+    background-color: $base-color;
+}
+
+/* tile view Veranstaltungen */
+.tiles-grid-element-header {
+    background-color: $white !important;
+}
+
+.tiles-grid-element-options .action-menu-icon {
+    filter: unset;
+}
+
+/* Veranstaltungskategorien */
+fieldset.attribute_table div[container] > div.droparea > div.plugin {
+    border: 1px solid $black;
+    background-color: $white;
+}
+
+.helpbar {
+    background-color: $black;
+}
+
+.fc-unthemed td {
+    border-color: $darkergray !important;
+}
+
+section.course-statusgroups footer,
+#wikifooter {
+    background-color: $white;
+}
+
+#wikifooter {
+    border-top: 2px solid $black;
+}
+
+div#schedule_day {
+    border-right: 2px double $black;
+}
+
+table#schedule_data thead tr td {
+    border-bottom: 2px solid $darkergray;
+}
+
+table#schedule_data tbody td:first-child {
+    border-right: 2px solid $darkergray;
+}
+
+/* Skiplink box */
+button.skiplink {
+    color: $black;
+    line-height: 1.2em;
+}
+
+/* Notification */
+
+// Notifications: „Desktop-Benachrichtigungen aktivieren“: Blauer Text auf weißem Hintergrund.
+// Benachrichtigungen: Schwarzer Text auf weißem Hintergrund, beim Hovern invertieren.
+
+#notification_container a.enable-desktop-notifications,
+#notification_container a.mark-all-as-read {
+    background-color: $white;
+    color: $contrast-blue;
+}
+
+#notification_container .list .item {
+    background-color: $white;
+    color: $black;
+
+    &:hover {
+        background-color: $black;
+
+        a {
+            color: $white !important;
+
+            div.avatar {
+                filter: brightness(100);
+            }
+        }
+    }
+
+}
diff --git a/resources/assets/stylesheets/less/index.less b/resources/assets/stylesheets/less/index.less
index a3ab172..7c23a5b 100644
--- a/resources/assets/stylesheets/less/index.less
+++ b/resources/assets/stylesheets/less/index.less
@@ -59,6 +59,25 @@ div.index_container {
                 }
             }
 
+            div#contrast {
+                display: flex;
+                align-items: center;
+                gap: 5px;
+                border-top: 1px solid @light-gray-color;
+                font-size: 0.9em;
+                padding: 10px;
+
+                a {
+                    text-decoration: underline;
+                    color: @contrast-blue;
+
+                    &:hover, &:focus {
+                        font-size: 1em;
+                        color: @red;
+                    }
+                }
+            }
+
             div.login_info {
                 border-top: 1px solid @light-gray-color;
                 font-size: 0.8em;
diff --git a/resources/assets/stylesheets/mixins/colors.less b/resources/assets/stylesheets/mixins/colors.less
index 4d4e4e9..bf1bb38 100644
--- a/resources/assets/stylesheets/mixins/colors.less
+++ b/resources/assets/stylesheets/mixins/colors.less
@@ -1,6 +1,6 @@
 //if you like, change this (your brand color)
 @base-color: #28497c; // #28497c
-
+@contrast-blue: #2849d8;
 
 //PLEASE, no changes from here
 //@base-gray: #3c454e; // #3c454e
diff --git a/templates/index_nobody.php b/templates/index_nobody.php
index 2a4013b..9c691d3 100644
--- a/templates/index_nobody.php
+++ b/templates/index_nobody.php
@@ -62,6 +62,19 @@ if ($bg_mobile) {
         <? endforeach; ?>
         </div>
 
+        <div id="contrast">
+            <? if (isset($_SESSION['contrast'])) : ?>
+                <?= Icon::create('accessibility')->asImg(24) ?>
+                <a href="index.php?unset_contrast=1"><?= _('Normalen Kontrast aktivieren') ?></a>
+                <?= tooltipIcon(_('Aktiviert standardmäßige, nicht barrierefreie Kontraste.')); ?>
+            <? else : ?>
+                <?= Icon::create('accessibility')->asImg(24) ?>
+                <a href="index.php?set_contrast=1" id="highcontrastlink"><?= _('Hohen Kontrast aktivieren')?></a>
+                <?= tooltipIcon(_('Aktiviert einen hohen Kontrast gemäß WCAG 2.1. Diese Einstellung wird nach dem Login übernommen.
+                Sie können sie in Ihren persönlichen Einstellungen ändern.')); ?>
+            <? endif ?>
+        </div>
+
         <div class="login_info">
             <div>
                 <?= _('Aktive Veranstaltungen') ?>:
diff --git a/webpack.common.js b/webpack.common.js
index 98050ce..e98b449 100644
--- a/webpack.common.js
+++ b/webpack.common.js
@@ -14,7 +14,8 @@ module.exports = {
         "studip-wysiwyg": assetsPath + "/entry-wysiwyg.js",
         "studip-installer": assetsPath + "/entry-installer.js",
         "print": path.resolve(__dirname, "resources/assets/stylesheets") + "/print.less",
-        "webservices": path.resolve(__dirname, "resources/assets/stylesheets") + "/webservices.scss"
+        "webservices": path.resolve(__dirname, "resources/assets/stylesheets") + "/webservices.scss",
+        "accessibility": path.resolve(__dirname, "resources/assets/stylesheets") + "/highcontrast.scss"
     },
     output: {
         path: path.resolve(__dirname, "public/assets"),
-- 
cgit v1.0