Varsayılan olarak FastComments, renk dairesinde "siyahtan uzaklık" temelinde sitenizin koyu bir arka plana sahip olup olmadığını otomatik olarak algılar.

Ürünlerimiz bunda elinden gelenin en iyisini yapar, ancak renk çarkında neredeyse sonsuz sayıda renk vardır ve uygulamanın uygun olmadığında karanlık modu seçtiği senaryolar olabilir ve bunun tersi de geçerlidir. Bu dokümantasyon, bunun üzerinde daha hassas kontrol sahibi olmayı kapsar.

Teknik detaylar

Widget ilk yüklendiğinde, yorum widget'ından yukarı doğru sayfadaki öğeleri geçerek koyu arka plan arayarak karanlık modu algılarız.

Bu adımdan sonra karanlık modu değiştirmek için, yapılandırmasını güncellemek üzere widget'ı çağırmalısınız. Bu, Manuel Yapılandırma bölümünde ele alınmaktadır.

WordPress Networker teması için, karanlık modu otomatik olarak algılamak ve yorum widget'ını güncellemek üzere WordPress kurulumumuza özel kod eklememiz gerekir.

Kod, sitenizin altbilgisine eklenmelidir. Bunu yapabilecek birçok eklenti vardır, bu yüzden burada listelemeyeceğiz. Ancak, eklenecek kod şudur:

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