So implementieren Sie leichte oder dunkle Modi in CSS

Die CSS-Spezifikation ist ständig weiterentwickelt. Der Prozess zur Implementierung neuer Funktionen in CSS ist kompliziert, aber die vereinfachte Version ist jedoch, dass die CSS-Arbeitsgruppe über die neuen Elemente entscheidet, die der Spezifikation hinzugefügt werden sollen. Es ist dann bis zu den Browsern, um diese neuen Elemente umzusetzen, und die Browser wählen in welcher Reihenfolge, in welcher Reihenfolge sie umsetzen, weshalb wir jetzt über eine Nichtübereinstimmung der Unterstützung für neue Funktionen verfügen. Während dies manchmal ärgerlich sein kann, ist es viel besser, dies zu tun, als die Browser, die die vollständige Spezifikation implementieren, wie wir in den frühen Tagen des Webs sahen. Wenn Sie sich Sorgen um Ihre Site sorgen, um an seiner vollen Fähigkeit zu arbeiten, wenden Sie sich an die Unterstützung eines unterstützenden Web-Hosting Bedienung.

All dies klingt wie zu viel Arbeit? Halten Sie die Dinge einfach mit einem Webseitenersteller .

Die CSS-Arbeitsgruppe besteht aus Mitgliedern aus allen großen Browseranbietern und anderen Technologieunternehmen wie Apple und Adobe. Apple, das kürzlich seine neue Version von MacOS auf den Markt gebracht hatte, wollte einen Weg, seinen snazzischen neuen dunklen Modus im Browser zu erkennen. Um dies zu tun, drückte Apple eine Empfehlung an die Spezifikation für eine neue Medienabfrage von Niveau 5.

 @media (bevorzugt - Farbschema: Licht | dunkel)
{...} 

Mit dieser Medienabfrage können wir erkennen, ob der Benutzer derzeit den leichten oder dunklen Modus im Betriebssystem verwendet. Im Moment wird dies nur von der Safari-Technologie-Vorschau 69 und höher unterstützt, aber die anderen Browser sollten jedoch nicht weit zurück sein.

• Ein Webdesignerhandbuch zu CSS-Methoden

Um dies zu testen, müssen Sie auf MOJAVE 10.14 (MacOS) aktualisiert und in den Systemeinstellungen ein dunkles Erscheinungsbild ausgewählt werden. Es gibt ein paar Möglichkeiten, dass wir diese neue Medienabfrage verwenden können, um verschiedene Themen umzusetzen. Wir werden jetzt einige von ihnen in diesem Tutorial erkunden.

01. Richten Sie die Seite ein

Um zu beginnen, müssen wir einige HTML-Elemente für den Stil erstellen, sodass wir einen neuen Stift auf Codepen erstellen und einige Elemente hinzufügen. Wir werden einen Container für unseren Inhalt hinzufügen, um es zu zentrieren, und einige Überschriften und Text. Wir setzen die CSS ein, um SASS zu verwenden, um das Verschachtelung in CSS zu verwenden.

 & lt; Div Class = "Content-Container" & GT;
& lt; H1 & GT; Überschrift eins & lt; / h1 & gt;
& lt; H2 & GT; Überschrift zwei & lt; / h2 & gt;
& lt; hr & gt;
& lt; p & gt; ... & lt; / p & gt;
& lt; p & gt; ... & lt; / p & gt;
& lt; / div & gt; 

02. Grundelemente im Stil

Als Nächstes fügen wir einige grundlegende Stile hinzu und umfassen einige Schriftarten von Google, um unsere Seite ein bisschen schöner zu machen. Wir werden alle unsere grundlegenden Elemente stylen, um neue Schriftgrößen, Farben und Schriftarten anzuwenden.

 Körper {
Schriftfamilie: 'MerriWeather', Serif;
Hintergrundfarbe: #ededed;
Farbe: # 212121;
Polsterung: 1.618rem;
Linienhöhe: 1.618;
Schriftgröße: 16px;
} 

03. Stilbehälter

Als nächstes stilt wir unseren Container, um den Inhalt zu einer komfortablen Leitungslänge zum Lesen herzustellen. Wir fügen auch eine Hintergrundfarbe hinzu und schatten. Um das Inhaltsfeld auf der Seite zu zentrieren, verwenden wir das Keyword 'Auto' auf den linken und rechten Werten der Margeneigenschaften.

. Content-Container {
Polsterung: 1.618REM 3.236REM;
Max-Breite: 48.54REM;
Marge: 3.236REM Auto;
Hintergrundfarbe: #FFF;
Kastenschatten: 0 0 12px 6px RGBA (0,0,0,0,05);
Borderradius: .269666667REM;
} 

04. Markierungsfarbe hinzufügen

Die meisten Websites nutzen Farbe irgendwo, und im Moment haben wir nur Weiße und Grautöne, also wählen wir jetzt eine Markierungsfarbe und erstellen Sie einen Stil, um diese Farbe anzuwenden. Wir wenden die Farbe mit einem Span-Tag an und verwendet es, um etwas in unserem Inhalt hervorzuheben.

 & lt; span class = "text - alpha" & gt; lorem ipsum & lt; / span & gt;
