更改工具栏OnsenUi的颜色

Question

我正在为我的webapp使用OnsenUi框架。我需要知道是否有任何方法可以根据页面的颜色更改工具栏的颜色。换句话说，就像Android 5工具栏的颜色效果一样。

如果可能的话，你能和我分享一下如何做到吗？

如果不是，你能告诉我手动更改颜色代码的位置，以便我可以模仿这种效果。我发现的是，我可以用.navigation-bar背景颜色更改工具栏的颜色，但它使工具栏在每个页面中只显示一种颜色。任何人都可以告诉我在哪里修改以获得不同页面的不同颜色吗？

更新＃1

我尝试了一种简单的方法

<ons-toolbar style="background-color:#B1797A;>

但这打破了我的导航!!

任何帮助将不胜感激。谢谢你们。

Answer 1

在document.ready处理程序中，获取body元素的背景颜色并将其传递到工具栏，如下所示：

$(document).ready(function () {
    var bgColor = $('body').css("background-color");
    $('.navigation-bar').css("background-color", bgColor);
});

JsFiddle demo

---

您还可以在此演示中点击按钮时看到它：

JsFiddle demo 2

Answer 2

你可以试试这个：

1. 从项目的根目录转到目录/lib/onsenui/css
2. 打开onsen-css-components.css
3. 搜索课程.toolbar--material
4. 将班级的background-color属性修改为您选择的颜色

这种方法适合我。