Styling Toolbar/Sidebar

Ionic Framework ionic-v3
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;
1 Like