Πώς να προσθέσετε σκοτεινά θέματα σε εφαρμογές Vue με μεταβλητές CSS

Η εφαρμογή σκοτεινών θεμάτων στις διαδικτυακές εφαρμογές μας έχει μετατραπεί από πολυτέλεια σε αναγκαιότητα. Οι χρήστες συσκευών θέλουν τώρα να αλλάξουν από ανοιχτά θέματα σε σκούρα θέματα και αντίστροφα τόσο για αισθητικές προτιμήσεις όσο και για πρακτικούς λόγους.

Τα σκούρα θέματα προσφέρουν μια πιο σκούρα χρωματική παλέτα για τις διεπαφές χρήστη, κάνοντας τη διεπαφή εύκολη στα μάτια σε περιβάλλοντα χαμηλού φωτισμού. Τα σκοτεινά θέματα συμβάλλουν επίσης στη διατήρηση της διάρκειας ζωής της μπαταρίας σε συσκευές με οθόνες OLED ή AMOLED.

Αυτά και άλλα πλεονεκτήματα καθιστούν πιο λογικό να δίνεται στους χρήστες η επιλογή να μεταβούν σε σκοτεινά θέματα.

Ρύθμιση της εφαρμογής δοκιμής

Για να κατανοήσετε καλύτερα πώς μπορείτε να προσθέσετε σκοτεινά θέματα στο Vue, θα χρειαστεί να δημιουργήσετε μια απλή εφαρμογή Vue για να δοκιμάσετε την ανάπτυξή σας.

Για να αρχικοποιήσετε τη νέα εφαρμογή Vue, εκτελέστε την ακόλουθη εντολή από το τερματικό σας:

 npm init vue@latest

Αυτή η εντολή θα εγκαταστήσει την πιο πρόσφατη έκδοση του πακέτου create-vue, το πακέτο για την προετοιμασία νέων εφαρμογών Vue. Θα σας ζητήσει επίσης να επιλέξετε από ένα συγκεκριμένο σύνολο λειτουργιών. Δεν χρειάζεται να επιλέξετε κανένα, καθώς δεν είναι απαραίτητο για το εύρος αυτού του σεμιναρίου.

Προσθέστε το ακόλουθο πρότυπο στο αρχείο App.vue στον κατάλογο src της εφαρμογής σας:

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

Το παραπάνω μπλοκ κώδικα περιγράφει ολόκληρη την εφαρμογή σε κανονικό HTML, χωρίς μπλοκ σεναρίου ή στυλ. Θα χρησιμοποιήσετε τις τάξεις στο παραπάνω πρότυπο για λόγους στυλ. Καθώς υλοποιείτε το σκοτεινό θέμα, η δομή της εφαρμογής θα αλλάξει.

Δημιουργία στυλ της εφαρμογής δοκιμής με μεταβλητές CSS

Οι μεταβλητές CSS ή οι προσαρμοσμένες ιδιότητες CSS είναι δυναμικές τιμές που μπορείτε να ορίσετε στα φύλλα στυλ σας. Οι μεταβλητές CSS παρέχουν εξαιρετικά εργαλεία για τη δημιουργία θεμάτων, επειδή σας επιτρέπουν να ορίζετε και να διαχειρίζεστε τιμές όπως χρώματα και μεγέθη γραμματοσειράς σε ένα μέρος.

Θα χρησιμοποιήσετε μεταβλητές CSS και επιλογείς ψευδο-κλάσης CSS για να προσθέσετε ένα θέμα κανονικής και σκοτεινής λειτουργίας για την εφαρμογή σας Vue. Στον κατάλογο src/assets, δημιουργήστε ένα αρχείο styles.css.

Προσθέστε τα ακόλουθα στυλ σε αυτό το αρχείο 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; 
}

Αυτές οι δηλώσεις περιέχουν έναν ειδικό επιλογέα ψευδο-κλάσης (:root) και έναν επιλογέα χαρακτηριστικών ([data-theme=’true’]). Τα στυλ που συμπεριλαμβάνετε σε έναν επιλογέα ρίζας στοχεύουν στο υψηλότερο γονικό στοιχείο. Λειτουργεί ως το προεπιλεγμένο στυλ για την ιστοσελίδα.

Ο επιλογέας θέματος δεδομένων στοχεύει στοιχεία HTML με αυτό το χαρακτηριστικό ορισμένο σε true. Σε αυτόν τον επιλογέα χαρακτηριστικών, μπορείτε στη συνέχεια να ορίσετε στυλ για το θέμα της σκοτεινής λειτουργίας, για να παρακάμψετε το προεπιλεγμένο φωτεινό θέμα.

