FB-CustomerChat 深色模式

Posted 2023-04-18

【中文标题】FB-CustomerChat 深色模式

【英文标题】：FB-CustomerChat dark mode

【发布时间】：2021-07-19 20:35:44

【问题描述】：

您好，我为我的网站创建了一个 Facebook 页面并添加了即时聊天插件，但我希望它是深色皮肤，因为整个网站都是在深色模式下制作的

这是网站：

Website

即使没有直接的方法，我如何才能用正确的 css 覆盖 css 以获得暗模式设计？

TIA！

【问题讨论】：

您不能覆盖插件的 CSS，因为内容位于从不同来源加载的 iframe 中，这意味着您无法访问它以进行脚本或样式设置。

那不就是把它改成黑皮吗？

你可以设置theme_color，仅此而已。 developers.facebook.com/docs/messenger-platform/discovery/…

@CBore 好的，谢谢！

【参考方案1】：

有办法，我和你的情况一样。您可以反转两个 iframe（气泡按钮和聊天窗口本身），这将为您提供一个已经很暗的模式：

[data-testid="bubble_iframe"], [data-testid="dialog_iframe"] 
    filter: invert(1);

您可以进一步调整它们的反转程度，还可以添加其他滤镜，如“hue-rotate”、“saturation”、“brightness”等。

如果您想要保留网站的主要主题，请转到https://pinetools.com/invert-color（或图形编辑器）并反转颜色并将反转颜色作为小部件的主题颜色。双重反转后，您将拥有保留主色的深色主题小部件。