Die meisten modernen Webbrowser unterstützen die Möglichkeit, Websites im dunklen oder hellen Modus auszuführen. Blocs verfügt über eine Reihe integrierter Funktionen, die das Hinzufügen von Unterstützung für dunkle und helle Designs zu den von Ihnen erstellten Websites unterstützen sollen.
So funktioniert's
Wenn eine Blocs Die Site wird auf einem Gerät angezeigt, auf dem das Betriebssystem im Dunkelmodus ausgeführt wird, die Klasse Dunkles Thema wird dem Body-Tag der Seite hinzugefügt. Dies ist nützlich, da es einfach ist, jedes Element mithilfe einer Klasse zu stylen, insbesondere im Dunkelmodus.
Wenn Sie beispielsweise eine Schaltfläche mit einer angewendeten Klasse haben .mein-Button, um der Schaltfläche im Dunkelmodus ein anderes Aussehen zu geben, müssen Sie lediglich eine neue Klasse mit dem hinzufügen Klassenmanager und nenne es .dunkles-Theme .my-button. Alle Styling-Werte, die dieser speziellen Variation der Klasse hinzugefügt werden, werden nur wirksam, wenn die Site auf einem Gerät im Dunkelmodus angezeigt wird.
Dunkle Themenklassen
Um eine dunkle Designversion einer beliebigen Klasse zu erstellen, klicken Sie einfach mit der rechten Maustaste auf die Klasse im Klassenmanager und aus dem Kontextmenü wählen Dark Theme-Version erstellen. Dadurch wird eine Klasse mit dem richtigen Namen erstellt, sodass ihre Stilwerte nur wirksam werden, wenn die Site im dunklen Modus angezeigt wird.
Vorschau des dunklen Modus
Wenn Sie eine Vorschau des dunklen Designs Ihrer Sites anzeigen möchten, können Sie den dunklen Modus des Betriebssystems mithilfe der Option für den dunklen Site-Modus im simulieren Leinwandeinstellungen.
Bitte beachten Sie, dass sich die Canvas-Option für den Dark Site-Modus auch auf den In-App-Vorschaumodus sowie auf den Hauptdesign-Canvas auswirkt.
Schnelles Beispiel
Nachfolgend finden Sie ein kurzes Beispiel, das den Vorgang zum Festlegen der Hintergrundfarbe von a . behandelt Bloc speziell für den Dunkelmodus, wobei alle in diesem Beitrag erwähnten Techniken verwendet werden.