.text - alpha {
Farbe: # C3423F;
} 

05. Implementieren Sie die Medienabfrage

Jetzt haben wir eine Seite mit einigen grundlegenden Stilen, wir sehen uns auf, wie wir die Medienabfrage umsetzen können. Lassen Sie uns dies einschließen und einige unserer Stile überschreiben. Wir beginnen mit den Körperstilen.

@media (bevorzugt-color-schema: dunkel)
{
Körper {
Hintergrundfarbe: # 111;
}
} 

06. Überschreiben Sie die verbleibenden Stile

Da wir jetzt sehen können, dass die Medienabfrage arbeitet und unsere Körperhintergrundfarbe geändert hat, müssen wir alle unsere verbleibenden Stile überschreiben.

. Content-Container
{
Farbe weiß;
Hintergrundfarbe: # 212121;
}
.text - alpha {
Farbe: # 50A8D8;
} 

07. Wartungsfähigkeit

Während wir gerade fertig sind, funktioniert perfekt für unsere Demo und könnte auf kleineren Websites aufrechterhalten werden. Diese Methode wäre ein Albtraum, der auf einem größeren Projekt mit vielen verschiedenen Elementen verwaltet wird, die alle übergeordnet werden müssen. Wir nutzen auch die Kaskade in unserem obigen Beispiel, während ein großes System mehr Spezifität erfordern kann, um alle Elemente anzurufen.

08. Nehmen Sie einen weiteren Ansatz

Wie können wir sonst das Problem angehen? Schauen wir uns CSS-Filter an. Einer der Werte, die wir auf CSS-Filtern verwenden können, ist 'invert', sodass wir dies einfach auf das HTML anwenden und alle Farben invertieren können und uns einen "dunklen Modus" angeben.

 @media (bevorzugt-color-schema: dunkel) {
html {
Filter: invertieren (100%);
}
} 

09. Fügen Sie Bilder hinzu

Während die Filtermethode mit dem Inhalt zusammenarbeitet, den wir in unserem Dokument haben, sieht es immer noch nicht gut aus - unser Kastenschatten, zum Beispiel, ist auch invertiert, was ziemlich seltsam aussieht. Wir haben die Kontrolle über die Stile verloren, was zu einem noch größeren Problem wird, wenn Sie farbige Hintergründe haben. Wir haben auch ein völlig neues Problem, um zu berücksichtigen, wenn Bilder beteiligt sind. Mal sehen, was passiert, wenn wir unserem Seiten ein Bild hinzufügen.

10. Verwenden Sie benutzerdefinierte Eigenschaften

Die Methoden, die wir bisher erkundeten, entweder dazu führen, dass wir die Kontrolle über die Stile verlieren oder viel Wartung erfordern, um sicherzustellen, dass alles im dunklen Modus aktualisiert wird. Es gibt eine andere Art und Weise, wie wir uns nähern können: Wir können benutzerdefinierte Eigenschaften verwenden, um unsere Farben zu definieren und dann mit der Medienabfrage zu überschreiben.

11. Kundenspezifische Eigenschaften erstellen

Um benutzerdefinierte Eigenschaften zu verwenden, definieren wir sie an der Spitze unserer CSS im Inneren " :Wurzel ' Element. Das Wurzelelement hat den gleichen Umfang wie HTML, der global verfügbar ist. Wir müssen über die Variablennamen entscheiden und ihre Werte definieren.

