Standardmäßig erkennt FastComments automatisch, ob Ihre Website einen dunklen Hintergrund hat, basierend auf der „Entfernung von Schwarz" im Farbkreis.

Unsere Produkte tun ihr Bestes dabei, jedoch gibt es fast unendlich viele Farben im Farbkreis, und es kann Szenarien geben, in denen die Anwendung sich entscheidet, den Dunkelmodus zu verwenden, wenn es nicht angemessen ist, und umgekehrt. Diese Dokumentation behandelt, wie Sie eine feinkörnigere Kontrolle darüber haben können.

Technische Details

Wir erkennen den Dunkelmodus, indem wir die Elemente auf der Seite vom Kommentar-Widget nach oben durchlaufen und nach einem dunklen Hintergrund suchen, wenn das Widget initial geladen wird.

Um den Dunkelmodus nach diesem Schritt umzuschalten, müssen Sie das Widget aufrufen, um seine Konfiguration zu aktualisieren. Dies wird im Abschnitt Manuelle Konfiguration behandelt.

Für das WordPress Networker-Theme müssen wir benutzerdefinierten Code zu unserer WordPress-Installation hinzufügen, um den Dunkelmodus automatisch zu erkennen und das Kommentar-Widget zu aktualisieren.

Der Code muss in den Footer Ihrer Website eingefügt werden. Es gibt einige Plugins, die dies tun können, daher listen wir sie hier nicht auf. Hier ist jedoch der hinzuzufügende Code:

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