iOS应用中Facebook帖子嵌入暗黑模式下文字显示异常的解决求助

Facebook嵌入的帖子是通过独立iframe加载的，外层CSS无法穿透iframe修改内部样式，这就是你设置color: #fff后文字仍为黑色的原因。以下是两种可行的解决方法：

方法一：使用Facebook官方主题适配属性（推荐） #

Facebook的嵌入组件支持data-colorscheme属性，设置为auto时会自动跟随系统的亮色/暗黑模式切换样式，无需手动调整文字颜色。

修改后的HTML代码 #

<div class="embed-facebook-post">
   <div class="fb-post" 
        data-href="https://www.facebook.com/babalilachocolate/posts/pfbid033rJeUdXXam2jJZNCA12QUyeZZivmQq7MTtDGiuiXVu6St3WEMpwecNu4iC2yqJ9Wl" 
        data-width="500" 
        data-show-text="true" 
        data-colorscheme="auto">
<blockquote cite="https://www.facebook.com/babalilachocolate/posts/536751285131885" class="fb-xfbml-parse-ignore">
<p>✨At the heart of Baba Lila is The Twelve Truffles✨
It all began with them. Tash has been making these 12 flavours since...</p>
Posted by <a href="https://www.facebook.com/babalilachocolate">Baba Lila</a> 
on&nbsp;<a href="https://www.facebook.com/babalilachocolate/posts/536751285131885">Thursday, November 24, 2022</a></blockquote>
   </div>
</div>

简化后的CSS #

保留背景色设置即可，内部文字样式由Facebook自动处理：

@media (prefers-color-scheme: dark) {
  div.embed-facebook-post {
    background-color: #000;
  }
}

方法二：CSS滤镜反转颜色（自定义方案） #

如果官方主题不符合需求，可以用CSS滤镜反转容器颜色，再修正图片显示：

@media (prefers-color-scheme: dark) {
  div.embed-facebook-post {
    background-color: #000;
    /* 反转所有颜色，黑色变白色 */
    filter: invert(1) hue-rotate(180deg);
  }
  /* 反转图片，恢复原本色彩 */
  div.embed-facebook-post img {
    filter: invert(1) hue-rotate(180deg);
  }
}

这个方法通过invert(1)反转容器内所有元素的颜色，再用hue-rotate(180deg)修正色彩偏差，最后把图片再次反转回来避免变色。

内容的提问来源于stack exchange，提问作者androidStud