So fügen Sie dunkle Themen in Vue-Apps mit CSS-Variablen hinzu

Die Implementierung dunkler Themen in unsere Webanwendungen hat sich von einem Luxus zur Notwendigkeit entwickelt. Gerätebenutzer möchten nun sowohl aus ästhetischen Vorlieben als auch aus praktischen Gründen von hellen zu dunklen Themen wechseln und umgekehrt.

Dunkle Themen bieten eine dunklere Farbpalette für Benutzeroberflächen, sodass die Benutzeroberfläche in Umgebungen mit wenig Licht die Augen schont. Dunkle Themen tragen auch dazu bei, die Akkulaufzeit auf Geräten mit OLED- oder AMOLED-Bildschirmen zu verlängern.

Diese und weitere Vorteile machen es sinnvoller, Benutzern die Möglichkeit zu geben, zu dunklen Themen zu wechseln.

Einrichten der Testanwendung

Um besser zu verstehen, wie Sie dunkle Themen in Vue hinzufügen, müssen Sie eine einfache Vue-App erstellen, um Ihre Entwicklung zu testen.

Um die neue Vue-App zu initialisieren, führen Sie den folgenden Befehl von Ihrem Terminal aus:

npm init vue@latest

Dieser Befehl installiert die neueste Version von create-vue Paket, das Paket zum Initialisieren neuer Vue-Apps. Außerdem werden Sie aufgefordert, aus einer bestimmten Reihe von Funktionen auszuwählen. Sie müssen keine auswählen, da dies für den Umfang dieses Tutorials nicht erforderlich ist.

Fügen Sie die folgende Vorlage hinzu App.vue Datei in Ihrer Bewerbung src Verzeichnis:

<template>
<div>
<h1class="header">Welcome to My Vue Apph1>
<p>This is a simple Vue app with some text and styles.p>

<divclass="styled-box">
<pclass="styled-text">Styled Textp>
div>
<buttonclass="toggle-button">Toggle Dark Modebutton>
div>
template>

Der obige Codeblock beschreibt die gesamte Anwendung in normalem HTML, ohne Skript- oder Stilblöcke. Sie verwenden die Klassen in der obigen Vorlage für Gestaltungszwecke. Wenn Sie das dunkle Thema implementieren, ändert sich die Struktur der App.

Gestalten der Testanwendung mit CSS-Variablen

CSS-Variablen oder benutzerdefinierte CSS-Eigenschaftensind dynamische Werte, die Sie in Ihren Stylesheets definieren können. CSS-Variablen stellen hervorragende Tools für die Themengestaltung dar, da sie es Ihnen ermöglichen, Werte wie Farben und Schriftgrößen an einem Ort zu definieren und zu verwalten.

Sie verwenden CSS-Variablen und CSS-Pseudoklassenselektoren, um Ihrer Vue-Anwendung ein reguläres und ein Dark-Mode-Design hinzuzufügen. Im src/assets Verzeichnis, erstellen Sie ein Styles.css Datei.

Fügen Sie dieser Datei „styles.css“ die folgenden Stile hinzu:

/* styles.css */
:root {
--background-color: #ffffff; /* White */
--text-color: #333333; /* Dark Gray */
--box-background: #007bff; /* Royal Blue */
--box-text-color: #ffffff; /* White */
--toggle-button: #007bff; /* Royal Blue */
}

[data-theme='true'] {
--background-color: #333333; /* Dark Gray */
--text-color: #ffffff; /* White */
--box-background: #000000; /* Black */
--box-text-color: #ffffff; /* White */
--toggle-button: #000000; /* Black */
}

Diese Deklarationen enthalten einen speziellen Pseudoklassenselektor (:Wurzel) und einen Attributselektor ([data-theme='true']). Die Stile, die Sie in einen Stammselektor aufnehmen, zielen auf das oberste übergeordnete Element ab. Es fungiert als Standardstil für die Webseite.

Der Datenthemenselektor zielt auf HTML-Elemente ab, bei denen dieses Attribut auf „true“ gesetzt ist. In diesem Attributselektor können Sie dann Stile für das Dunkelmodus-Design definieren, um das Standard-Lichtdesign zu überschreiben.

Diese Deklarationen definieren beide CSS-Variablen mithilfe von -- Präfix. Sie speichern Farbwerte, die Sie dann zum Gestalten der Anwendung für helle und dunkle Themen verwenden können.

Bearbeiten Sie die src/main.js Datei und importieren Sie die Datei „styles.css“:

// main.js
import'./assets/styles.css'
import { createApp } from'vue'
import App from'./App.vue'
createApp(App).mount('#app')

Fügen Sie nun weitere Stile hinzu Styles.css, unter dem Datenthema Wähler. Einige dieser Definitionen verweisen auf die Farbvariablen mithilfe von var Stichwort. Auf diese Weise können Sie die verwendeten Farben ändern, indem Sie einfach den Wert jeder Variablen ändern, wie dies bei den ursprünglichen Stilen der Fall ist.