: root {
- Background-Farbe: #ededed;
- Page-Hintergrund: #FFF;
--text-Farbe: # 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 ein benutzerdefiniertes Eigentum zu verwenden, verwenden wir das ' VAR (- Custom-Eigenschaft-Name) ' Syntax.

 Körper {
Hintergrundfarbe: var (- Hintergrundfarbe);
Farbe: var (- Textfarbe);
} 

13. Führen Sie die verbleibenden Eigenschaften an

Mit derselben Methode können wir auch die "Hintergrundfarbe" unseres Containers und die "Farbe" unserer " Text-Alpha. 'Klasse, um unsere benutzerdefinierten Eigenschaften zu nutzen. Alle Farben auf unserer Seite werden jetzt mit benutzerdefinierten Eigenschaften gesteuert.

. Content-Container {
Hintergrundfarbe: var (- Seite-Hintergrund);
}
.text - alpha {
Farbe: var (- color-alpha);
} 

14. Fügen Sie die Medienabfrage erneut hinzu

Jetzt können wir die Medienabfrage erneut hinzufügen, aber diesmal können wir die benutzerdefinierten Eigenschaftswerte überschreiben, die sich darin befinden. Wir werden dieses Recht nach der ursprünglichen Stammdefinition eingeben, und in der Medienabfrage können wir nun einfach neue Werte für alle unsere farbigen benutzerdefinierten Eigenschaften auswählen.

 @media (bevorzugt-color-schema: dunkel) {
:Wurzel {
- Background-Farbe: # 111;
- Page-Hintergrund: # 212121;
--text-Farbe: #ededed;
- Color-Alpha: # 50A8D8;
}
} 

15. Nehmen Sie die vollständige Kontrolle

Kundenspezifische Eigenschaften geben uns vollständige Kontrolle zur Auswahl, um auszuwählen, welche Farben und andere Eigenschaften wir ändern und verwenden. Lassen Sie uns den Kastenschatten auf unseren Seitencontainer aktualisieren, um es bei Verwendung des dunklen Modus weniger transparent zu machen. Dazu müssen wir ein neues benutzerdefiniertes Eigenschaft für den Shadow-Shadow erstellen.

: root {
...
- Page-Shadow: 0 0 12PX 6PX RGBA
(0,0 0,0,05);
} 

16. Wenden Sie den Schatten an

Nun haben wir ein anderes benutzerdefiniertes Eigentum erstellt, das wir benötigen, um ihn auf das richtige Element auf der Seite anzuwenden. Wir können den Wert in unserem Wurzelelement dann überschreiben, um die Transparenz zu reduzieren.

 @media (bevorzugt-color-schema: dunkel) {
:Wurzel {
...
- Page-Shadow:
0 0 12PX 6PX RGBA (0,0,0,0.33)
;
}
}
Content-Container {
...
Box-Shadow: Var (- Seitenschatten);
} 

17. Fügen Sie ein Bild hinzu

Nun fügen wir ein Bild wieder in unseren Inhalt hinzu, und dann können wir einige grundlegende Stile hinzufügen, um das Bild neben dem Inhalt zu schweben.

 img {
Breite: 100%;
Höhe: Auto;
Float: links;
Max-Breite: 300px;
Margin-Right: 1.618REM;
Margin-Bottom: 1.618REM;
} 

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

18. Fügen Sie mehr Komponenten hinzu

Nun haben wir unsere benutzerdefinierten Eigenschaften, wir können der Seite weiterhin Elemente hinzufügen und mit unseren Variablen stylen. Lassen Sie uns eine Schaltungsklasse erstellen und eine Schaltfläche zu unserer Seite hinzufügen.

 .Button {
Anzeige: Inline-Flex;
Schriftfamilie: erben;
Hintergrundfarbe: var (- color-alpha);
Farbe: var (- Textfarbe);
Polsterung: 1.618REM 3.236REM;
Border: 0 Keine;
Grenzradius: 0.25REM;
Textdekoration: Keine;
}

19. Schaltfläche Button HOVER-Stile erstellen

Mit den gleichen Variablen können wir auch einen Hover-Stil erstellen, der für beide Themen verwendet werden kann. Um dies zu erreichen, werden wir die Farben invertieren, wenn der Benutzer über den Knopf schwebt und diese Eigenschaften übergibt, um die Erfahrung weniger jarrieren zu lassen.

 .Button {
...
Übergang: Hintergrundfarbe 150ms,
Farbe 150ms;
& amp;: Hover {
Hintergrundfarbe: var (- Textfarbe);
Farbe: var (- color-alpha);
}
} 

20. Taste kundenspezifische Eigenschaften machen

Kundenspezifische Eigenschaften haben den gleichen Umfang wie normale CSS-Elemente; Das bedeutet, dass wir sie mit einem spezifischeren Selektor überschreiben können. Wir können dies nutzen und einige Variablen erstellen, die auf unserem Knopf abgebaut werden.

 .Button {
- Button-Hintergrund: var (- color-alpha);
- Button-Text: VAR (- Hintergrundfarbe);
Hintergrundfarbe: VAR (- Button-Hintergrund);
Farbe: VAR (- Button-Text);
...
} 

21. Nutzungsbereich verwenden.

Wir können diesen Bereich nutzen, um verschiedene Stile und Farbinteraktionen für unsere Schaltfläche in dunklen und leichten Themen zu erstellen. Wir können den Wert unserer Variablen basierend auf der Medienabfrage oder des Status des Elements ändern, anstatt das Eigentum mit einem neuen Wert zu wiederholen, da wir normalerweise tun würden.

 .Button {
...
& amp;: Hover {
- Button-Hintergrund: # AE3937;
@media (bevorzugt-color-schema: dunkel) {
- Button-Hintergrund: # 2E98D1;
- Button-Text: VAR (- Hintergrund-
Farbe);
}
}
}

An einem Build mit einem Team arbeiten? Halten Sie Ihren Prozess kohärt mit anständig Cloud-Speicherung. .

Dieser Artikel wurde ursprünglich in Ausgabe 283 des kreativen Webdesign-Magazins veröffentlicht Webdesigner . Ausgabe 283 kaufen oder Abonnieren Sie den Webdesigner hier .

Zum Thema passende Artikel:

• Beginnen Sie mit der CSS-Kunst
• 12 große CSS-Animationsressourcen
• Welchen CSS-Rahmen sollten Sie verwenden?