Cum să adăugați teme întunecate în aplicațiile Vue cu variabile CSS

Implementarea temelor întunecate în cadrul aplicațiilor web a evoluat de la o opțiune de lux la o necesitate fundamentală. Utilizatorii actuali de dispozitive preferă să alterneze între teme luminoase și teme întunecate, atât din considerente estetice, cât și practice.

Temele întunecate oferă o paletă cromatică mai închisă pentru interfețele utilizator, facilitând o experiență vizuală confortabilă în medii cu lumină scăzută. De asemenea, acestea contribuie la prelungirea duratei de viață a bateriei pe dispozitivele echipate cu ecrane OLED sau AMOLED.

Aceste avantaje, printre altele, justifică oferirea utilizatorilor posibilitatea de a comuta la teme întunecate.

Configurarea aplicației de testare

Pentru a înțelege mai bine procesul de adăugare a temelor întunecate în Vue, vom crea o aplicație Vue simplă ca banc de testare pentru dezvoltare.

Pentru a inițializa o nouă aplicație Vue, utilizați următoarea comandă în terminal:

 npm init vue@latest

Această comandă va instala cea mai recentă versiune a pachetului create-vue, esențial pentru inițializarea noilor aplicații Vue. Vi se va solicita, de asemenea, să alegeți dintre diverse funcționalități, însă, pentru scopul acestui tutorial, nu este necesară selectarea niciuneia.

Înlocuiți conținutul fișierului App.vue, situat în directorul src al aplicației, cu următorul șablon:

 
<template>
    <div>
        <h1 class="header">Bun venit în aplicația mea Vue</h1>
        <p>Aceasta este o aplicație Vue simplă, cu text și stiluri.</p>
        
        <div class="styled-box">
            <p class="styled-text">Text stilizat</p>
        </div>
        <button class="toggle-button">Comută modul întunecat</button>
    </div>
</template>
 

Fragmentul de cod de mai sus descrie structura completă a aplicației folosind HTML standard, fără includerea de blocuri de script sau stil. Clasele definite în șablon vor fi utilizate în scopuri de stilizare. Pe parcursul implementării temei întunecate, structura aplicației se va modifica.

Stilizarea aplicației de testare cu variabile CSS

Variabilele CSS, cunoscute și ca proprietăți personalizate CSS, reprezintă valori dinamice care pot fi definite în fișele de stil. Aceste variabile sunt instrumente ideale pentru tematică, oferind posibilitatea de a defini și gestiona valori precum culori și dimensiuni de font într-un singur loc centralizat.

Vom utiliza variabile CSS și selectoare de pseudo-clasă CSS pentru a implementa atât o temă obișnuită, cât și una în mod întunecat pentru aplicația Vue. Creați un fișier styles.css în directorul src/assets.

Adăugați următoarele stiluri în fișierul styles.css:

 
:root {
    --background-color: #ffffff; 
    --text-color: #333333; 
    --box-background: #007bff; 
    --box-text-color: #ffffff; 
    --toggle-button: #007bff; 
}
  
[data-theme="true"] {
    --background-color: #333333; 
    --text-color: #ffffff; 
    --box-background: #000000; 
    --box-text-color: #ffffff; 
    --toggle-button: #000000; 
}

Aceste declarații includ un selector de pseudo-clasă special (:root) și un selector de atribute ([data-theme=’true’]). Stilurile incluse într-un selector de rădăcină vizează elementul părinte de cel mai înalt nivel, acționând ca stil implicit pentru pagina web.

Selectorul de teme de date vizează elementele HTML al căror atribut este setat la adevărat. În cadrul acestui selector, se pot defini stiluri specifice pentru modul întunecat, care vor suprascrie tema luminoasă implicită.

Aceste declarații definesc variabile CSS folosind prefixul –. Acestea stochează valori de culoare care vor fi ulterior utilizate pentru a stiliza aplicația în teme luminoase și întunecate.

Modificați fișierul src/main.js și importați fișierul styles.css:

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

