Som standard vil FastComments automatisk registrere, om dit websted har en mørk baggrund baseret på "afstanden fra sort" i farvecirklen.

Vores produkter gør deres bedste for dette, men der er næsten uendeligt mange farver i farvehjulet, og der kan være scenarier, hvor applikationen vælger at bruge mørk tilstand, når det ikke er passende, og omvendt. Denne dokumentation dækker, hvordan du får mere finkornet kontrol over dette.

Tekniske detaljer

Vi registrerer mørk tilstand ved at gennemgå elementerne på siden op fra kommentar-widgetten og lede efter en mørk baggrund, når widgetten indlæses første gang.

For at skifte mørk tilstand efter dette trin skal du kalde widgetten for at opdatere dens konfiguration. Dette er dækket i afsnittet Manuel konfiguration.

For WordPress Networker-temaet skal vi tilføje tilpasset kode til vores WordPress-installation for automatisk at registrere mørk tilstand og opdatere kommentar-widgetten.

Koden skal indsættes i footeren på dit websted. Der er mange plugins, der kan gøre dette, så vi vil ikke liste dem her. Her er dog koden, der skal tilføjes:

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