So implementieren Sie helle oder dunkle Modi in CSS

Verwenden Sie den Hell- und Dunkelmodus in CSS

Die CSS-Spezifikation wird ständig weiterentwickelt. Der Prozess zum Implementieren neuer Funktionen in CSS ist kompliziert, aber die vereinfachte Version besteht darin, dass die CSS-Arbeitsgruppe über die neuen Elemente entscheidet, die der Spezifikation hinzugefügt werden sollen. Es liegt dann an den Browsern, diese neuen Elemente zu implementieren, und die Browser wählen aus, in welcher Reihenfolge sie implementiert werden sollen, weshalb wir jetzt eine nicht übereinstimmende Unterstützung für neue Funktionen haben. Obwohl dies manchmal ärgerlich sein mag, ist es eine viel bessere Möglichkeit, dies zu tun, als die Browser, die die vollständige Spezifikation implementieren, wie wir in den frühen Tagen des Webs gesehen haben. Wenn Sie sich Sorgen machen, dass Ihre Website voll funktionsfähig ist, wenden Sie sich an einen Support Web-Hosting Bedienung.

Das klingt alles nach zu viel Arbeit? Halten Sie die Dinge einfach mit einem IM orking.

Die CSS-Arbeitsgruppe besteht aus Mitgliedern aller großen Browser-Anbieter und anderer Technologieunternehmen wie Apple und Adobe. Apple, das kürzlich seine neue Version von MacOS herausgebracht hatte, wollte einen Weg finden, seinen schicken neuen dunklen Modus im Browser zu erkennen. Zu diesem Zweck hat Apple eine Empfehlung an die Spezifikation für eine neue Medienabfrage der Stufe 5 gesendet.



@media (prefers-color-scheme: light | dark) { … }

Mithilfe dieser Medienabfrage können wir feststellen, ob der Benutzer derzeit den Hell- oder Dunkelmodus im Betriebssystem verwendet. Im Moment wird dies nur von Safari Technology Preview 69 und höher unterstützt, aber die anderen Browser sollten nicht weit dahinter sein.

Um dies zu testen, müssen Sie auf Mojave 10.14 (MacOS) aktualisiert werden und in den Systemeinstellungen die Option Dunkles Erscheinungsbild ausgewählt haben. Es gibt verschiedene Möglichkeiten, wie wir diese neue Medienabfrage verwenden können, um verschiedene Themen zu implementieren. Wir werden jetzt in diesem Tutorial einige davon untersuchen.

01. Richten Sie die Seite ein

Zu Beginn müssen wir einige HTML-Elemente zum Stylen erstellen. Zunächst erstellen wir einen neuen Stift in CodePen und fügen einige Elemente hinzu. Wir werden einen Container für unseren Inhalt hinzufügen, um ihn zu zentrieren, sowie einige Überschriften und Texte. Wir werden das CSS so einstellen, dass Sass verwendet wird, um die Verschachtelung in CSS zu verwenden.

Arten von Schattierungen in der digitalen Kunst

Heading One

Heading Two


02. Grundelemente stylen

Als Nächstes fügen wir einige grundlegende Stile hinzu und fügen einige Schriftarten von Google hinzu, damit unsere Seite ein bisschen schöner aussieht. Wir werden alle unsere Grundelemente stylen und neue Schriftgrößen, Farben und Schriftarten anwenden.



