Dark Mode | FastComments Docs

자동 감지

기본적으로 FastComments는 색상 원의 "검정색으로부터의 거리"를 기반으로 사이트의 배경이 어두운지 자동으로 감지합니다.

우리 제품은 이를 최선을 다해 수행하지만, 색상 휠에는 거의 무한한 색상이 있으며 애플리케이션이 적절하지 않을 때 다크 모드를 사용하도록 선택하거나 그 반대의 시나리오가 있을 수 있습니다. 이 문서는 이를 더 세밀하게 제어하는 방법을 다룹니다.

기술적 세부사항

위젯이 처음 로드될 때 댓글 위젯에서 위쪽으로 페이지의 요소를 순회하여 어두운 배경을 찾아 다크 모드를 감지합니다.

이 단계 이후에 다크 모드를 전환하려면 위젯을 호출하여 구성을 업데이트해야 합니다. 이는 수동 구성 섹션에서 다룹니다.

수동 구성

개발자용 - 다크 모드 강제 해제

다크 모드를 강제로 끄려면 위젯 구성에서 hasDarkBackground를 false로 전달하면 됩니다. 이는 VanillaJS, Angular, React, Vue 및 React Native 라이브러리에서 작동합니다.

각 라이브러리에는 GitHub에 다크 모드 사용 방법에 대한 예제가 포함된 examples 폴더가 있습니다.

다크 모드 강제 활성화

hasDarkBackground를 true로 설정하여 다크 모드가 항상 켜져 있도록 강제할 수 있습니다.

여기의 위젯 사용자 지정 UI를 통해서도 이 작업을 수행할 수 있습니다.

Base Theme 아래에서 Force Dark Mode를 선택하면 됩니다.

VanillaJS 위젯 - 다크 모드 업데이트

다크 모드를 업데이트하는 가장 쉬운 방법은 페이지의 모든 위젯 인스턴스를 순회하고 구성을 업데이트하는 것입니다:

VanillaJS - Dark Mode Toggle

Copy

    let isDarkMode = somehowDetermineIfDarkModeEnabled();
    for (const instanceWrapped of window.fcUIInstances) {
        if (instanceWrapped.targetElement) {
            const config = instanceWrapped.config;
            config.hasDarkBackground = isDarkMode;
            instanceWrapped.instance.update(config)
        }
    }

워드프레스 Networker 테마 다크 모드 지원

WordPress Networker 테마의 경우, 다크 모드를 자동 감지하고 댓글 위젯을 업데이트하기 위해 WordPress 설치에 사용자 정의 코드를 추가해야 합니다.

코드는 사이트의 푸터에 삽입해야 합니다. 이를 수행할 수 있는 플러그인이 많으므로 여기에 나열하지 않겠습니다. 그러나 추가할 코드는 다음과 같습니다:

Networker Theme Dark Mode Support Script