Scss variables

ionic-v1
1

I tried to change text color of toolbar, but it seems difficult (!).

I put $toolbar-text-color: #FFFFFF in variables-scss, but doesnt work…
I read a old topic here, and I tried $toolbar-active-color: #FFFFFF, but also this doesn’t work…

And if I put

<ion-title color = "light"
           Text Text Text
< /ion-title>

this also doesn’t work! I have to put :

<ion-title>
      <p color='light'>Track your steps</p>
</ion-title>

Why this variable (from docs!) does’t work where $text-color: #000080; works properly? Where I fail?

P.

2

Have you tried to inspect the elements using a web inspector in order to see if something is overriding the text color?

I would add a class to the ion-title like “light-title” and then styling it with scss like

.light-title {
     color : #FFFFF
}

Also, I can’t remember if ion-title uses an inner h1 tag, but inspecting it would reveal that. If that’s the case, change your scss to something like

.light-title {
    h1 {
       color : #FFFFF
    }
}
3

Thanks for suggestion, Danny.
I find

<div class="toolbar-title toolbar-title-md" ng-reflect-klass="toolbar-title" ng-reflect-ng-class="toolbar-title-md">
     Text text text
</div>

so I resolve with:

.toolbar-title {
    color: #FFFFFF
}

Pietro