Seit dem 22. Oktober 2018 unterstützt Azure-DevOps ein Dark-Theme. Durch das dunkle Erscheinungsbild sieht die Oberfläche nicht nur schick aus, die Augen werden dadurch geschont. Damit sich die eigene Azure-DevOps-Erweiterung nahtlos in dieses Theme einfügt, sind einige Anpassungen zu tätigen. Dieser Beitrag zeigt wie die Theme-Unterstützung in die eigene Azure-DevOps-Erweiterung integriert werden kann.
Gehen wir davon aus, dass eine funktionierende Azure-DevOps-Erweiterung mit einem darin enthaltenen Hub existiert. In der Index-Seite des Hubs sollte die Initialisierung dessen daher bestehen (siehe Abbildung 1). Mit dem Hinzufügen des Flags applyTheme ist das Aktivieren der Theme-Unterstützung erfolgt (siehe Abbildung 2).
Die Aktivierung stellt hierbei lediglich die Farbpalette des Themes per vordefinierten CSS-Custom-Propertys für den eigenen Hub zur Verfügung. Dem Gist azure-devops-themes-custom-properties.css können diese Deklarationen entnommen werden. Da optisch eine nahtlose Integration des eigenen Hubs in Azure-DevOps erwünscht ist, müssen diese Farben im eigenen Hub angewandt werden. Abbildung 3 zeigt wie eine abwärtskompatible Anpassung einer Hintergrundfarbe geschieht. Die Custom-Property mainMenuBackgroundColor steht hier für die Hintergrundfarbe des Hauptmenüs und #e6e6e6 ist der Fallbackwert, falls die Custom-Property aus unbekannten Gründen nicht existieren sollte. Nach diesem Muster kann auf die weiteren Custom-Propertys zugegriffen werden.
Rein technisch gesehen ist damit die Unterstützung für Themes erreicht, UX-seitig jedoch nicht. Da jedes Element des eigenen Hubs dem Erscheinungsbild des entsprechenden Themes entsprechen soll. müssen diese entsprechend mit den Custom-Propertys deklariert werden. Die Semantik der einzelnen Custom-Propertys lässt sich meinst nur erahnen. Dies ist nicht weiter verwunderlich, das Dark-Theme als Vorschau gekennzeichnet ist und eine Dokumentation fehlt. Die Semantik von mainMenuBackgroundColor ist durch Analyse von Azure-DevOps-eigenen Verwendung abgeleitet worden. Des Weiteren sind einige Funktionalitäten (noch) nicht implementiert, so werden beim Wechseln zwischen Themes die geänderten Farbpaletten nicht an den Hub weiterpropagiert. Das Aussehen wird erst nach dem Neu laden der Seite angepasst. Des Weiteren kann das hier beschriebene Verhalten zukünftig anderweitig abgebildet werden.
Viel Spaß beim Anpassen der eigenen Azure-DevOps-Erweiterungen für das Dark-Theme.
Für Technikversierte können folgende Git-Commits auf GitHub interessant sein:
- Microsoft/vss-web-extension-sdk: Adds theme support to the VSS.SDK
- AITGmbH/AIT.VotingExtension: rudimentary support for themes