Home Assistant Anleitung how to… IFrames Dark-Theme freundlich gestalten

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.

Home Assistant: How to... Kurzanleitungen und Nützliches für Home Assistant!

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!

Hierbei handelt es sich um einen von mir so genannten Quicktipp. In dieser kleinen „Home Assistant how-to“ Reihe, gebe ich hilfreiche Tipps und Tricks, welche mir die Arbeit mit Home Assistant vereinfachen und deswegen vielleicht auch für dich hilfreich sein können!

Dieser Beitrag ist Teil einer kleinen Beitrags-Serie rund um den hass.io Home Assistant.

AngebotBestseller Nr. 1
Echo Dot (3. Gen.) Intelligenter Lautsprecher mit Alexa,...*
  • Unser beliebtester smarter Lautsprecher – Jetzt mit neuem...
  • Steuern Sie die Musikwiedergabe per Sprachbefehl – Streamen Sie...

*= Preis inkl. MwSt., ggf. zzgl. Versandkosten. Letzte Aktualisierung vor 60 Minuten / Affiliate Links / Bilder von der Amazon Product Advertising API. Als Amazon-Partner verdiene ich an qualifizierten Verkäufen.

Schreibe einen Kommentar

Die folgenden im Rahmen der DSGVO notwendigen Bedingungen müssen gelesen und akzeptiert werden:
Durch Abschicken des Formulares wird dein Name, E-Mail-Adresse und eingegebene Text in der Datenbank gespeichert. Für weitere Informationen wirf bitte einen Blick in die Datenschutzerklärung.