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

Το React context είναι ένας εύκολος τρόπος κοινής χρήσης δεδομένων παγκοσμίως, αλλά μπορεί να κάνει την επαναχρησιμοποίηση στοιχείων πιο δύσκολη. Εναλλακτικά, μπορείτε να δημιουργήσετε ένα στοιχείο κουμπιού σκοτεινής λειτουργίας που χρησιμοποιεί τα άγκιστρα useEffect και useState αντί για περιβάλλον. Θα αλλάξει ένα χαρακτηριστικό δεδομένων στο στοιχείο σώματος που μπορούν να στοχεύσουν τα στυλ CSS.

Τι θα χρειαστείτε

Για να ακολουθήσετε αυτό το σεμινάριο, θα χρειαστείτε τα εξής:

  • Μια πρόσφατη έκδοση του Node είναι εγκατεστημένη στον υπολογιστή σας.
  • Μια βασική κατανόηση του React και React hooks.
  • Ένα αρχικό έργο React. Μόλις δημιουργήστε μια εφαρμογή React και είστε έτοιμοι να πάτε.

Δημιουργήστε ένα στοιχείο κουμπιού

Το στοιχείο του κουμπιού θα είναι υπεύθυνο για την εναλλαγή του θέματος από σκούρο σε ανοιχτό. Σε μια πραγματική εφαρμογή, αυτό το κουμπί μπορεί να είναι μέρος του στοιχείου Navbar.

instagram viewer

Στον φάκελο src, δημιουργήστε ένα νέο αρχείο που ονομάζεται Button.js και προσθέστε τον ακόλουθο κώδικα.

εισαγωγή { useState } από 'αντιδρώ'
εξαγωγήΠροκαθορισμένολειτουργίαΚουμπί() {
 const [θέμα, settheme] = useState("σκοτάδι")
συνθ handleToggle = () => {
 const newTheme = θέμα "φως"? "σκοτάδι": "φως"
 settheme (νέο Θέμα)
 }
ΕΠΙΣΤΡΟΦΗ (
<>
<κουμπί className="themeBtn" onClick={handleToggle}>
 {θέμα "φως"? <σπιθαμή>σκοτάδι</span>: <σπιθαμή>φως</span>}
</button>
</>
 )
}

Αρχικά, εισαγάγετε το άγκιστρο useState() από το React. Θα το χρησιμοποιήσετε για να παρακολουθείτε το τρέχον θέμα.

Στο στοιχείο Κουμπί, αρχικοποιήστε την κατάσταση σε σκούρο. Η συνάρτηση handleToggle() θα φροντίσει για τη λειτουργία εναλλαγής. Εκτελείται κάθε φορά που κάνετε κλικ στο κουμπί.

Αυτό το στοιχείο αλλάζει επίσης το κείμενο του κουμπιού όταν αλλάζει το θέμα.

Για να εμφανίσετε το στοιχείο Κουμπί, εισάγετέ το στο App.js.

εισαγωγή Κουμπί από './Κουμπί';
λειτουργίαApp() {
ΕΠΙΣΤΡΟΦΗ (
<div>
<Κουμπί/>
</div>
 );
}
εξαγωγήΠροκαθορισμένο Εφαρμογή?

Δημιουργήστε τα στυλ CSS

Αυτήν τη στιγμή, κάνοντας κλικ στο κουμπί δεν αλλάζει η διεπαφή χρήστη της εφαρμογής React. Για αυτό, θα χρειαστεί πρώτα να δημιουργήσετε τα στυλ CSS για σκοτεινή και φωτεινή λειτουργία.

Στο App.css, προσθέστε τα ακόλουθα.

σώμα {
 --color-text-primary: #131616;
 --χρώμα-κείμενο-δευτερεύον: #ff6b00;
 --color-bg-primary: #E6EDEE;
 --color-bg-secondary: #7d86881c;
 Ιστορικό: var(--color-bg-primary);
 χρώμα: var(--χρώμα-κείμενο-κύριο);
μετάβαση: Ιστορικό 0.25 δευτευκολία εισόδου;
}
σώμα[data-theme="φως"] {
 --color-text-primary: #131616;
 --color-bg-primary: #E6EDEE;
}
σώμα[data-theme="σκοτάδι"] {
 --color-text-primary: #F2F5F7;
 --color-bg-primary: #0E141B;
}

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

Μπορείτε επίσης να τροποποιήσετε τα στυλ των στοιχείων του κουμπιού ώστε να αλλάζουν ανάλογα με το θέμα.

.themeBtn {
 padding: 10px;
 χρώμα: var(--χρώμα-κείμενο-κύριο);
 φόντο: διαφανές;
 σύνορο: 1px στερεό var(--χρώμα-κείμενο-κύριο);
 δρομέας: δείκτης;
}

Τροποποίηση στοιχείου κουμπιού για εναλλαγή στυλ

Για να αλλάξετε τα στυλ που ορίζονται στο αρχείο CSS, θα χρειαστεί να ορίσετε τα δεδομένα στο στοιχείο σώματος στη συνάρτηση handleToggle().

Στο Button.js, τροποποιήστε το handleToggle() ως εξής:

