כברירת מחדל, FastComments יזהה אוטומטית אם לאתר שלכם יש רקע כהה בהתבסס על "המרחק משחור" במעגל הצבעים.

המוצרים שלנו עושים כמיטב יכולתם בכך, אולם יש כמעט אינסוף צבעים בגלגל הצבעים, ועשויים להיות תרחישים שבהם האפליקציה בוחרת להשתמש במצב כהה כאשר זה לא מתאים, ולהיפך. תיעוד זה מכסה כיצד לקבל שליטה מדויקת יותר על כך.

פרטים טכניים

אנחנו מזהים מצב כהה על ידי מעבר על האלמנטים בדף מעלה מוידג'ט התגובות, מחפשים רקע כהה כאשר הוידג'ט נטען לראשונה.

כדי להחליף מצב כהה לאחר שלב זה, עליכם לקרוא לוידג'ט כדי לעדכן את התצורה שלו. זה מכוסה בסעיף הגדרה ידנית.

עבור ערכת הנושא WordPress Networker, עלינו להוסיף קוד מותאם אישית להתקנת WordPress שלנו כדי לזהות אוטומטית מצב כהה ולעדכן את וידג'ט התגובות.

הקוד חייב להיות מוכנס לתחתית האתר שלכם. יש לא מעט תוספים שיכולים לעשות זאת, כך שלא נפרט אותם כאן. עם זאת, הנה הקוד להוספה:

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