Kontakt

Volker Burggräf
Internetkoordinator

Dunkelmodus für die UOL-Webseiten

Die Uni-Webseiten sind auch in einem dunklen Farbschema ("Dark mode") verfügbar. Man kann wählen zwischen dem (bisherigen) hellen Farbschema und einem (neuen) dunklen Farbschema. Zusätzlich kann man die Wahl des Farbschemas auch dem System überlassen, sodass das Thema abhängig von der Tageszeit automatisch umgeschaltet werden kann (Nacht-Modus).

Aktivierung: Der Dunkelmodus kann explizit ein- oder ausgeschaltet oder vom Betriebssystem übernommen werden.

Verwenden Sie zur Auswahl das zweite Symbol im Servicemenü (oben rechts auf jeder Uni-Webseite).

Video der Schulung zum Dunkelmodus

In einer Online-Schulung zum Thema Dunkelmodus wurde die neue dunkle Designvariante für die UOL-Webseiten gezeigt und beschrieben, worauf zu achten ist, damit die Seiten auch im Dunkelmodus funktionieren. Überwiegend betrifft dies die Verwendung von Bildern, für die ggf. auf unterschiedliche Art die Verfahrensweise im Dunkelmodus festzulegen ist. Hier können Sie das Video anschauen.

Hinweis: Das Video ist nur für Angehörige der Universität aufrufbar.

Hell, Dunkel, System – Bedeutung der Buttons

Hell

Dies ist das bekannte Layout mit dunkler Schrift auf hellem Hintergrund. Indem Sie diesen Button klicken, wählen Sie explizit aus, dass Sie immer das helle Farbschema verwenden wollen.

Dunkel

Dies ist das neue Layout für den "Nacht-Modus" mit heller Schrift auf dunklem Hintergrund. Indem Sie diesen Button klicken, wählen Sie explizit aus, dass Sie immer das dunkle Farbschema verwenden wollen.

System

Hinweis: Diese Einstellung wird nach der Testphase standardmäßig aktiviert sein.

Mit diesem Button wählen Sie aus, dass sich das Farbschema nach Ihrem System richten soll. Unter "System" kann zweierlei verstanden werden:

  • Eine im Webbrowser eingestellte Präferenz, die dann automatisch auf den UOL-Webseiten berücksichtigt wird (kann bei einigen Webbrowsern in den Einstellungen ausgewählt werden).
  • Eine betriebssystemseitige Auswahl für helles/dunkles Design, das sich auch auf die Menü- und Fenster-Rahmenoptik auswirkt. Ist dies auf "dunkel", "Nachtmodus" o.ä. gestellt, wird dies auch von den UOL-Webseiten berücksichtigt. Apple-Computer können z.B. tageszeitabhängig zwischen Hell- und Dunkel-Modus umschalten und geben diesen Status dann auch an die Webseiten weiter.

Merkmale und Vorteile des Dark-Mode

  • Generell gibt es seit einiger Zeit den Trend, dass man auf seinem Computer oder Smartphone insgesamt einen „Dark mode“ aktivieren kann (und dass viele Leute dies auch tatsächlich tun), durch welchen grundsätzlich die Fensterelemente, Menüs usw. alternativ mit dunklem Hintergrund und heller Schrift dargestellt werden. Auf aktuellen Windows- oder Mac- und vielen Linux-Rechnern kann man z.B. einen „Nachtmodus“ aktivieren, der die Bildschirmoberfläche abends automatisch auf „dunkel“ umschaltet und tagsüber wieder auf „hell“. Damit passt sich der Bildschirm also stärker an die Umgebung an, was augenschonender ist. Neben dieser Zeitautomatik kann auch dauerhaft auf „hell“ oder „dunkel“ geschaltet werden.
  • Auch Sehbehinderte nutzen oft gerne diese Möglichkeit, weil sie helle Schrift auf dunklem Grund besser lesen können als dunkle Schrift auf grell leuchtendem Hintergrund. Es hat also auch mit Barrierefreiheit zu tun.
  • Schließlich bewirkt eine dunkle Darstellung auf aktuellen Smartphones/Tablets mit OLED-Bildschirm, dass weniger Strom verbraucht wird, da der Energieverbrauch des Displays tatsächlich von der Helligkeit der einzelnen Bildschirmpixel abhängt. Insofern gibt es dort auch einen ökologischen Aspekt.
  • Entsprechend zu dieser Entwicklung ist auch für Webbrowser generell eine Technologie entwickelt worden, das Erscheinungsbild in dieser Weise zu individualisieren, also die globale Einstellung des jeweiligen Computers bzw. den expliziten Wunsch des Benutzers zu berücksichtigen und die Webseite dann ebenfalls als dunkle Variante anzuzeigen. Zusätzlich zu einer solchen Automatik ist natürlich eine willkürliche Farbwechselmöglichkeit des Erscheinungsbildes aus Barrierefreiheitsgründen begrüßenswert.

