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!

[custom_shortcode_quicktipps]

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

AngebotBestseller Nr. 1
KETOTEK Smart Heizkörperthermostat Zigbee, Elektrische...*
  • 【Zusatzprodukt für Starter-Kit】 Besitzen Sie bereits unser...
  • 【Flexible Steuerung】 Stellen Sie die Temperatur am...

*= 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.