Twitter 嵌入时间线背景颜色答案

【问题标题】：Twitter Embedded Timeline Background ColourTwitter 嵌入时间线背景颜色
【发布时间】：2016-12-14 04:48:30
【问题描述】：

使用下面的twitter嵌入方法（https://dev.twitter.com/web/embedded-timelines）专门使用网格布局，有没有办法控制背景颜色？

我想更新的样式在“GridLayoutTextOnlyTweet”类中，但它在 iFrame 中。

【问题讨论】：

【解决方案1】：

很好的答案，但后来我这样做了，黑暗主题立即为我工作

data-theme="dark"

查看此链接以获取参考 https://developer.twitter.com/en/docs/twitter-for-websites/embedded-tweets/guides/embedded-tweet-parameter-reference

【讨论】：

这个问题是几年前提出的。目前可能会有更好的答案。
我希望有一种方法可以将其设置为“自动”并让它跟随prefers-color-scheme。我找不到任何让样式自动切换的干净方法，尤其是因为您似乎无法从 JS 中获取 prefersColorScheme 值。我想出的最佳解决方案是同时渲染明暗，并用 CSS 交换显示哪一个。

【解决方案2】：

如果您使用 https://publish.twitter.com 嵌入的新 Twitter，您只需添加 data-chrome="transparent" 以使背景透明，那么您可以只使用带有背景颜色集的包装器元素。

到代码块

<a class="twitter-timeline" data-dnt="true" data-chrome="transparent" data-link-color="#ffcc00" href="https://twitter.com/StackOverflow">Tweets by StackOverflow</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

其他可用选项有：

data-chrome="transparent nofooter noborders noheader noscrollbar"

文档：

https://developer.twitter.com/en/docs/twitter-for-websites/timelines/overview

【讨论】：

【解决方案3】：

a.twitter-timeline {
  /* Buttonish */
  display: inline-block;
  padding: 6px 12px 6px 30px;
  margin: 10px 0;
  border: #ccc solid 1px;
  border-radius: 3px;
  background: #f8f8f8 url("") 8px 8px no-repeat;
  background-size: 1em 1em;

  /* Text */
  font: normal 12px/18px Helvetica, Arial, sans-serif;
  color: #333;
  white-space: nowrap;
}

参考：https://dev.twitter.com/web/overview/css

【讨论】：

【解决方案4】：

对，我就是这样解决的。将其放在 twitter 嵌入之后：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script>
var hideTwitterAttempts = 0;
function hideTwitterBoxElements() {
    setTimeout( function() {
        if ( $('[id*=twitter]').length ) {
        $('[id*=twitter]').each( function(){
            var ibody = $(this).contents().find( 'body' );
            if ( ibody.find( '.grid-Widget' ).length ) {
            ibody.find( '.GridLayoutTextOnlyTweet' ).css( 'background-color', '#1e73be' );
            }
            else {
                $(this).hide();
            }
        });
        }
        hideTwitterAttempts++;
        if ( hideTwitterAttempts < 3 ) {
            hideTwitterBoxElements();
        }
    }, 1500);
}
// somewhere in your code after html page load
hideTwitterBoxElements();
</script>

【讨论】：

使用 setTimeout 是完全不可预知的，如果用户的连接速度很慢，需要 2 秒怎么办？
同意这并不理想。如果您有更好的解决方案，我愿意接受？

【解决方案5】：

你可以这样做：

.GridLayoutTextOnlyTweet {
  background: red;
}

它在 iframe 中并不重要。您可能需要添加!important 来覆盖默认样式，但不要先尝试。

【讨论】：

用 !important 试过了，但没用。 iFrame 本质上是外来内容，因此我无法通过纯 css 对其进行操作。不确定是否有某种 Javascript 钩子（甚至某个地方的 Twitter 选项）我可以 tweek 但在 Google 搜索后我找不到。
这不是关于 iframe，而是关于跨域安全。