FastComments.com

Аутоматско откривање Internal Link

Подразумевано, FastComments ће аутоматски открити да ли ваш сајт има тамну позадину на основу "удаљености од црне" у кругу боја.

Наши производи дају све од себе у томе, међутим постоји скоро бесконачно боја у кругу боја и могу постојати сценарији у којима апликација бира да користи тамни режим када то није прикладно, и обрнуто. Ова документација покрива како имати прецизнију контролу над тим.

Техничке детаље

Откривамо тамни режим тако што пролазимо кроз елементе на страници навише од виџета за коментаре, тражећи тамну позадину када се виџет иницијално учита.

Да бисте пребацили тамни режим након овог корака, морате позвати виџет да ажурира своју конфигурацију. Ово је покривено у одељку Ручна конфигурација.

Подршка за тамни режим теме WordPress Networker Internal Link

За WordPress Networker тему морамо додати прилагођени код у нашу WordPress инсталацију за аутоматско откривање тамног режима и ажурирање виџета за коментаре.

Код мора бити убачен у подножје ваше странице. Постоји доста додатака који то могу урадити, тако да их нећемо овде набрајати. Међутим, ево кода за додавање:

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