By default, FastComments will auto-detect if your site has a dark background based on the "distance from black" in the color circle.

Our products try to do their best at this, however there are almost infinite colors in the color wheel, and there may be scenarios where the application chooses to use dark mode when it is not appropriate, and vice-versa. This documentation covers how to have more fine-grained control over this.

Technical Details

We detect dark mode by traversing the elements in the page up from the comment widget, looking for a dark background when the widget initially loads.

To toggle dark mode after this step, you must call the widget to update its configuration. This is covered in the Manual Configuration section.

For the WordPress Networker theme, we have to add custom code to our WordPress installation to auto-detect dark mode and update the comment widget.

The code must be inserted into the footer of your site. There are quite a few plugins which can do this, so we won't list them here. However, here is the code to add:

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