Theming
Das Design System bietet zwei verschiedene Farbmodi: Light Mode und Dark Mode. Je nach Anwendungsgebiet wird entweder der eine oder andere, in Einzelfällen auch beide eingesetzt.
Basis
Die Basis des Modes bildet eine Hintergrundfarbe, die den jeweiligen Modus bestimmt.
Layering
Je nach Anwendungsgebiet wird entweder der Light Mode, der Dark Mode oder beide eingesetzt. Mittels Switch kann umgeschaltet werden. Jeder Modus baut auf verschiedenen Layering-Elementen auf, die den grundlegenden Style der Applikation oder Anwendung bildet.
Light Mode
Der Light Mode setzt sich aus einem hellen Grau und weißen Elementen zusammen. Sidebars und Navigationselemente liegen als weiße Elemente obenauf und werden mit einer hellgrauen Linie vom Hintergrund abgegrenzt. Soll mehr Varianz geboten werden, werden die nächsten Grautöne im Schrack Seconet Farbspektrum ausgewählt.
Grundsätzlich gilt jedoch die Regel, dass der Light Mode so hell wie möglich gehalten werden soll. Dunklere Grautöne kommen tendenziell eher für Auszeichnungen, Tabellen, Tabs und Pills zur Anwendung. Um Elemente/Fenster darzustellen, die oberhalb der Applikation dargestellt werden, werden diese mit einem Schatten abgegrenzt (siehe Beispiel). Außerdem liegt das hellste Element auf der niedrigsten Ebene, d.h. desto weiter man die Ebenen hinaufgeht, desto dunkler werden die Elemente.
Light Mode Beispiel
White Dropdown auf Background Light
Grey 50 Dropdown auf Background Grey 100
Dark Mode
Der Dark Mode reduziert die von Gerätebildschirmen abgegebene Leuchtdichte, erfüllt aber dennoch die Mindestfarb-Kontrastverhältnisse. Er verringert die Augenbelastung in dunklen Umgebungen, die Helligkeit wird an die Umgebung angepasst und dadurch die Bildschirmnutzung erleichtert – bei gleichzeitiger Schonung der Batterieleistung. Neben fest definierten Farben in den Navy-Tönen arbeitet der Dark Mode mit semi-transparenten Elementen, die über eine Komponente gelegt werden.
Grundsätzlich baut der Dark Mode darauf auf, dass hellere Elemente auf einen dunkleren Hintergrund gelegt werden. Somit entsteht eine 3D Optik, die in der Gestaltung hilft. Aktive Elemente liegen oberhalb eines Hintergrundes und wirken damit im Auge des Betrachters näher. Auf Schatten wird daher im Dark Mode gänzlich verzichtet. Selbiges gilt für Konturlinien. Ausnahmen:
Beispiel Dark Mode
Hellere Elemente auf Background Dark
Grey 50 Dropdown auf Background Grey 100