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

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

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

Κατανόηση της Dark Mode

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

Ρύθμιση του έργου σας

Πριν να το εφαρμόσετε αυτό, βεβαιωθείτε ότι έχετε δημιουργήσει ένα έργο και έτοιμο να το εργαστείτε. Θα πρέπει να έχετε τα αρχεία HTML, CSS και JavaScript οργανωμένα με δομημένο τρόπο.

Ο κώδικας HTML

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

<body>
<navclass="navbar">
<spanclass="logo">Company Logospan>
<ulclass="nav__lists">
<li>Aboutli>
<li>Blogli>
<li>Contactli>
ul>


<divid="theme__switcher">
<imgid="theme__image"src="./toggle.svg"alt="" />
div>
nav>


<main>
 Lorem ipsum dolor sit amet consectetur adipisicing elit.
 Odit deserunt sit neque in labore quis quisquam expedita minus
 perferendis.
main>
<scriptsrc="./script.js">script>
body>

Ο κώδικας CSS

Προσθέστε το ακόλουθο CSS για το στυλ του παραδείγματος. Αυτό θα λειτουργήσει ως η προεπιλεγμένη λειτουργία φωτισμού την οποία αργότερα θα επαυξήσετε με νέα στυλ για μια προβολή σκοτεινής λειτουργίας.

@import url("https://fonts.googleapis.com/css2?family=Quicksand: wght@400;700&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}


html { font-size: 62.5%; }


body { font-family: "Quicksand", sans-serif; }


.navbar {
display: flex;
padding: 2rem;
font-size: 1.6rem;
align-items: center;
color: rgb(176, 58, 46);
background-color: #fdedec;
}


.navbarspan { margin-right: auto; }


.logo { font-weight: 700; }


.nav__lists {
display: flex;
list-style: none;
column-gap: 2rem;
margin: 0 2rem;
}


#theme__switcher { cursor: pointer; }


main {
width: 300px;
margin: 5remauto;
font-size: 2rem;
line-height: 2;
padding: 1rem 2rem;
border-radius: 10px;
box-shadow: 2px 3.5px 5pxrgba(242, 215, 213, 0.4);
}

Προς το παρόν, η διεπαφή σας θα πρέπει να μοιάζει με αυτό:

Εφαρμογή Dark Mode με χρήση CSS και JavaScript

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

Δημιουργία θεματικών τάξεων

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

.dark {
background: #1f1f1f;
color: #fff;
}
.light {
background: #fff;
color: #333;
}

Επιλέγοντας τα διαδραστικά στοιχεία

Προσθέστε το ακόλουθο JavaScript στο δικό σας script.js αρχείο. Το πρώτο κομμάτι κώδικα απλώς επιλέγει τα στοιχεία που θα χρησιμοποιήσετε για να χειριστείτε την εναλλαγή.

// Get a reference to the theme switcher element and the document body
const themeToggle = document.getElementById("theme__switcher");
const bodyEl = document.body;

Προσθήκη της Λειτουργίας Εναλλαγής

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

// Function to set the theme
functionsetTheme(theme) {
// If the theme is "dark," add the "dark" class, remove "light" class,
// and adjust filter style
 bodyEl.classList.toggle("dark", theme "dark");


// If the theme is "light," add the "light" class, remove "dark" class,
 bodyEl.classList.toggle("light", theme !== "dark");


// adjust filter of the toggle switch
 themeToggle.style.filter = theme "dark"? "invert(75%)": "none";
}


// Function to toggle the theme between light and dark


functiontoggleTheme() {
 setTheme(bodyEl.classList.contains("dark")? "light": "dark");
}


themeToggle.addEventListener("click", toggleTheme);

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

Βελτίωση της σκοτεινής λειτουργίας με JavaScript

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

Ανίχνευση προτιμήσεων χρήστη

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

// Function to detect user's preferred theme
functiondetectPreferredTheme() {
// Check if the user prefers a dark color scheme using media queries
const prefersDarkMode = window.matchMedia("(prefers-color-scheme: dark)").matches;
 setTheme(prefersDarkMode);
}


// Run the function to detect the user's preferred theme
detectPreferredTheme();

Τώρα, κάθε χρήστης που επισκέπτεται τον ιστότοπό σας θα δει ένα σχέδιο που ταιριάζει με το τρέχον θέμα της συσκευής του.

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

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

functionsetTheme(theme) {
 bodyEl.classList.toggle("dark", theme "dark");
 bodyEl.classList.toggle("light", theme !== "dark");
 themeToggle.style.filter = theme "dark"? "invert(75%)": "none";


// Setting the theme in local storage
 localStorage.setItem("theme", theme);
}


// Check if the theme is stored in local storage


const storedTheme = localStorage.getItem("theme");


if (storedTheme) {
 setTheme(storedTheme);
}


functiondetectPreferredTheme() {
const prefersDarkMode = window.matchMedia("(prefers-color-scheme: dark)").matches;


// Getting the value from local storage
const storedTheme = localStorage.getItem("theme");
 setTheme(prefersDarkMode && storedTheme !== "light"? "dark": "light");
}

Αγκαλιάζοντας τον Χρηστοκεντρικό Σχεδιασμό

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