Adăugați acum mai multe stiluri în styles.css, sub selectorul de teme de date. Unele dintre aceste definiții vor face referire la variabilele de culoare utilizând cuvântul cheie var. Acest lucru facilitează modificarea culorilor utilizate prin simpla modificare a valorii fiecărei variabile, după cum o fac și stilurile inițiale.

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

Puteți utiliza selectorul CSS universal

 * {
  
    transition: background-color 0.3s, color 0.3s;
}

pentru a stabili o proprietate de tranziție pentru toate elementele, generând o animație fluidă la schimbarea modurilor:

Aceste tranziții creează o schimbare lină a culorii de fundal și a textului în timpul comutării modului întunecat, oferind un efect vizual plăcut.

Implementarea logicii modului întunecat

 
<script setup>
import { ref } from 'vue';
// Funcție pentru a obține preferința inițială a modului întunecat din stocarea locală
const getInitialDarkMode = () => {
    const userPreference = localStorage.getItem('darkMode');
    return userPreference === 'true' ? true : false;
};
// Definim referința pentru darkMode și o inițializăm cu preferința utilizatorului
// sau cu false
const darkMode = ref(getInitialDarkMode());
// Funcție pentru a salva preferința modului întunecat în stocarea locală
const saveDarkModePreference = (isDarkMode) => {
    localStorage.setItem('darkMode', isDarkMode);
};
// Funcție pentru a comuta modul întunecat și a actualiza preferința din stocarea locală
const toggleDarkMode = () => {
    darkMode.value = !darkMode.value;
    saveDarkModePreference(darkMode.value);
};
</script>
 

Pentru a implementa modul de temă întunecată, aveți nevoie de logică JavaScript pentru a comuta între temele luminoase și cele întunecate. În fișierul App.vue, inserați următorul bloc de script sub blocul șablon, folosind API-ul Composition Vue:

Scriptul de mai sus conține toată logica JavaScript necesară pentru a permite comutarea între modurile de lumină și întuneric în cadrul aplicației web. Începe cu o instrucțiune import pentru a utiliza funcția ref, care permite gestionarea datelor reactive (date dinamice) în Vue.

Urmează definirea funcției getInitialDarkMode, care preia preferința utilizatorului referitoare la modul întunecat din LocalStorage-ul browserului. Se declară apoi ref-ul darkMode, inițializat cu preferința utilizatorului obținută prin funcția getInitialDarkMode.

Funcția saveDarkModePreference actualizează preferința pentru modul întunecat în LocalStorage-ul browserului, folosind metoda setItem. În cele din urmă, funcția toggleDarkMode va permite utilizatorilor să activeze/dezactiveze modul întunecat și va actualiza valoarea corespunzătoare din LocalStorage.

Aplicarea temei modului întunecat și testarea aplicației

 
<template>
  
        <!-- Adăugăm atributul data-theme, aplicând tema în funcție de darkMode -->
    <div :data-theme="darkMode"> 
        <h1 class="header">Bun venit în aplicația mea Vue</h1>
        <p>Aceasta este o aplicație Vue simplă, cu text și stiluri.</p>
        
        <div class="styled-box">
            <p class="styled-text">Text stilizat</p>
        </div>
        
        <button @click="toggleDarkMode" class="toggle-button">
            Comută modul întunecat
        </button> 
    </div>
</template>
 

În blocul șablon al fișierului App.vue, adăugați selectorul de atribut data-theme la elementul rădăcină, pentru a aplica condiționat tema modului întunecat, pe baza logicii implementate anterior:

Aici, atributul data-theme este legat de ref-ul darkMode. Acest lucru garantează că atunci când darkMode este adevărat, tema întunecată se va activa. Listener-ul de eveniment clic asociat butonului permite comutarea între modurile de lumină și întuneric.

 npm run dev

Executați următoarea comandă în terminal pentru a previzualiza aplicația:

Ar trebui să vedeți o interfață similară cu cea de mai sus:

Atunci când dați clic pe buton, aplicația ar trebui să comute între tema luminoasă și cea întunecată:

Aprofundați integrarea altor pachete în aplicațiile dumneavoastră Vue

Utilizarea variabilelor CSS și a API-ului LocalStorage simplifică adăugarea unei teme întunecate în aplicațiile Vue.