συνθ handleToggle = () => {
 const newTheme = θέμα "φως"? "σκοτάδι": "φως"
 settheme (νέο Θέμα)
έγγραφο.body.dataset.theme = θέμα
}

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

Διαρκής προτίμηση χρήστη στον τοπικό χώρο αποθήκευσης

Θα πρέπει να ανακτήσετε την προτίμηση χρήστη μόλις αποδοθεί το στοιχείο Κουμπί. Το άγκιστρο useEffect() είναι τέλειο για αυτό καθώς εκτελείται μετά από κάθε απόδοση.

Πριν ανακτήσετε το θέμα από τον τοπικό χώρο αποθήκευσης, πρέπει πρώτα να το αποθηκεύσετε.

Δημιουργήστε μια νέα συνάρτηση που ονομάζεται storeUserPreference() στο Button.js.

συνθ storeUserSetPreference = (pref) => {
 localStorage.setItem("θέμα", pref);
};

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

Θα καλείτε αυτήν τη λειτουργία κάθε φορά που ο χρήστης αλλάζει το θέμα. Επομένως, τροποποιήστε τη συνάρτηση handleToggle() ώστε να μοιάζει με αυτό:

συνθ handleToggle = () => {
 const newTheme = θέμα "φως"? "σκοτάδι": "φως"
 settheme (νέο Θέμα)
 storeUserSetPreference (νέο Θέμα)
έγγραφο.body.dataset.theme = θέμα
}

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

συνθ getUserSetPreference = () => {
 επιστροφή localStorage.getItem("θέμα");
};

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

useEffect(() => {
συνθ userSetPreference = getUserSetPreference();
if (userSetPreference) {
 settheme (userSetPreference)
 }
έγγραφο.body.dataset.theme = θέμα
}, [θέμα])

Λήψη προτιμήσεων χρήστη από τις ρυθμίσεις προγράμματος περιήγησης

Για ακόμα καλύτερη εμπειρία χρήστη, μπορείτε να χρησιμοποιήσετε το προτιμά-χρωματικό σχέδιο Δυνατότητα πολυμέσων CSS για να ορίσετε το θέμα. Αυτό θα πρέπει να αντικατοπτρίζει τις ρυθμίσεις συστήματος ενός χρήστη που μπορεί να ελέγξει μέσω του λειτουργικού συστήματος ή του προγράμματος περιήγησής του. Η ρύθμιση μπορεί να είναι είτε ανοιχτή είτε σκοτεινή. Στην αίτησή σας, θα πρέπει να ελέγξετε αυτήν τη ρύθμιση αμέσως μετά τη φόρτωση του στοιχείου του κουμπιού. Αυτό σημαίνει υλοποίηση αυτής της λειτουργικότητας στο άγκιστρο useEffect().

Αρχικά, δημιουργήστε μια συνάρτηση που ανακτά τις προτιμήσεις του χρήστη.

Στο Button.js, προσθέστε τα ακόλουθα.

συνθ getMediaQueryPreference = () => {
 const mediaQuery = "(προτιμά-σχέδιο χρωμάτων: σκούρο)";
συνθ mql = παράθυρο.matchMedia (mediaQuery);
συνθ έχει Προτίμηση = τύπου mql.ταιριάζει "boolean"?
εάν (έχει Προτίμηση) {
 επιστροφή mql.match; "σκοτάδι": "φως";
 }
};

Στη συνέχεια, τροποποιήστε το άγκιστρο useEffect() για να ανακτήσετε την προτίμηση ερωτήματος μέσων και να το χρησιμοποιήσετε εάν δεν έχει οριστεί θέμα στον τοπικό χώρο αποθήκευσης.

useEffect(() => {
συνθ userSetPreference = getUserSetPreference();
συνθ mediaQueryPreference = getMediaQueryPreference();
if (userSetPreference) {
 settheme (userSetPreference)
 } αλλού {
 settheme (mediaQueryPreference)
 }
έγγραφο.body.dataset.theme = θέμα
}, [θέμα])

Εάν κάνετε επανεκκίνηση της εφαρμογής σας, το θέμα θα πρέπει να ταιριάζει με τις ρυθμίσεις του συστήματός σας.

Χρήση του React Context για εναλλαγή της σκοτεινής λειτουργίας

Μπορείτε να χρησιμοποιήσετε χαρακτηριστικά δεδομένων, CSS και αγκίστρια React για να αλλάξετε το θέμα μιας εφαρμογής React.

Μια άλλη προσέγγιση για τον χειρισμό της σκοτεινής λειτουργίας στο React είναι η χρήση του API περιβάλλοντος. Το React context σάς επιτρέπει να μοιράζεστε δεδομένα μεταξύ των στοιχείων χωρίς να χρειάζεται να τα μεταβιβάζετε μέσω των στηρίξεων. Όταν το χρησιμοποιείτε για εναλλαγή θεμάτων, δημιουργείτε ένα πλαίσιο θέματος στο οποίο μπορείτε να έχετε πρόσβαση σε όλη την εφαρμογή. Στη συνέχεια, μπορείτε να χρησιμοποιήσετε την τιμή θέματος για να εφαρμόσετε στυλ που ταιριάζουν.

Ενώ αυτή η προσέγγιση λειτουργεί, η χρήση χαρακτηριστικών δεδομένων CSS είναι απλούστερη.