Comments widget auto dark or light

[ghost]

Hi, I added comments widget from npm package react-telegram-comments, which supports Light / Dark theme, via a attribute

• isDark {boolean} optional Use dark theme (false)

Configuration below:

<TelegramComments
customColor="fb9f9f"
customHeight="450"
commentsNumber={3}
isDark
pageId="about-page"
/>

Q: how to make this comments widget auto dark or light theme mode along with docusaurus ?

[slorber]

You need to retrieve the color mode theme from the classic theme.

import useThemeContext from '@theme/hooks/useThemeContext';

const {isDarkTheme} = useThemeContext();

(this is an implementation detail of the classic theme, we can't promise 0 breaking changes)

[ghost]

import React from "react";
import Layout from "@theme/Layout";
import TelegramComments from 'react-telegram-comments';
import useThemeContext from '@theme/hooks/useThemeContext';

function ExamplePage() {
    const Example = () => {
        const { isDarkTheme } = useThemeContext();
        return (
            <TelegramComments
                customColor="fb9f9f"
                customHeight="450"
                commentsNumber={3}
                isDark={isDarkTheme}
                pageId="about-page"
                showColorfulNames
                showDislikes
                showIconOutlines
                websiteKey={"key"}
            />
        )
    }
    return (
        <Layout>
            <Example />
        </Layout>
    )
}

export default ExamplePage

Still manully reload page to take effect😅

[slorber]

@LGTMXD the concept of "dark mode" is something that only exists on the client. It is always "false" by default, but switch to "true" (eventually) after React hydration and reading localstorage.

I don't know how your telegram comments work exactly regarding server-rendering and if they allow dark mode to be updated live.

What I can tell you is just the we have this existing API. Have you seen an unexpected boolean value returned by this API?

As a workaround, I'd suggest wrapping your telegram component with <BrowserOnly/>, that could solve your problem, but can't be 100% sure https://v2.docusaurus.io/docs/next/docusaurus-core/#browseronly