Και οι δύο αυτές δηλώσεις ορίζουν μεταβλητές CSS χρησιμοποιώντας το πρόθεμα —. Αποθηκεύουν τιμές χρώματος τις οποίες μπορείτε στη συνέχεια να χρησιμοποιήσετε για το στυλ της εφαρμογής για ανοιχτά και σκούρα θέματα.

Επεξεργαστείτε το αρχείο src/main.js και εισαγάγετε το αρχείο styles.css:

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

Τώρα προσθέστε μερικά ακόμη στυλ στο styles.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

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

για να δημιουργήσετε μια ομαλή κίνηση κατά την εναλλαγή των λειτουργιών:

Αυτές οι μεταβάσεις δημιουργούν μια σταδιακή αλλαγή στο χρώμα του φόντου και στο χρώμα του κειμένου όταν εναλλάσσεται η σκοτεινή λειτουργία, δίνοντας ένα ευχάριστο αποτέλεσμα.

Εφαρμογή της Λογικής Dark Mode

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

Για να εφαρμόσετε τη λειτουργία σκούρου θέματος, θα χρειαστείτε λογική JavaScript για εναλλαγή μεταξύ φωτεινών και σκούρων θεμάτων. Στο αρχείο App.vue, επικολλήστε το ακόλουθο μπλοκ σεναρίου κάτω από το μπλοκ προτύπου που είναι γραμμένο στο API σύνθεσης του Vue:

Το παραπάνω σενάριο περιλαμβάνει όλη τη λογική JavaScript για εναλλαγή μεταξύ φωτεινής και σκοτεινής λειτουργίας στην εφαρμογή ιστού σας. Το σενάριο ξεκινά με μια δήλωση εισαγωγής για την εισαγωγή της συνάρτησης ref για το χειρισμό αντιδραστικών δεδομένων (δυναμικά δεδομένα) στο Vue.

Στη συνέχεια, ορίζει μια συνάρτηση getInitialDarkMode η οποία ανακτά την προτίμηση σκοτεινής λειτουργίας του χρήστη από το LocalStorage του προγράμματος περιήγησης. Δηλώνει το ref darkMode, αρχικοποιώντας το με την προτίμηση του χρήστη που ανακτάται από τη συνάρτηση getInitialDarkMode.

Η συνάρτηση saveDarkModePreference ενημερώνει την προτίμηση του χρήστη στη σκοτεινή λειτουργία στο LocalStorage του προγράμματος περιήγησης με τη μέθοδο setItem. Τέλος, η λειτουργία toggleDarkMode θα επιτρέψει στους χρήστες να αλλάξουν τη σκοτεινή λειτουργία και να ενημερώσουν την τιμή LocalStorage του προγράμματος περιήγησης για τη σκοτεινή λειτουργία.

Εφαρμογή του θέματος Dark Mode και δοκιμή της εφαρμογής

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

Τώρα, στο μπλοκ προτύπου του αρχείου App.vue, προσθέστε τον επιλογέα χαρακτηριστικού θέματος δεδομένων στο ριζικό στοιχείο για να εφαρμόσετε υπό όρους το θέμα της σκοτεινής λειτουργίας με βάση τη λογική σας:

Εδώ, δεσμεύετε τον επιλογέα θέματος δεδομένων με την αναφορά darkMode. Αυτό διασφαλίζει ότι όταν το darkMode είναι αληθές, το σκοτεινό θέμα θα τεθεί σε ισχύ. Το πρόγραμμα ακρόασης συμβάντων κλικ στο κουμπί εναλλάσσεται μεταξύ φωτεινής και σκοτεινής λειτουργίας.

 npm run dev

Εκτελέστε την ακόλουθη εντολή στο τερματικό σας για να κάνετε προεπισκόπηση της εφαρμογής:

Θα πρέπει να δείτε μια οθόνη όπως αυτή:

Όταν κάνετε κλικ στο κουμπί, η εφαρμογή θα πρέπει να εναλλάσσεται μεταξύ φωτεινών και σκούρων θεμάτων:

Μάθετε να ενσωματώνετε άλλα πακέτα στις εφαρμογές σας Vue

Οι μεταβλητές CSS και το LocalStorage API διευκολύνουν την προσθήκη ενός σκούρου θέματος στην εφαρμογή Vue.