Press "Enter" to skip to content

Dark Mode in iOS 13 – Teil 2

Dynamic Colors nutzen und verstehen

Im ersten Teil dieser Reihe habt ihr die Funktionsweise und Wichtigkeit der sogenannten Dynamic Colors für den Dark Mode in iOS 13 kennengelernt. Nun möchte ich euch zeigen, wie ihr diese Dynamic Colors sowohl im Code als auch im Interface Builder einsetzen könnt und wie ihr eure eigenen Dynamic Colors erzeugt und verwendet.

Dynamic Colors aus dem iOS-SDK

Apple selbst liefert in seinem iOS-SDK bereits eine Vielzahl verschiedener Dynamic Colors mit aus. Die lassen sich einerseits an beschreibenden Namen wie labelColor oder linkColor erkennen, die nicht Aufschluss über die genaue Farbe geben, sondern eher Einsatzzwecke nennen. Viele dieser Farben beginnen auch mit dem Schlüsselwort system, zum Beispiel systemBackgroundColor, systemBlue oder systemRed. Andererseits gibt die Dokumentation einer Farbe selbst konkret Aufschluss darüber, ob es sich bei ihr um eine Static oder eine Dynamic Color handelt. Bei Static Colors wird der exakte RGB-Wert in der Dokumentation genannt, während bei Dynamic Colors eine Beschreibung der Farbe und der typische Einsatzzweck aufgeführt ist.

Die Dokumentation zu Dynamic Colors liefert statt einer exakten Farbangabe eine Beschreibung und nennt den typischen Einsatzzweck.
Die Dokumentation zu Dynamic Colors liefert statt einer exakten Farbangabe eine Beschreibung und nennt den typischen Einsatzzweck.

Zum Einsatz der im iOS-SDK enthaltenen Dynamic Colors geht man genauso vor wie bei den klassischen Static Colors auch. Sie stehen sowohl über den Interface Builder zur Auswahl bereit oder können über den zugehörigen Property-Namen im Code geladen werden, zum Beispiel so:

myLabel.textColor = .labelColor

Im Interface Builder stehen die Dynamic Colors neben den klassischen Static Colors zur Auswahl bereit.
Im Interface Builder stehen die Dynamic Colors neben den klassischen Static Colors zur Auswahl bereit.

Setzt ihr eine solche Dynamic Color ein – egal ob über das Interface oder den Code – wählt das System bei Ausführung der App automatisch die passende Farbe, abhängig davon, ob entweder der Light oder der Dark Mode auf dem Gerät aktiv ist.

Eigene Dynamic Colors erstellen

Neben der Verwendung der bereits im iOS-SDK bestehenden Dynamic Colors gibt es auch die Möglichkeit, mithilfe von Asset Catalogs eigene Dynamic Colors zu erstellen. Dazu fügt man über die Plus-Schaltfläche am unteren linken Rand eines Asset Catalogs ein neues Color Set über den entsprechenden Befehl New Color Set hinzu und definiert darin zunächst die Farbe, die für den Light Mode zum Einsatz kommen soll. Anschließend öffnet man im Attributes Inspector das Popup-Menü mit dem Titel Appearance und wählt darin den Punkt Any, Dark aus. Das fügt dem Color Set einen zweiten Eintrag mit dem Untertitel Dark Appearance hinzu. Das ist die entsprechende Farbe für den Dark Mode, die man nun passend definieren kann. Das sorgt dafür, dass man am Ende zwei Farben als Teil eines einzigen Color Sets definiert hat. Verwendet man nun dieses Color Set, wird auf Basis des Light und Dark Mode die jeweils passende Farbe automatisch geladen und verwendet.

Mithilfe von Asset Catalogs können sich eigene Dynamic Colors erstellen lassen, die über zwei unterschiedliche Farben für den Light und Dark Mode verfügen.
Mithilfe von Asset Catalogs können sich eigene Dynamic Colors erstellen lassen, die über zwei unterschiedliche Farben für den Light und Dark Mode verfügen.

Solche eigens kreierten Dynamic Colors könnt ihr im Interface Builder parallel zu den Systemfarben im Abschnitten Named Colors auswählen und verwenden. Im Code nutzt ihr den UIColor-Initializer init(named:) und übergebt als Parameter den Namen des Color Sets aus dem Asset Catalog, die ihr verwenden wollt, beispielsweise so:

myLabel.textColor = UIColor(named: "HighlightColor")

Die eigens kreierten Color Sets aus Asset Catalogs werden im Interface Builder im Bereich „Named Colors“ aufgeführt.
Die eigens kreierten Color Sets aus Asset Catalogs werden im Interface Builder im Bereich „Named Colors“ aufgeführt.

Fazit

Der Einsatz von Dynamic Colors gestaltet sich in iOS-Apps überraschend einfach und unkompliziert. Sie können parallel zu den klassischen Static Colors eingesetzt werden, wobei sich der konkrete Farbwert zur Laufzeit auf Basis des zugrundeliegenden Light beziehungsweise Dark Mode entscheidet. Auch eigene Dynamic Colors lassen sich dank Asset Catalogs sowohl komfortabel erstellen als auch einsetzen.

Euer Thomas

Schreibe den ersten Kommentar

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Kontakt und soziale Netzwerke

Impressum

Thomas Sillmann
Kettererstraße 6
D-63739 Aschaffenburg
E-Mail: contact@thomassillmann.de
Mobil: +49 (0) 151 65125650
Web: https://www.thomassillmann.de/

Inhaltlich Verantwortlicher gemäß §55 Abs. 2 RStV: Thomas Sillmann (Anschrift siehe oben)

Haftungshinweis: Trotz sorgfältiger inhaltlicher Kontrolle übernehme ich keine Haftung für die Inhalte externer Links. Für die Inhalte der verlinkten Seiten sind ausschließlich deren Betreiber verantwortlich.

Copyright © 2019 · Thomas Sillmann