dart paper-scaffold background-color =＃526E9C for header。在哪里改变？

Question

我已经阅读了其他[非常]相关问题的答案，但我想我会再次提出它，因为可能已经进行了聚合物更新。

我可以更改[dart] paper-scaffold（core-scaffold）中的所有颜色 - 菜单和工具栏，但我无法更改顶部标题的颜色。它始终是background-color =＃526E9C。我能做到的唯一方法是更改​​生成的（使用pub build）index.html中的核心工具栏样式。这个一行更改在浏览器窗口中设置整个标题的颜色（这就是我想要的）。所以我可以过去。

当我做风格时：

core-toolbar{
background-color: #7A418D;
color: #FFF;
}

它只会改变抽屉上方的颜色，而不会改变整个顶部的颜色。这就是为什么它只是做到这一点非常神秘！

我尝试过shadow-shim，core-scaffold :: shadowdom等等。我尝试过更改/ src / core-scaffold.html - 以及更多，这个普遍存在的值＃526E9C出现了。

在我的网站（sekpa.org）中，它显示了这个蓝色（＃526E9C）的一半。

这只是一个错误吗？如果是的话，我会对这些知识感到非常高兴！ 谢谢你史蒂夫

Answer 1

core-header-panel内有两个paper-scaffold。

每个core-header-panel包含一个core-toolbar。

左侧可折叠core-header-panel及其内部core-toolbar位于正常的Light DOM中，这就是为什么您可以通过指定css来更改颜色的原因。

但是，右core-header-panel和core-toolbar位于paper-scaffold的Shadow DOM内。要更改此core-toolbar的颜色，您需要执行类似 -

的操作

paper-scaffold::shadow core-toolbar {
  background: #7A418D;
  color: #fff;
}

有关详细信息，请参阅此link。