自動偵測 
預設情況下，FastComments 會根據顏色圈中的「與黑色的距離」自動檢測您的網站是否具有深色背景。
我們的產品會盡最大努力做到這一點，但是顏色輪中有幾乎無限的顏色，可能存在應用程式在不適當時選擇使用深色模式的情況，反之亦然。本文檔介紹如何對此進行更精細的控制。
技術細節
我們通過從評論小工具向上遍歷頁面中的元素來檢測深色模式，在小工具初始載入時查找深色背景。
要在此步驟後切換深色模式，您必須呼叫小工具以更新其配置。這在手動配置部分中有介紹。
手動設定
開發者 - 強制關閉深色模式
可以通過在小工具配置中將 hasDarkBackground 傳遞為 false 來強制關閉深色模式。這適用於 VanillaJS、Angular、React、Vue 和 React Native 函式庫。
每個函式庫在 GitHub 上都有一個 examples 資料夾，其中包含如何使用深色模式的範例。
強制開啟深色模式
我們可以通過將 hasDarkBackground 設定為 true 來強制深色模式始終開啟。
我們也可以通過這裡的小工具自訂介面來完成此操作。
在 Base Theme 下，只需選擇 Force Dark Mode。
VanillaJS 小工具 - 更新深色模式
更新深色模式最簡單的方法是遍歷頁面上小工具的所有實例並更新其配置：
VanillaJS - Dark Mode Toggle
Copy 
1
2 let isDarkMode = somehowDetermineIfDarkModeEnabled();
3 for (const instanceWrapped of window.fcUIInstances) {
4 if (instanceWrapped.targetElement) {
5 const config = instanceWrapped.config;
6 config.hasDarkBackground = isDarkMode;
7 instanceWrapped.instance.update(config)
8 }
9 }
10
WordPress Networker 主題的深色模式支援
對於 WordPress Networker 主題，我們需要向 WordPress 安裝添加自訂程式碼，以自動檢測深色模式並更新評論小工具。
程式碼必須插入到您網站的頁尾中。有很多外掛可以做到這一點，所以我們不在這裡列出。但是，這裡是要添加的程式碼：
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