FastComments.com

Automatsko otkrivanje Internal Link

Podrazumevano, FastComments će automatski otkriti da li vaš sajt ima tamnu pozadinu na osnovu "udaljenosti od crne" u krugu boja.

Naši proizvodi daju sve od sebe u tome, međutim postoji skoro beskonačno boja u krugu boja i mogu postojati scenariji u kojima aplikacija bira da koristi tamni režim kada to nije prikladno, i obrnuto. Ova dokumentacija pokriva kako imati precizniju kontrolu nad tim.

Tehničke detalje

Otkrivamo tamni režim tako što prolazimo kroz elemente na stranici naviše od vidžeta za komentare, tražeći tamnu pozadinu kada se vidžet inicijalno učita.

Da biste prebacili tamni režim nakon ovog koraka, morate pozvati vidžet da ažurira svoju konfiguraciju. Ovo je pokriveno u odeljku Ručna konfiguracija.

Podrška za tamni režim WordPress Networker teme Internal Link

Za WordPress Networker temu moramo dodati prilagođeni kod u našu WordPress instalaciju za automatsko otkrivanje tamnog režima i ažuriranje vidžeta za komentare.

Kod mora biti ubačen u podnožje vaše stranice. Postoji dosta dodataka koji to mogu uraditi, tako da ih nećemo ovde nabrajati. Međutim, evo koda za dodavanje:

Networker Theme Dark Mode Support Script
Copy 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