Besondere Hinweise zum Umgang mit Grafiken

Grafiken reagieren sehr unterschiedlich bei der Umstellung auf den Dark-Mode.

  • Normale Fotos im JPG-Format sind in aller Regel genauso brauchbar vor dunklem Hintergrund.
  • Anders ist es hingegen mit spezifischen Grafiken wie z.B. Logos. Oft sind solche Grafiken darauf ausgelegt, auf weißem Hintergrund dargestellt zu werden. Bei einer Umstellung auf dunklen Hintergrund sehen sie dann nicht mehr schön aus, da die Ränder der Grafiken plötzlich deutlich sichtbar werden.
  • Grafiken können außerdem transparent sein. Beim Umschalten auf dunklen Hintergrund ändert sich dadurch auch der Hintergrund der Grafiken, während die Farben im Vordergrund erhalten bleiben. Dies kann funktionieren, sofern die Vordergrundfarben auch zu einem dunklen Hintergrund einen ausreichenden Kontrast haben. Gibt es jedoch auch dunkle Vordergrundfarben, heben sich diese dann evtl. nicht mehr ausreichend vom Hintergrund ab.

Je nach aktueller Konstellation gibt es unterschiedliche Möglichkeiten.

Bitte schalten Sie zwischen hellem und dunklem Modus um, um die Auswirkung zu sehen.

Manche Grafiken können/dürfen einfach invertiert werden, um auf dunklem Hintergrund zu funktionieren. Dies gilt für Grafiken mit schwarzer Farbe auf weißem Hintergrund. Bei Logos ist evtl. zu klären, ob eine Invertierung erlaubt ist.

Invertierung aktivieren: Dem Inhaltselement im Reiter [Erweitert] die CSS-Klasse dark-img-invers zuweisen.

Und so sieht es ohne das zusätzliche Merkmal aus:

Manche Grafiken mit transparentem eigenem Hintergrund funktionieren auch vor dunklem Hintergrund. Es kann dann dafür gesorgt werden, dass ihnen nicht automatisch ein weißer Hintergrund zugewiesen wird.

Transparenz aktivieren: Dem Inhaltselement im Reiter [Erweitert] die CSS-Klasse dark-img-transparent zuweisen.

Und so sieht es ohne das zusätzliche Merkmal aus:

Manche nicht-transparente Grafiken haben harte Kanten, die vor dunklem Hintergrund nicht gut aussehen. Diesen kann dann ein Rahmen hinzugefügt werden.

Rahmen aktivieren: Dem Inhaltselement im Reiter [Erweitert] die CSS-Klasse dark-img-rahmen zuweisen.

Und so sieht es ohne das zusätzliche Merkmal aus:

Bitte kontrollieren Sie Ihre Webseiten im Dark-Mode daraufhin, wie die enthaltenen Grafiken dargestellt werden. Wenn die Darstellung problematisch ist, wenden Sie eines der drei genannten Merkmals ("CSS-Klasse") auf das entsprechende Inhaltselement an.

Hinweis: Pro Inhaltselement kann jeweils nur eines der Merkmale sinnvoll zugewiesen werden. Sollten Sie mehrere Grafiken in einem Inhaltselement verwenden, welche unterschiedliche Merkmale benötigen, dann ist es erforderlich, das Inhaltselement aufzuteilen, d.h. die Bilder auf mehrerre Inhaltselemente zu verteilen.

Internetkoordinator (Stand: 19.01.2022)