reactjs - Messenger 客户聊天 - 带有下一个主题的暗模式下的白色气泡

Question

我在我的 next.js 应用程序中使用 next-themes 到我的暗模式。我添加了 react-messenger-customer-chat 并且在暗模式下有白色边框和白色气泡。您能告诉我如何将其更改为其他颜色或隐藏吗？我使用tailwindcss。
应用程序.js

function MyApp({ Component, pageProps }) {
  return (
    <>
      <ThemeProvider attribute="class" defaultTheme="light">
        <Header />
        <Component {...pageProps} />

        <Footer />
        {typeof window !== "undefiend" && (
          <MessengerCustomerChat
            pageId="1096sagsa3gsa47"
            appId="2215gsagsagsaga7"
            className="messenger-chat-bubble"
            themeColor="#222222"
          />
        )}
      </ThemeProvider>
    </>
  );
}

我创建自定义类global.css 文件

.messenger-chat-bubble
@layer components {
  .cms-content > h1,
  h2 {
    @apply dark:text-gray-600;
  }
  .messenger-chat-bubble > iframe {
    @apply dark:bg-dark-posts;
  }
}

没有工作，然后我尝试并没有改变。fb_customer_chat_icon 是由 facebook 定义的类

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .cms-content > h1,
  h2 {
    @apply dark:text-gray-600;
  }
  .messenger-chat-bubble > iframe {
    @apply dark:bg-dark-posts;
  }
  .messenger-chat-bubble > .fb_customer_chat_icon {
    @apply dark:bg-dark-posts;
  }
}

白色边框和白色气泡 检查信使聊天图标

标签： reactjsnext.jstailwind-css