Come aggiungere temi scuri nelle app Vue con variabili CSS

L’implementazione dei temi scuri nelle nostre applicazioni web è passata da un lusso a una necessità. Gli utenti dei dispositivi ora desiderano passare dai temi chiari ai temi scuri e viceversa sia per preferenze estetiche che per ragioni pratiche.

I temi scuri offrono una tavolozza di colori più scuri per le interfacce utente, rendendo l’interfaccia piacevole alla vista in ambienti con scarsa illuminazione. I temi scuri aiutano anche a preservare la durata della batteria sui dispositivi con schermi OLED o AMOLED.

Questi vantaggi e altri ancora rendono più ragionevole offrire agli utenti la possibilità di passare ai temi scuri.

Impostazione dell’applicazione di test

Per comprendere meglio come aggiungere temi scuri in Vue, dovrai creare una semplice app Vue per testare il tuo sviluppo.

Per inizializzare la nuova app Vue, esegui il seguente comando dal tuo terminale:

 npm init vue@latest

Questo comando installerà l’ultima versione del pacchetto create-vue, il pacchetto per l’inizializzazione delle nuove app Vue. Ti verrà anche chiesto di scegliere tra un particolare insieme di funzionalità. Non è necessario selezionarne alcuno poiché non è necessario per lo scopo di questo tutorial.

Aggiungi il seguente modello al file App.vue nella directory src della tua applicazione:

 
<template>
  <div>
    <h1 class="header">Welcome to My Vue App</h1>
    <p>This is a simple Vue app with some text and styles.</p>
    
    <div class="styled-box">
      <p class="styled-text">Styled Text</p>
    </div>
    <button class="toggle-button">Toggle Dark Mode</button>
  </div>
</template>
 

Il blocco di codice sopra descrive l’intera applicazione in HTML normale, senza script o blocchi di stile. Utilizzerai le classi nel modello sopra per scopi di styling. Man mano che implementi il ​​tema scuro, la struttura dell’app cambierà.

Applicare stili all’applicazione di test con variabili CSS

Le variabili CSS, o proprietà personalizzate CSS, sono valori dinamici che puoi definire nei tuoi fogli di stile. Le variabili CSS forniscono strumenti eccellenti per la creazione di temi perché consentono di definire e gestire valori come colori e dimensioni dei caratteri in un unico posto.

Utilizzerai le variabili CSS e i selettori di pseudo-classe CSS per aggiungere un tema normale e uno in modalità oscura per la tua applicazione Vue. Nella directory src/assets, crea un file stili.css.

Aggiungi i seguenti stili a questo file 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; 
}

Queste dichiarazioni contengono uno speciale selettore di pseudo-classe (:root) e un selettore di attributi ([data-theme=’true’]). Gli stili che includi in un selettore radice hanno come target l’elemento principale più alto. Funziona come stile predefinito per la pagina web.

Il selettore del tema dati prende di mira gli elementi HTML con tale attributo impostato su true. In questo selettore di attributi, puoi quindi definire gli stili per il tema della modalità oscura, per sovrascrivere il tema chiaro predefinito.

Entrambe queste dichiarazioni definiscono variabili CSS utilizzando il prefisso —. Memorizzano i valori di colore che puoi quindi utilizzare per modellare l’applicazione per temi chiari e scuri.

Modifica il file src/main.js e importa il file Styles.css:

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

Ora aggiungi altri stili in stili.css, sotto il selettore del tema dati. Alcune di queste definizioni faranno riferimento alle variabili di colore utilizzando la parola chiave var. Ciò ti consente di modificare i colori in uso semplicemente cambiando il valore di ciascuna variabile, come fanno gli stili iniziali.

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

Puoi impostare una proprietà di transizione su tutti gli elementi utilizzando il selettore CSS universale

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

per creare un’animazione fluida quando si cambia modalità:

Queste transizioni creano un cambiamento graduale nel colore dello sfondo e nel colore del testo quando viene attivata la modalità oscura, dando un effetto piacevole.

Implementazione della logica della modalità oscura

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

Per implementare la modalità tema scuro, avrai bisogno della logica JavaScript per passare dal tema chiaro a quello scuro. Nel tuo file App.vue, incolla il seguente blocco di script sotto il blocco modello scritto nell’API Composition di Vue:

Lo script sopra include tutta la logica JavaScript per passare dalla modalità chiara a quella scura nella tua app Web. Lo script inizia con un’istruzione import per importare la funzione ref per la gestione dei dati reattivi (dati dinamici) in Vue.

Successivamente, definisce una funzione getInitialDarkMode che recupera la preferenza della modalità oscura dell’utente dal LocalStorage del browser. Dichiara il riferimento darkMode, inizializzandolo con la preferenza dell’utente recuperata dalla funzione getInitialDarkMode.

La funzione saveDarkModePreference aggiorna la preferenza della modalità oscura dell’utente nel LocalStorage del browser con il metodo setItem. Infine, la funzione toggleDarkMode consentirà agli utenti di attivare o disattivare la modalità oscura e aggiornare il valore LocalStorage del browser per la modalità oscura.

Applicazione del tema Modalità oscura e test dell’applicazione

 
<template>
  
       conditionally -->
  <div :data-theme="darkMode"> 
    <h1 class="header">Welcome to My Vue App</h1>
    <p>This is a simple Vue app with some text and styles.</p>
    
    <div class="styled-box">
      <p class="styled-text">Styled Text</p>
    </div>
     
    <button @click="toggleDarkMode" class="toggle-button">
      Toggle Dark Mode
    </button> 
  </div>
</template>
 

Ora, nel blocco modello del tuo file App.vue, aggiungi il selettore dell’attributo data-theme all’elemento root per applicare in modo condizionale il tema della modalità oscura in base alla tua logica:

Qui, stai associando il selettore del tema dati al rif darkMode. Ciò garantisce che quando darkMode è true, il tema scuro avrà effetto. Il listener di eventi clic sul pulsante alterna tra la modalità chiara e quella scura.

 npm run dev

Esegui il seguente comando nel tuo terminale per visualizzare l’anteprima dell’applicazione:

Dovresti vedere una schermata come questa:

Quando fai clic sul pulsante, l’app dovrebbe alternare tra temi chiari e scuri:

Impara a integrare altri pacchetti nelle tue applicazioni Vue

Le variabili CSS e l’API LocalStorage semplificano l’aggiunta di un tema scuro alla tua app Vue.