Μάθετε για τις μεταβλητές CSS και το LocalStorage API με αυτό το πρακτικό έργο Vue.
Η εφαρμογή σκοτεινών θεμάτων στις διαδικτυακές εφαρμογές μας έχει μετατραπεί από πολυτέλεια σε αναγκαιότητα. Οι χρήστες συσκευών θέλουν τώρα να αλλάξουν από ανοιχτά θέματα σε σκούρα θέματα και αντίστροφα τόσο για αισθητικές προτιμήσεις όσο και για πρακτικούς λόγους.
Τα σκούρα θέματα προσφέρουν μια πιο σκούρα χρωματική παλέτα για τις διεπαφές χρήστη, κάνοντας τη διεπαφή εύκολη στα μάτια σε περιβάλλοντα χαμηλού φωτισμού. Τα σκοτεινά θέματα συμβάλλουν επίσης στη διατήρηση της διάρκειας ζωής της μπαταρίας σε συσκευές με οθόνες OLED ή AMOLED.
Αυτά και άλλα πλεονεκτήματα καθιστούν πιο λογικό να δίνεται στους χρήστες η επιλογή να μεταβούν σε σκοτεινά θέματα.
Ρύθμιση της εφαρμογής δοκιμής
Για να κατανοήσετε καλύτερα πώς μπορείτε να προσθέσετε σκοτεινά θέματα στο Vue, θα χρειαστεί να δημιουργήσετε μια απλή εφαρμογή Vue για να δοκιμάσετε την ανάπτυξή σας.
Για να αρχικοποιήσετε τη νέα εφαρμογή Vue, εκτελέστε την ακόλουθη εντολή από το τερματικό σας:
npm init vue@latest
Αυτή η εντολή θα εγκαταστήσει την πιο πρόσφατη έκδοση του δημιουργία-vue πακέτο, το πακέτο για την προετοιμασία νέων εφαρμογών Vue. Θα σας ζητήσει επίσης να επιλέξετε από ένα συγκεκριμένο σύνολο λειτουργιών. Δεν χρειάζεται να επιλέξετε κανένα, καθώς δεν είναι απαραίτητο για το εύρος αυτού του σεμιναρίου.
Προσθέστε το παρακάτω πρότυπο στο App.vue αρχείο στην αίτησή σας src Ευρετήριο:
<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>
Το παραπάνω μπλοκ κώδικα περιγράφει ολόκληρη την εφαρμογή σε κανονικό HTML, χωρίς μπλοκ σεναρίου ή στυλ. Θα χρησιμοποιήσετε τις τάξεις στο παραπάνω πρότυπο για λόγους στυλ. Καθώς υλοποιείτε το σκοτεινό θέμα, η δομή της εφαρμογής θα αλλάξει.
Δημιουργία στυλ της εφαρμογής δοκιμής με μεταβλητές CSS
Μεταβλητές CSS ή προσαρμοσμένες ιδιότητες CSS, είναι δυναμικές τιμές που μπορείτε να ορίσετε στα φύλλα στυλ σας. Οι μεταβλητές CSS παρέχουν εξαιρετικά εργαλεία για τη δημιουργία θεμάτων, επειδή σας επιτρέπουν να ορίζετε και να διαχειρίζεστε τιμές όπως χρώματα και μεγέθη γραμματοσειρών σε ένα μέρος.
Θα χρησιμοποιήσετε μεταβλητές CSS και επιλογείς ψευδο-κλάσης CSS για να προσθέσετε ένα θέμα κανονικής και σκοτεινής λειτουργίας για την εφαρμογή σας Vue. Στο src/περιουσιακά στοιχεία κατάλογος, δημιουργία α στυλ.css αρχείο.
Προσθέστε τα ακόλουθα στυλ σε αυτό το αρχείο 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 */
}
Αυτές οι δηλώσεις περιέχουν έναν ειδικό επιλογέα ψευδο-κλάσης (:ρίζα) και έναν επιλογέα χαρακτηριστικών ([data-theme='true']). Τα στυλ που συμπεριλαμβάνετε σε έναν επιλογέα ρίζας στοχεύουν στο υψηλότερο γονικό στοιχείο. Λειτουργεί ως το προεπιλεγμένο στυλ για την ιστοσελίδα.
Ο επιλογέας θέματος δεδομένων στοχεύει στοιχεία HTML με αυτό το χαρακτηριστικό ορισμένο σε true. Σε αυτόν τον επιλογέα χαρακτηριστικών, μπορείτε στη συνέχεια να ορίσετε στυλ για το θέμα της σκοτεινής λειτουργίας, για να παρακάμψετε το προεπιλεγμένο φωτεινό θέμα.
Αυτές οι δηλώσεις ορίζουν και οι δύο μεταβλητές CSS χρησιμοποιώντας το -- πρόθεμα. Αποθηκεύουν τιμές χρώματος τις οποίες μπορείτε στη συνέχεια να χρησιμοποιήσετε για το στυλ της εφαρμογής για ανοιχτά και σκούρα θέματα.
Επεξεργαστείτε το src/main.js αρχείο και εισαγωγή του αρχείου styles.css:
// main.js
import'./assets/styles.css'
import { createApp } from'vue'
import App from'./App.vue'
createApp(App).mount('#app')
Τώρα προσθέστε μερικά ακόμη στυλ στυλ.css, κάτω από θέμα δεδομένων εκλέκτορας. Μερικοί από αυτούς τους ορισμούς θα αναφέρονται στις μεταβλητές χρώματος χρησιμοποιώντας το var λέξη-κλειδί. Αυτό σας επιτρέπει να αλλάξετε τα χρώματα που χρησιμοποιούνται απλώς αλλάζοντας την τιμή κάθε μεταβλητής, όπως κάνουν τα αρχικά στυλ.
* {
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;
}
Μπορείτε να ορίσετε μια ιδιότητα μετάβασης σε όλα τα στοιχεία χρησιμοποιώντας τον γενικό επιλογέα CSS (*) για να δημιουργήσετε μια ομαλή κίνηση κατά την εναλλαγή των λειτουργιών:
* {
/* Add more transitions as needed */
transition: background-color 0.3s, color 0.3s;
}
Αυτές οι μεταβάσεις δημιουργούν μια σταδιακή αλλαγή στο χρώμα του φόντου και στο χρώμα του κειμένου όταν εναλλάσσεται η σκοτεινή λειτουργία, δίνοντας ένα ευχάριστο αποτέλεσμα.
Εφαρμογή της Λογικής Dark Mode
Για να εφαρμόσετε τη λειτουργία σκούρου θέματος, θα χρειαστείτε λογική JavaScript για εναλλαγή μεταξύ φωτεινών και σκούρων θεμάτων. Στο δικό σου App.vue αρχείο, επικολλήστε το ακόλουθο μπλοκ σεναρίου κάτω από το μπλοκ προτύπου που είναι γραμμένο Vue's Composition 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>
Το παραπάνω σενάριο περιλαμβάνει όλη τη λογική JavaScript για εναλλαγή μεταξύ φωτεινής και σκοτεινής λειτουργίας στην εφαρμογή ιστού σας. Το σενάριο ξεκινά με ένα εισαγωγή δήλωση για την εισαγωγή της συνάρτησης ref για το χειρισμό αντιδραστικών δεδομένων (δυναμικά δεδομένα) στο Vue.
Στη συνέχεια, ορίζει α getInitialDarkMode λειτουργία που ανακτά την προτίμηση του χρήστη στη σκοτεινή λειτουργία του προγράμματος περιήγησης LocalStorage. Δηλώνει το darkMode ref, αρχικοποιώντας το με την προτίμηση του χρήστη που ανακτήθηκε από τη συνάρτηση getInitialDarkMode.
ο saveDarkModePreference Η λειτουργία ενημερώνει την προτίμηση του χρήστη στη σκοτεινή λειτουργία στο LocalStorage του προγράμματος περιήγησης με το setItem μέθοδος. Τέλος, το εναλλαγή DarkMode Η λειτουργία θα επιτρέψει στους χρήστες να αλλάξουν τη σκοτεινή λειτουργία και να ενημερώσουν την τιμή LocalStorage του προγράμματος περιήγησης για τη σκοτεινή λειτουργία.
Εφαρμογή του θέματος Dark Mode και δοκιμή της εφαρμογής
Τώρα, στο μπλοκ προτύπου σας App.vue αρχείο, προσθέστε τον επιλογέα χαρακτηριστικού θέματος δεδομένων στο ριζικό στοιχείο για να εφαρμόσετε υπό όρους το θέμα της σκοτεινής λειτουργίας με βάση τη λογική σας:
<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>
Εδώ, δεσμεύετε τον επιλογέα θέματος δεδομένων στην αναφορά darkMode. Αυτό διασφαλίζει ότι όταν darkMode είναι αλήθεια, το σκοτεινό θέμα θα τεθεί σε ισχύ. Το πρόγραμμα ακρόασης συμβάντων κλικ στο κουμπί εναλλάσσεται μεταξύ φωτεινής και σκοτεινής λειτουργίας.
Εκτελέστε την ακόλουθη εντολή στο τερματικό σας για να κάνετε προεπισκόπηση της εφαρμογής:
npm run dev
Θα πρέπει να δείτε μια οθόνη όπως αυτή:
Όταν κάνετε κλικ στο κουμπί, η εφαρμογή θα πρέπει να εναλλάσσεται μεταξύ φωτεινών και σκούρων θεμάτων:
Μάθετε να ενσωματώνετε άλλα πακέτα στις εφαρμογές σας Vue
Οι μεταβλητές CSS και το LocalStorage API διευκολύνουν την προσθήκη ενός σκούρου θέματος στην εφαρμογή Vue.
Υπάρχουν πολλές βιβλιοθήκες τρίτων και ενσωματωμένα πρόσθετα Vue που σας επιτρέπουν να προσαρμόσετε τις εφαρμογές ιστού σας και να χρησιμοποιήσετε επιπλέον λειτουργίες.