body { font-family: 'Merriweather', serif; background-color: #ededed; color: #212121; padding: 1.618rem; line-height: 1.618; font-size: 16px; }

03. Stilbehälter

CSS hell und dunkel: Stil Container

Bauen Sie einen Container mit einer bequemen Linienlänge

Als nächstes gestalten wir unseren Container so, dass der Inhalt eine angenehme Zeilenlänge zum Lesen hat. Wir werden auch eine Hintergrundfarbe und einen Schlagschatten hinzufügen. Um das Inhaltsfeld auf der Seite zu zentrieren, verwenden wir das Schlüsselwort 'auto' für die linken und rechten Werte der Randeigenschaften.

.content-container { padding: 1.618rem 3.236rem; max-width: 48.54rem; margin: 3.236rem auto; background-color: #fff; box-shadow: 0 0 12px 6px rgba(0,0,0,0.05); border-radius: .269666667rem; }

04. Markierungsfarbe hinzufügen

CSS hell und dunkel: Farbe hervorheben

Wählen Sie eine Hervorhebungsfarbe und erstellen Sie einen Stil dafür

Die meisten Websites verwenden irgendwo Farbe, und im Moment haben wir nur Weiß und Grau. Wählen Sie nun eine Hervorhebungsfarbe und erstellen Sie einen Stil zum Anwenden dieser Farbe. Wir werden die Farbe mit einem Span-Tag anwenden und damit etwas in unserem Inhalt hervorheben.

Lorem ipsum .text--alpha { color: #c3423f; }

05. Implementieren Sie die Medienabfrage

CSS hell und dunkel: Farbe hervorheben

Nachdem Sie einige Stile haben, können Sie die Medienabfrage implementieren

Jetzt haben wir eine Seite mit einigen grundlegenden Stilen. Schauen wir uns an, wie wir die Medienabfrage implementieren können. Lassen Sie es uns einschließen und einige unserer Stile überschreiben. Wir werden mit den Körperstilen beginnen.

@media (prefers-color-scheme: dark) { body { background-color: #111; } }

06. Überschreiben Sie die verbleibenden Stile

CSS hell und dunkel: Stile überschreiben

Jetzt können Sie den Rest der Stile überschreiben

Jetzt, da wir sehen können, dass die Medienabfrage funktioniert und sich die Hintergrundfarbe unseres Körpers geändert hat, müssen wir alle verbleibenden Stile überschreiben.

.content-container { color: white; background-color: #212121; } .text--alpha { color: #50a8d8; }

07. Wartbarkeit

Während das, was wir gerade getan haben, für unsere Demo perfekt funktioniert und auf kleineren Websites beibehalten werden kann, wäre diese Methode ein Albtraum für ein größeres Projekt mit vielen verschiedenen Elementen, die alle überschrieben werden müssen. In unserem obigen Beispiel wird die Kaskade auch stark genutzt, während ein großes System möglicherweise mehr Spezifität erfordert, um auf alle Elemente abzuzielen.

08. Gehen Sie anders vor

CSS hell und dunkel: ein anderer Ansatz

Verwenden Sie für einen schnellen und schmutzigen Dunkelmodus einfach 'Invertieren' ...

Wie können wir das Problem sonst angehen? Schauen wir uns die CSS-Filter an. Einer der Werte, die wir für CSS-Filter verwenden können, ist 'invertieren'. Wir können dies also einfach auf den HTML-Code anwenden und alle Farben invertieren, wodurch wir einen 'dunklen Modus' erhalten.

@media (prefers-color-scheme: dark) { html { filter: invert(100%); } }

09. Bilder hinzufügen

CSS hell und dunkel: Bilder

... natürlich sehen deine Fotos so aus

Obwohl die Filtermethode mit dem Inhalt unseres Dokuments funktioniert, sieht sie immer noch nicht gut aus - unser Box-Schatten hat sich beispielsweise auch invertiert, was ziemlich seltsam aussieht. Wir haben die Kontrolle über die Stile verloren, was bei farbigen Hintergründen zu einem noch größeren Problem wird. Wir haben auch ein ganz neues Problem zu berücksichtigen, wenn es um Bilder geht. Mal sehen, was passiert, wenn wir unserer Seite ein Bild hinzufügen.

10. Verwenden Sie benutzerdefinierte Eigenschaften

Die Methoden, die wir bisher untersucht haben, führen entweder dazu, dass wir die Kontrolle über die Stile verlieren oder viel Wartung benötigen, um sicherzustellen, dass alles im Dunkelmodus aktualisiert wird. Wir können dies auf eine andere Weise angehen: Wir können benutzerdefinierte Eigenschaften verwenden, um unsere Farben zu definieren und sie dann mithilfe der Medienabfrage zu überschreiben.

11. Erstellen Sie benutzerdefinierte Eigenschaften

Um benutzerdefinierte Eigenschaften zu verwenden, definieren wir sie oben in unserem CSS im ' :Wurzel ' Element. Das Stammelement hat den gleichen Gültigkeitsbereich wie HTML und ist daher global verfügbar. Wir müssen uns für die Variablennamen entscheiden und deren Werte definieren.

:root { --background-color: #ededed; --page-background: #fff; --text-color: #212121; --color-alpha: #c3423f; }

12. Wenden Sie unsere benutzerdefinierten Eigenschaften an

Jetzt haben wir einige benutzerdefinierte Eigenschaften definiert, die wir in unserem CSS verwenden können. Wir beginnen mit dem Körper und wenden die Hintergrund- und Textfarben an. Um eine benutzerdefinierte Eigenschaft zu verwenden, verwenden wir die ' var (- Name der benutzerdefinierten Eigenschaft) ' Syntax.

2 in 1 Laptop mit NVIDIA-Grafikkarte
body { background-color: var(--background-color); color: var(--text-color); }

13. Wenden Sie die verbleibenden Eigenschaften an

Mit der gleichen Methode können wir auch die 'Hintergrundfarbe' unseres Containers und die 'Farbe' unseres 'aktualisieren. Text - Alpha Klasse, um unsere benutzerdefinierten Eigenschaften zu verwenden. Alle Farben auf unserer Seite werden jetzt mithilfe benutzerdefinierter Eigenschaften gesteuert.

.content-container { background-color: var(--page-background); } .text--alpha { color: var(--color-alpha); }

14. Fügen Sie die Medienabfrage erneut hinzu

Jetzt können wir die Medienabfrage erneut hinzufügen, diesmal können wir jedoch die darin enthaltenen benutzerdefinierten Eigenschaftswerte überschreiben. Wir werden dies direkt nach der ursprünglichen Stammdefinition platzieren und innerhalb der Medienabfrage können wir jetzt einfach neue Werte für alle unsere benutzerdefinierten Farbeigenschaften auswählen.

@media (prefers-color-scheme: dark) { :root { --background-color: #111; --page-background: #212121; --text-color: #ededed; --color-alpha: #50a8d8; } }

15. Übernehmen Sie die volle Kontrolle

Benutzerdefinierte Eigenschaften geben uns die volle Kontrolle darüber, welche Farben und anderen Eigenschaften wir ändern und verwenden. Lassen Sie uns den Box-Schatten auf unserem Seitencontainer aktualisieren, um ihn im Dunkelmodus weniger transparent zu machen. Dazu müssen wir eine neue benutzerdefinierte Eigenschaft für den Seitenschatten erstellen.

:root { … --page-shadow: 0 0 12px 6px rgba (0,0,0,0.05); }

16. Wenden Sie den Schatten an

Jetzt haben wir eine weitere benutzerdefinierte Eigenschaft erstellt, die wir auf das richtige Element auf der Seite anwenden müssen. Wir können dann den Wert in unserem Stammelement überschreiben, um die Transparenz zu verringern.

@media (prefers-color-scheme: dark) { :root { … --page-shadow: 0 0 12px 6px rgba(0,0,0,0.33) ; } } .content-container { … box-shadow: var(--page-shadow); }

17. Fügen Sie ein Bild hinzu

CSS hell und dunkel: Bilder

Fügen Sie ein Bild hinzu und schweben Sie es neben den Inhalt

Fügen wir nun wieder ein Bild zu unserem Inhalt hinzu, und dann können wir einige grundlegende Stile hinzufügen, um das Bild neben dem Inhalt zu platzieren.

img { width: 100%; height: auto; float: left; max-width: 300px; margin-right: 1.618rem; margin-bottom: 1.618rem; }

Wie wir sehen können, wird das Bild zwischen den beiden Themen nicht geändert, da wir keine Filter verwenden.

18. Fügen Sie weitere Komponenten hinzu

Jetzt haben wir unsere benutzerdefinierten Eigenschaften, mit denen wir der Seite weiterhin Elemente hinzufügen und sie mit unseren Variablen gestalten können. Lassen Sie uns eine Schaltflächenklasse erstellen und unserer Seite eine Schaltfläche hinzufügen.

.button { display: inline-flex; font-family: inherit; background-color: var(--color-alpha); color: var(--text-color); padding: 1.618rem 3.236rem; border: 0 none; border-radius: 0.25rem; text-decoration: none; }

19. Erstellen Sie Schaltflächenstile

Mit denselben Variablen können wir auch einen Schwebestil erstellen, der für beide Themen verwendet werden kann. Um dies zu erreichen, werden wir die Farben invertieren, wenn der Benutzer über die Schaltfläche fährt, und diese Eigenschaften ändern, um die Erfahrung weniger störend zu gestalten.

.button { … transition: background-color 150ms, color 150ms; &:hover { background-color: var(--text-color); color: var(--color-alpha); } }

20. Erstellen Sie benutzerdefinierte Eigenschaften für Schaltflächen

Benutzerdefinierte Eigenschaften haben denselben Gültigkeitsbereich wie reguläre CSS-Elemente. Dies bedeutet, dass wir sie mit einem spezifischeren Selektor überschreiben können. Wir können dies nutzen und einige Variablen erstellen, die für unsere Schaltfläche gelten.

.button { --button-background: var(--color-alpha); --button-text: var(--background-color); background-color: var(--button-background); color: var(--button-text); … }

21. Verwenden Sie den Bereich

CSS hell und dunkel: Umfang

Verwenden Sie den Bereich, um verschiedene Stile und Interaktionen für Ihre Schaltfläche zu erstellen

Wir können diesen Bereich nutzen, um verschiedene Stile und Hover-Interaktionen für unsere Schaltfläche in dunklen und hellen Themen zu erstellen. Wir können den Wert unserer Variablen basierend auf der Medienabfrage oder dem Status des Elements ändern, anstatt die Eigenschaft wie gewohnt mit einem neuen Wert zu wiederholen.

.button { … &:hover { --button-background: #ae3937; @media (prefers-color-scheme: dark) { --button-background: #2e98d1; --button-text: var(--background- color); } } }

Mit einem Team an einem Build arbeiten? Halten Sie Ihren Prozess mit anständigen zusammenhängend Cloud-Speicher .

Generate, die preisgekrönte Konferenz für Webdesigner, kehrt vom 24. bis 25. April nach NYC zurück! Um Tickets zu buchen, besuchen Sie www.generateconf.com

Generate, die preisgekrönte Konferenz für Webdesigner, kehrt vom 24. bis 25. April nach NYC zurück! Um Tickets zu buchen, besuchen Sie www.generateconf.com

Dieser Artikel wurde ursprünglich in Ausgabe 283 des Creative Web Design Magazins veröffentlicht Webdesigner . Ausgabe 283 kaufen oder Abonnieren Sie hier den Web Designer .

Zum Thema passende Artikel: