Ich hatte bereits beschrieben, wie man Iframes zur Darstellung von Informationen im Lovelace-Dashboard nutzen kann. Sofern man diese Inhalte selbst zur Verfügung stellt, sollte man darauf achten, dass diese auch Dark-Theme freundlich bereitgestellt werden. Aber der Reihe nach 😉
Vor wenigen Jahren wurde die Darstellung von Webseiten/APPs im Dark-Theme Modus populär. Mit anderen Worten: Während bis dahin Inhalte klassisch vor einem weißen Hintergrund mit dunkler Schrift dargestellt wurden, drehte man die Farben einfach um: Dunkler Hintergrund und helle Schrift.
Keine Raketenwissenschaft und deswegen ist es für mich auch nicht wirklich verständlich, warum darum damals so ein Hype gemacht wurde.
Jede App „muss“ seit dem auch über einen Dark-Mode verfügen, damit die Nutzer diesen aktivieren können. Zugegeben: Ich selbst bevorzuge den Dark-Mode tatsächlich auch.
Also habe ich diesen auch in der Home Assistant App aktiviert. Doof war nun, dass die per IFrame [Wikipedia: IFrame] eingebundenen Inhalte durch die „klassische Darstellung“ (also weißer Hintergrund und dunkler Text) enorm hervorstechen, während alle anderen Inhalte schön dunkel sind.
Da im Browser jedoch das Light-Mode zum Einsatz kommt, während die App bei mir im Dark-Mode ist, kann ich nicht einfach den HTML-Code des IFrames ändern, so dass dieser „dunkel“ ist. Je nach Gerät, mit welchem Home Assistant angezeigt wird, kann die Darstellung also im Light- oder Dark-Mode erfolgen.
Die per IFrame eingebundenen Inhalte müssen hierauf also situativ reagieren können.
Dank ein wenig CSS ist dies natürlich mit wenigen Zeilen Code möglich:
<style>
@media (prefers-color-scheme: light) {
body {
background-color: white;
color: black;
}
}
@media (prefers-color-scheme: dark) {
body {
background-color: #1c1c1c;
color: white;
}
}
</style>Den zuvor gezeigten Code habe ich einfach im HTML-Header eingebaut, und schon wird beim Aufruf des IFrames situativ zwischen Light-Mode und Dark-Mode unterschieden/gewechselt.
Natürlich setzt dies voraus, dass in dem im Body folgenden HTML keine Klassen oder ähnliches für die Farbgebund/Gestaltung genutzt werden. In diesem Fall muss der CSS-Code natürlich um die jeweiligen Klassen ergänzt werden, damit die automatisch richtige Darstellung wie gewünscht funktioniert!
Dieser Beitrag ist Teil einer kleinen Beitrags-Serie rund um den hass.io Home Assistant.
Ähnliche Beiträge:
Werbung*
