Leer meer over CSS-variabelen en de LocalStorage API met dit praktische Vue-project.

Het implementeren van donkere thema’s in onze webapplicaties is van luxe naar noodzaak gegaan. Apparaatgebruikers willen nu overschakelen van lichte thema's naar donkere thema's en vice versa vanwege zowel esthetische voorkeuren als praktische redenen.

Donkere thema's bieden een donkerder kleurenpalet voor gebruikersinterfaces, waardoor de interface prettiger is voor de ogen in omgevingen met weinig licht. Donkere thema's helpen ook de levensduur van de batterij te verlengen op apparaten met OLED- of AMOLED-schermen.

Deze voordelen en meer maken het redelijker om gebruikers de keuze te geven om over te schakelen naar donkere thema's.

Het opzetten van de testapplicatie

Om een ​​beter begrip te krijgen van hoe u donkere thema's in Vue kunt toevoegen, moet u een eenvoudige Vue-app maken om uw ontwikkeling te testen.

Om de nieuwe Vue-app te initialiseren, voert u de volgende opdracht uit vanaf uw terminal:

npm init vue@latest
instagram viewer

Met deze opdracht wordt de nieuwste versie van het creëer-vue pakket, het pakket voor het initialiseren van nieuwe Vue-apps. Er wordt u ook gevraagd om uit een bepaalde reeks functies te kiezen. U hoeft er geen te selecteren, omdat dit niet nodig is voor de reikwijdte van deze zelfstudie.

Voeg de volgende sjabloon toe aan het App.vue bestand in uw aanvraag src map:


<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>

Het bovenstaande codeblok beschrijft de hele applicatie in gewone HTML, zonder script- of stijlblokken. U gebruikt de klassen in de bovenstaande sjabloon voor stijldoeleinden. Naarmate u het donkere thema implementeert, verandert de structuur van de app.

De testtoepassing opmaken met CSS-variabelen

CSS-variabelen of aangepaste CSS-eigenschappen, zijn dynamische waarden die u in uw stijlbladen kunt definiëren. CSS-variabelen bieden uitstekende hulpmiddelen voor thema's, omdat u hiermee waarden zoals kleuren en lettergroottes op één plek kunt definiëren en beheren.

U gebruikt CSS-variabelen en CSS-pseudoklasse-selectors om een ​​normaal en een donkermodusthema toe te voegen aan uw Vue-toepassing. In de src/activa map, maak een stijlen.css bestand.

Voeg de volgende stijlen toe aan dit stijlen.css-bestand:

/* 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 */
}

Deze declaraties bevatten een speciale pseudo-klasse selector (:wortel) en een attribuutselector ([data-thema='waar']). De stijlen die u in een hoofdselector opneemt, richten zich op het hoogste bovenliggende element. Het fungeert als de standaardstijl voor de webpagina.

De datathema-selector richt zich op HTML-elementen waarbij dat attribuut is ingesteld op true. In deze attribuutkiezer kunt u vervolgens stijlen definiëren voor het donkere modusthema, om het standaard lichte thema te overschrijven.

Deze declaraties definiëren beide CSS-variabelen met behulp van de -- voorvoegsel. Ze slaan kleurwaarden op die u vervolgens kunt gebruiken om de applicatie op te maken voor lichte en donkere thema's.

Bewerk de src/main.js bestand en importeer het bestand stijlen.css:

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

Voeg nu nog wat meer stijlen toe stijlen.css, onder de data-thema keuzeschakelaar. Sommige van deze definities verwijzen naar de kleurvariabelen met behulp van de var trefwoord. Hiermee kunt u de gebruikte kleuren eenvoudig wijzigen door de waarde van elke variabele te wijzigen, zoals bij de initiële stijlen.

* {
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;
}

U kunt voor alle elementen een overgangseigenschap instellen met behulp van de universele CSS-selector (*) om een ​​vloeiende animatie te creëren bij het wisselen van modus:

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

Deze overgangen zorgen voor een geleidelijke verandering in de achtergrondkleur en tekstkleur wanneer de donkere modus wordt ingeschakeld, wat een aangenaam effect oplevert.

Implementatie van de donkere moduslogica

Om de donkere themamodus te implementeren, heb je JavaScript-logica nodig om te schakelen tussen lichte en donkere thema's. In uw App.vue bestand, plak het volgende scriptblok onder het daarin geschreven sjabloonblok Vue's compositie-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>

Het bovenstaande script bevat alle JavaScript-logica voor het schakelen tussen de lichte en donkere modus in uw web-app. Het script begint met een importeren statement om de ref-functie te importeren voor het verwerken van reactieve gegevens (dynamische gegevens) in Vue.

Vervolgens definieert het a getInitialDarkMode functie die de voorkeur voor de donkere modus van de gebruiker ophaalt die van de browser Lokale opslag. Het verklaart de donkere modus ref, waarbij het wordt geïnitialiseerd met de voorkeur van de gebruiker, opgehaald door de functie getInitialDarkMode.

De saveDarkModePreference -functie werkt de voorkeur voor de donkere modus van de gebruiker bij in de LocalStorage van de browser met de setItem methode. eindelijk, de schakel Donkere modus in Met deze functie kunnen gebruikers de donkere modus omschakelen en de LocalStorage-waarde van de browser voor de donkere modus bijwerken.

Het thema van de donkere modus toepassen en de applicatie testen

Nu, in het sjabloonblok van uw App.vue bestand, voeg de data-thema attribuutselector toe aan het hoofdelement om het donkere modusthema voorwaardelijk toe te passen op basis van uw logica:


<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 bindt u de datathema-selector aan de darkMode-referentie. Dit zorgt ervoor dat wanneer donkere modus Als het waar is, zal het donkere thema van kracht worden. De klikgebeurtenislistener op de knop schakelt tussen de lichte en donkere modi.

Voer de volgende opdracht uit in uw terminal om een ​​voorbeeld van de toepassing te bekijken:

npm run dev

Je zou een scherm als dit moeten zien:

Wanneer u op de knop klikt, moet de app schakelen tussen lichte en donkere thema's:

Leer hoe u andere pakketten kunt integreren in uw Vue-applicaties

CSS-variabelen en de LocalStorage API maken het eenvoudig om een ​​donker thema aan uw Vue-app toe te voegen.

Er zijn veel bibliotheken van derden en ingebouwde Vue-extra's waarmee u uw webapps kunt aanpassen en extra functies kunt gebruiken.