Wir veröffentlichen den zweiten Teil einer Reihe von Artikeln über die Erstellung eines modernen Blogs mit Nuxt.js. Heute werden wir das dunkle Thema in die Anwendung implementieren, die wir im ersten Teil zusammen mit Ihnen geschrieben haben .
Bitte beachten Sie, dass der Code für jedes Teil in einem eigenen Thread auf Github zu finden ist und die
master
Version der Anwendung aus dem zuletzt veröffentlichten Artikel verfügbar ist.
Was ist ein dunkles Thema?
Ein dunkles Thema ist ein Farbschema für jede Benutzeroberfläche, bei der heller Text und Elemente der Benutzeroberfläche vor einem dunklen Hintergrund angezeigt werden, sodass der Bildschirm auf Mobiltelefonen, Tablets und Computern bei schlechten Lichtverhältnissen einfacher angezeigt werden kann. Das dunkle Thema reduziert das vom Bildschirm abgegebene Licht, während das für die Lesbarkeit erforderliche Mindestfarbkontrastverhältnis beibehalten wird.
Das dunkle Thema verbessert die visuelle Ergonomie, indem es die Belastung der Augen verringert, indem der Bildschirm an die aktuellen Lichtverhältnisse angepasst wird und nachts oder im Dunkeln einfach zu bedienen ist.
Beachten Sie außerdem, dass die Verwendung des dunklen Themas in Web- und Mobilanwendungen die Akkulaufzeit Ihres Geräts verlängern kann. Google hat bestätigt, dass das dunkle Thema auf OLED-Bildschirmen sehr hilfreich ist, um die Akkulaufzeit zu verlängern.
@ nuxtjs / Farbmodus
Um das dunkle Thema zu implementieren, verwenden wir das Modul @ nuxtjs / color-mode , das die folgenden Funktionen bietet:
- Fügt
.${color}-mode
dem Tag eine Klasse hinzu, um die<html>
Verwaltung von CSS-Themen zu vereinfachen - funktioniert in jedem Modus
Nuxt
(static
,ssr
oderspa
); - erkennt automatisch den Farbmodus des Systems auf dem Gerät des Benutzers und kann anhand dieser Daten das entsprechende Thema festlegen;
- Mit dieser Option können Sie das ausgewählte Thema zwischen Registerkarten und Fenstern synchronisieren.
- ermöglicht es Ihnen, die implementierten Themen für einzelne Seiten und nicht für die gesamte Anwendung zu verwenden (ideal für die inkrementelle Entwicklung);
- Das Modul unterstützt auch IE9 + (ich bin nicht sicher, ob dies in der modernen Entwicklung noch relevant ist, aber es könnte für jemanden nützlich sein).
Lassen Sie uns zuerst das Modul installieren:
npm i --save-dev @nuxtjs/color-mode
Fügen Sie dann dem Abschnitt
buildModules
in der Datei Informationen zu diesem Modul hinzu
nuxt.config.js
:
{
buildModules: [
'@nuxtjs/color-mode'
]
}
Fein! Wenn wir nun unsere Anwendung ausführen und eine Registerkarte
Elements
in der Entwicklerkonsole öffnen , sehen wir, dass dem Tag
html
eine Klasse hinzugefügt wurde , die beispielsweise in unserem Fall dem Betriebssystemthema entspricht
class="light-mode"
.
Themenumschalter
Im nächsten Schritt implementieren wir einen Schalter, der das dunkle Thema in das helle Thema ändert und umgekehrt.
Wenn wir uns das Design unserer Anwendung in Figma ansehen, können wir sehen, dass neben dem Themenumschalter auch ein Sprachumschalter vorhanden ist, den wir in einem der nächsten Artikel dieser Reihe implementieren werden.
Schreiben wir sofort eine Wrapper-Komponente, die diese Schalter kapselt und für die Ränder vor anderen Komponenten verantwortlich ist.
Erstellen Sie dazu eine Komponente
AppOptions
mit folgendem Inhalt:
<template lang="pug">
section.section
.content
.app-options
switcher-color-mode
</template>
<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
name: 'AppOptions',
})
</script>
<style lang="scss" scoped>
.app-options {
display: flex;
margin-top: 24px;
}
</style>
Komponente auf Github .
Wie wir sehen können, gibt es in dieser Komponente keine Logik, sondern nur Ränder für verschachtelte Komponenten. Jetzt haben wir nur noch eine verschachtelte Komponente
switcher-color-mode
. Implementieren wir sie.
Werfen wir einen Blick auf den Abschnitt
script
dieser Komponente:
<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
name: 'SwitcherColorMode',
computed: {
icon() {
return (this as any).$colorMode.value === 'light'
? 'assets/icons/sun.svg'
: 'assets/icons/moon.svg'
},
},
methods: {
changeColorMode() {
;(this as any).$colorMode.preference =
(this as any).$colorMode.value === 'light' ? 'dark' : 'light'
},
},
})
</script>
Hier implementieren wir eine Methode
changeColorMode
, die das Thema in dem vom Modul bereitgestellten Objekt ändert
@nuxtjs/color-mode
.
Wenn der Wert geändert wird
$colorMode.preference
, wird auch die entsprechende Klasse des Tags festgelegt
html
:
class="light-mode"
oder
class="dark-mode"
.
Darüber hinaus gibt es eine berechnete Eigenschaft
icon
, die je nach ausgewähltem Thema das benötigte Symbol zurückgibt. Bitte beachten Sie, dass Sie Symbole
sun.svg
und
moon.svg
Verzeichnisse hinzufügen müssen, um ordnungsgemäß zu funktionieren
assets/icons
.
Die Komponentenvorlage sieht folgendermaßen aus:
<template lang="pug">
button(@click="changeColorMode")
img(
alt="theme-icon"
:src="getDynamicFile(icon)"
)
</template>
Hier ist alles ganz einfach! Wir haben eine Schaltfläche, auf die wir klicken, auf die wir eine Methode aufrufen
changeColorMode
und unser Thema ändern. Innerhalb der Schaltfläche zeigen wir ein Bild des ausgewählten Themas.
Komponente auf Github .
Es bleibt nur, diese Komponente zur Hauptseite unserer Anwendung hinzuzufügen. Danach sollte die Seitenvorlage folgendermaßen aussehen:
<template lang="pug">
.page
section-header(
title="Nuxt blog"
subtitle="The best blog you can find on the global internet"
)
app-options
post-list
</template>
Variablenverwaltung
Wie Sie sich vielleicht aus dem ersten Teil erinnern, haben wir
scss
Variablen verwendet , um alle Farben in der Anwendung zu definieren. Jetzt müssen wir nur noch die Werte dieser Variablen abhängig vom ausgewählten Thema ändern.
Das Problem ist jedoch, dass die
scss
Variablen beim Erstellen der Anwendung einmal festgelegt werden und wir sie in Zukunft beim Ändern des Themas nicht mehr neu definieren können.
Diese Einschränkung kann mit der Hilfe umgangen werden
js
, aber es gibt eine viel einfachere Lösung: Wir können native
css
Variablen verwenden.
In unserer Datei mit Variablen
assets/styles/variables.scss
sieht der Abschnitt mit den Farben folgendermaßen aus:
// colors
$text-primary: rgb(22, 22, 23);
$text-secondary: rgb(110, 109, 122);
$line-color: rgb(231, 231, 233);
$background-color: rgb(243, 243, 244);
$html-background-color: rgb(255, 255, 255);
Definieren wir zunächst zwei Farbschemata in derselben Datei - hell und dunkel - mithilfe von
css
Variablen:
:root {
// light theme
--text-primary: rgb(22, 22, 23);
--text-secondary: rgb(110, 109, 122);
--line-color: rgb(231, 231, 233);
--background-color: rgb(243, 243, 244);
--html-background-color: rgb(255, 255, 255);
// dark theme
&.dark-mode {
--text-primary: rgb(250, 250, 250);
--text-secondary: rgb(188, 187, 201);
--line-color: rgb(45, 55, 72);
--background-color: rgb(45, 55, 72);
--html-background-color: rgb(26, 32, 44);
}
}
Wir haben die
css
Variablen im Selektor definiert
:root
. Standardmäßig wird eine
css
Variable angegeben und mit einem Präfix verwendet
--
. Lesen Sie
über
css
pseudo- Klasse
:root
auf MDN und W3Schools . Zitat aus
MDN
: Die
css
Pseudoklasse
:root
findet das Stammelement des Dokumentbaums. Gilt für HTML,
:root
findet ein Tag
html
und ist identisch mit dem HTML-Tag-Selektor, aber seine Spezifität ist höher.
Wie wir sehen können, sind diese Farben, die zuvor direkt geschrieben wurden
scss
Variablen werden jetzt in
css
Variablen als Standardwerte angegeben. Wenn eine Klasse vorhanden ist, werden
.dark-mode
diese Werte überschrieben.
Jetzt sehen unsere
scss
Farbvariablen folgendermaßen aus:
$text-primary: var(--text-primary);
$text-secondary: var(--text-secondary);
$line-color: var(--line-color);
$background-color: var(--background-color);
$html-background-color: var(--html-background-color);
Beim Wechseln des Themas ändert sich das Farbschema entsprechend den angegebenen Werten, und wir müssen an den bereits implementierten Komponenten nichts ändern.
Fazit
Dank dieses Artikels haben wir gelernt, wie ein dunkles Thema für eine Nuxt.js-Anwendung implementiert wird.
Haben Sie alle Schritte ausgeführt? Denkst du, das dunkle Thema ist nur ein Hype oder ist es eine Notwendigkeit? Teilen Sie Ihre Gedanken in den Kommentaren.
Links zu benötigten Materialien: