CODEWITHSUNDEEP
jquerycssangularjsonsen-ui
Ranjith Varatharajan
Ranjith Varatharajan

Reputation: 1694

Changing the color of toolbar OnsenUi

I'm using OnsenUi framework for my webapp. and i need to know Is there any way to change the colour of toolbar based on the colour of the page. In other words, like Android 5 toolbar color effect.

If it possible, can you share me a snippet on how to do it?

If it's not, can you tell me where to change the color code manually, so that i can mimic that effect. What i found was, i can change the color of the toolbar in .navigation-bar background color, but it makes the toolbar to display only one color in every page. Can anybody tell me where to modify to get different color for different pages?

Update #1

i tried a simple method 

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

but this breaks my navigation !!

Any help would be appreciated. Thanks guys.

Upvotes: 0

Views: 1927

Answers (2)

Edo Udoma
Edo Udoma

Reputation: 131

You could try this:

  1. Go to the directory /lib/onsenui/css from the root of your project
  2. Open onsen-css-components.css
  3. Search for the class .toolbar--material
  4. Modify the background-color property of the class to a color of your choice

This method worked for me.

Upvotes: 1

urbz
urbz

Reputation: 2667

In your document.ready handler, get the background-color of the body element and pass it to your toolbar, like so:

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

JsFiddle demo

You can also see it happen when clicking on a button, in this demo:

JsFiddle demo 2

Upvotes: 3

Related Questions