Styling Toolbar/Sidebar


#1

Hi all,

I would like to customize the toolbar and sidebar to have a green background and white color, including the menutoggle button.

I had expected to apply the following changes in my app/theme/app.variable.scss

$toolbar-background: #007D40;
$toolbar-button-colour: #ffffff;
$toolbar-text-color: #ffffff;

However, only the background changes to green, I to not get the text and button icon color to change to white. Any ideas?

Thanks
Juergen


#2

You could just do…

<ion-navbar *navbar secondary>
  <ion-title>
    Home
  </ion-title>
</ion-navbar>

or

<ion-navbar *navbar my-green>
  <ion-title>
    Home
  </ion-title>
</ion-navbar>
$colors: (
  primary:    #387ef5,
  secondary:  #32db64,
  danger:     #f53d3d,
  light:      #f4f4f4,
  dark:       #222,
  favorite:   #69BB7B,
  my-green: (
    base: green,
    contrast: white
  )
);

if you want reuse that color.


#3

I am aware that I can allways change the HTML or change SASS code/styling, but I thought since there are SASS variables defined, I would just change these, since this would be the easiest and most dry way. But to me it looks like they have no affect and I also cannot find them being used. Do I have a totally wrong understanding on how to use them. By the way, I am refering to this page: http://ionicframework.com/docs/v2/theming/overriding-ionic-variables/.


#4

Where did you declare these? I added them to app.variables.scss and they took right away.

@import 'globals.core';

$colors: (
  primary:    #387ef5,
  secondary:  #32db64,
  danger:     #f53d3d,
  light:      #f4f4f4,
  dark:       #222,
  favorite:   #69BB7B
);
$toolbar-background: #007D40;
$toolbar-button-colour: #ffffff;
$toolbar-text-color: #ffffff;