FastComments.com

Samodejno zaznavanje Internal Link

Privzeto bo FastComments samodejno zaznal, ali ima vaša stran temno ozadje, na podlagi "razdalje od črne" v barvnem krogu.

Naši izdelki se trudijo po najboljših močeh, vendar je v barvnem krogu skoraj neskončno barv in lahko pride do scenarijev, kjer aplikacija izbere temni način, ko to ni primerno, in obratno. Ta dokumentacija pokriva, kako imeti natančnejši nadzor nad tem.

Tehnične podrobnosti

Temni način zaznamo s prehodom skozi elemente na strani navzgor od pripomočka za komentarje, pri čemer iščemo temno ozadje, ko se pripomoček prvotno naloži.

Za preklop temnega načina po tem koraku morate poklicati pripomoček, da posodobite njegovo konfiguracijo. To je obravnavano v razdelku Ročna konfiguracija.

Podpora temnega načina za temo WordPress Networker Internal Link

Za temo WordPress Networker moramo dodati prilagojeno kodo v našo WordPress namestitev za samodejno zaznavanje temnega načina in posodabljanje pripomočka za komentarje.

Kodo je treba vstaviti v nogo vaše strani. Obstaja kar nekaj vtičnikov, ki to lahko naredijo, zato jih tukaj ne bomo naštevali. Tukaj pa je koda za dodajanje:

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