Scopri le variabili CSS e l'API LocalStorage con questo pratico progetto Vue.
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 prova
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 di
create-vue package, 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 file nella tua domanda src rubrica:
<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>
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
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. Nel src/risorse directory, creare un file stili.css file.
Aggiungi i seguenti stili a questo file Styles.css:
/* 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 */
}
Queste dichiarazioni contengono uno speciale selettore di pseudo-classe (:radice) e un selettore di attributi ([tema-dati='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 metodo -- prefisso. Memorizzano i valori di colore che puoi quindi utilizzare per modellare l'applicazione per temi chiari e scuri.
Modifica il src/main.js file e importare il file stili.css:
// main.js
import'./assets/styles.css'
import { createApp } from'vue'
import App from'./App.vue'
createApp(App).mount('#app')
Ora aggiungi altri stili stili.css, sotto il tema dei dati selettore. Alcune di queste definizioni faranno riferimento alle variabili di colore utilizzando il file var parola chiave. 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 (*) per creare un'animazione fluida quando si cambia modalità:
* {
/* Add more transitions as needed */
transition: background-color 0.3s, color 0.3s;
}
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
Per implementare la modalità tema scuro, avrai bisogno della logica JavaScript per passare dal tema chiaro a quello scuro. Nel tuo App.vue file, incolla il seguente blocco di script sotto il blocco modello scritto API di composizione di Vue :
<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>
Lo script sopra include tutta la logica JavaScript per passare dalla modalità chiara a quella scura nella tua app Web. La sceneggiatura inizia con un importare istruzione per importare la funzione ref per la gestione dei dati reattivi (dati dinamici) in Vue.
Successivamente, definisce a getInitialDarkMode funzione da cui recupera la preferenza della modalità oscura dell'utente quello del browser Memoria locale. Dichiara il Modalità scura ref, inizializzandolo con la preferenza dell'utente recuperata dalla funzione getInitialDarkMode.
IL salvaDarkModePreference la funzione aggiorna la preferenza della modalità oscura dell'utente nel LocalStorage del browser con setItem metodo. Infine, il attiva/disattiva la modalità oscura la funzione 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
Ora, nel blocco modello del tuo App.vue file, 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:
<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>
Qui, stai associando il selettore del tema dati al rif darkMode. Ciò garantisce che quando Modalità scura è vero, il tema scuro avrà effetto. Il listener di eventi clic sul pulsante alterna tra la modalità chiara e quella scura.
Esegui il seguente comando nel tuo terminale per visualizzare l'anteprima dell'applicazione:
npm run dev
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.
Esistono molte librerie di terze parti ed extra Vue integrati che ti consentono di personalizzare le tue app Web e utilizzare funzionalità extra.