* {
background-color: var(--background-color);
text-align: center;
color: var(--text-color);
padding: 20px;
font-family: Arial, sans-serif;
transition: background-color 0.3s, color 0.3s;
}

.header {
font-size: 24px;
margin-bottom: 20px;
}

.styled-box {
background-color: var(--box-background);
color: var(--box-text-color);
padding: 10px;
border-radius: 5px;
margin: 20px 0;
}

.styled-text {
font-size: 18px;
font-weight: bold;
}

.toggle-button {
background-color: var(--toggle-button);
color: #fff;
border: none;
border-radius: 3px;
cursor: pointer;
padding: 5px 10px;
}

Mit dem universellen CSS-Selektor () können Sie für alle Elemente eine Übergangseigenschaft festlegen.*), um beim Wechseln des Modus eine flüssige Animation zu erstellen:

* {
/* Add more transitions as needed */
transition: background-color 0.3s, color 0.3s;
}

Diese Übergänge erzeugen eine allmähliche Änderung der Hintergrund- und Textfarbe, wenn der Dunkelmodus umgeschaltet wird, was einen angenehmen Effekt ergibt.

Implementierung der Dark-Mode-Logik

Um den dunklen Theme-Modus zu implementieren, benötigen Sie JavaScript-Logik, um zwischen hellen und dunklen Themes zu wechseln. In deinem App.vue Fügen Sie in der Datei den folgenden Skriptblock unterhalb des eingeschriebenen Vorlagenblocks ein Vues Kompositions-API :

<scriptsetup>
import { ref } from 'vue';
// Function to get the initial dark mode preference from local storage
const getInitialDarkMode = () => {
 const userPreference = localStorage.getItem('darkMode');
 return userPreference 'true'? true: false;
};
// Define the ref for darkMode and initialize it with the user preference
// or false
const darkMode = ref(getInitialDarkMode());
// Function to save the dark mode preference to local storage
const saveDarkModePreference = (isDarkMode) => {
 localStorage.setItem('darkMode', isDarkMode);
};
// Function to toggle dark mode and update the local storage preference
const toggleDarkMode = () => {
 darkMode.value = !darkMode.value;
 saveDarkModePreference(darkMode.value);
};
script>

Das obige Skript enthält die gesamte JavaScript-Logik zum Wechseln zwischen dem Hell- und Dunkelmodus in Ihrer Web-App. Das Skript beginnt mit einem importieren Anweisung zum Importieren der Ref-Funktion zur Verarbeitung reaktiver Daten (dynamischer Daten) in Vue.

Als nächstes definiert es a getInitialDarkMode Funktion, die die Dunkelmoduspräferenz des Benutzers abruft des Browsers Lokaler Speicher. Es erklärt die DarkMode ref und initialisiert es mit der Präferenz des Benutzers, die von der Funktion getInitialDarkMode abgerufen wurde.

Der saveDarkModePreference Die Funktion aktualisiert die Dunkelmoduspräferenz des Benutzers im LocalStorage des Browsers mit dem setItem Methode. Endlich, das toggleDarkMode Mit dieser Funktion können Benutzer den Dunkelmodus umschalten und den LocalStorage-Wert des Browsers für den Dunkelmodus aktualisieren.

Anwenden des Dark Mode-Designs und Testen der Anwendung

Jetzt im Vorlagenblock Ihres App.vue Fügen Sie in der Datei den Data-Theme-Attributselektor zum Stammelement hinzu, um das Dark-Mode-Theme basierend auf Ihrer Logik bedingt anzuwenden:

<template>

<div:data-theme="darkMode">
<h1class="header">Welcome to My Vue Apph1>
<p>This is a simple Vue app with some text and styles.p>

<divclass="styled-box">
<pclass="styled-text">Styled Textp>
div>

<button @click="toggleDarkMode"class="toggle-button">
 Toggle Dark Mode
button>
div>
template>

Hier binden Sie den Datenthemenselektor an die DarkMode-Referenz. Dies stellt sicher, dass wann DarkMode stimmt, das dunkle Thema wird wirksam. Der Klickereignis-Listener auf der Schaltfläche schaltet zwischen hellem und dunklem Modus um.

Führen Sie den folgenden Befehl in Ihrem Terminal aus, um eine Vorschau der Anwendung anzuzeigen:

npm run dev

Sie sollten einen Bildschirm wie diesen sehen:

Wenn Sie auf die Schaltfläche klicken, sollte die App zwischen hellen und dunklen Themen umschalten:

Erfahren Sie, wie Sie andere Pakete in Ihre Vue-Anwendungen integrieren

CSS-Variablen und die LocalStorage-API machen es einfach, Ihrer Vue-App ein dunkles Thema hinzuzufügen.

Es gibt viele Bibliotheken von Drittanbietern und integrierte Vue-Extras, mit denen Sie Ihre Web-Apps anpassen und zusätzliche Funktionen nutzen können.