Από προεπιλογή, το FastComments θα ανιχνεύει αυτόματα αν ο ιστότοπός σας έχει σκοτεινό φόντο βάσει της "απόστασης από το μαύρο" στον κύκλο χρωμάτων.

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

Τεχνικές λεπτομέρειες

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

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

Για το θέμα WordPress Networker, πρέπει να προσθέσουμε προσαρμοσμένο κώδικα στην εγκατάσταση WordPress για να ανιχνεύσουμε αυτόματα τη σκοτεινή λειτουργία και να ενημερώσουμε το widget σχολίων.

Ο κώδικας πρέπει να εισαχθεί στο υποσέλιδο του ιστότοπού σας. Υπάρχουν αρκετά plugins που μπορούν να το κάνουν αυτό, οπότε δεν θα τα αναφέρουμε εδώ. Ωστόσο, εδώ είναι ο κώδικας για προσθήκη:

Networker Theme Dark Mode Support Script

Copy

1

2(function () {

3 let isDarkMode = false;

4

5 function setIsDarkMode(newValue) {

6 isDarkMode = newValue;

7 for (const instance of window.fcUIInstances) {

8 if (instance.targetElement) {

9 const config = instance.config;

10 config.hasDarkBackground = isDarkMode;

11 instance.instance.update(config)

12 }

13 }

14 }

15

16 function getDarkModeSetting() {

17 return document.body.attributes['data-scheme'].value === 'dark';

18 }

19 let initialValue = getDarkModeSetting();

20 if (isDarkMode !== initialValue) {

21 setIsDarkMode(initialValue);

22 }

23 const observer = new MutationObserver(function (mutations) {

24 mutations.forEach(function (mutation) {

25 if (mutation.type === "attributes") {

26 const newValue = getDarkModeSetting();

27 if (isDarkMode !== newValue) {

28 setIsDarkMode(newValue);

29 }

30 return false;

31 }

32 });

33 });

34

35 observer.observe(document.body, {

36 attributes: true

37 });

38})();

39