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!

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

Werbung*
5,70 EUR € Rabatt
0,50 EUR € Rabatt
Aqara Temperatur- und Feuchtigkeitssensor, Erfordert Aqara...
Aqara Temperatur- und Feuchtigkeitssensor, Erfordert Aqara...*
Eingebauter Luftdrucksensor: Er kann den Umgebungsluftdruck im Haus überwachen
18,99 EUR −0,50 EUR 18,49 EUR Amazon Prime
SONOFF Zigbee 3.0 USB Dongle Plus,TI CC2652P + CP2102(N)...
SONOFF Zigbee 3.0 USB Dongle Plus,TI CC2652P + CP2102(N)...*
Vorgeflasht mit Z-Stack 3.x.0-Koordinator-Firmware; Basis auf TI CC2652P + CP2102(N)
34,99 EUR Amazon Prime

Foto des Autors
Autor
Olli
Ca. Ende 30, seit Windows 3.1 Fan von Computern, Gadgets, Handys und allem, was sich irgendwie programmieren lässt. Ich mag es gerne individuell und möglichst einfach, probiere aber auch gerne neue Dinge sofort aus. :)

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.