Ionic-framework: RC-0 Overriding Ionic Sass Variables in src/theme/variables.scss does not seem working

[bimal72]

Hello,
I just upgraded deom Beta-11 to RC0.
Regarding scss, I am facing issues.

In beta-11, we do have theme folder under app directory which includes app.variables.scss where I had override colors and variables, like

$list-background-color: transparent;
$list-ios-border-color: rgba(163,163,163,0.2);
$list-md-border-color:  rgba(163,163,163,0.2);
$select-ios-icon-color: color($colors, primary);
$select-md-icon-color: color($colors, primary);
$picker-md-background-color: color($colors, white);
$picker-ios-background-color: color($colors, white);

also I do have some custom styles in app.core.scss with importing individual styles from page scss.

Now after switching to RC0 - I have renamed app.variables.scss to variables.scss and put in src/theme folder.
How to include app.variable.scss?

Also now I have above variavles in variavles.scss, but I think that those are not applying in the view. e.g. my list background shows me primary color instead of transparent.

[royipressburger]

+1

[ramonornela]

See CHANGELOG was updated in https://github.com/driftyco/ionic/commit/2bc4df8d4b691638cd85100af72f89e093505300 steps 28 to 31

Thanks

[brandyscarney]

Hey, I'm a bit confused by this. So you have a variables.scss file and a app.variables.scss file and you want to include the app.variables.scss?

Also now I have above variavles in variavles.scss, but I think that those are not applying in the view. e.g. my list background shows me primary color instead of transparent.

Can you take a look at the conference app and compare? We are overriding the toolbar background color for Material Design: https://github.com/driftyco/ionic-conference-app/blob/master/src/theme/variables.scss#L53

Maybe you could provide a repository where we can see what you're doing or paste some code snippets of all flies including imports? Thanks!

[KashifAhmed]

I'm trying to add color on button but it's not working, Do I need to configure more thing for apply color ?
Now my code look like.
<button color=primary>Hello</button>
I also tried
<button color="primary">Hello</button>

[brandyscarney]

@KashifAhmed Can you right click on the element and inspect to see which classes are being applied? The primary color is also added to most buttons by default so it won't change color if you are using it in your content. Take a look at the docs here: http://ionicframework.com/docs/v2/components/#buttons

[KashifAhmed]

Thanks @brandyscarney it working, your theming documentation need some correction.
Take a look at this: https://ionicframework.com/docs/v2/theming/theming-your-app/
It should I'm a button.

[jgw96]

Hello all! As it seems it has been a while since there was any activity on this issue i will be closing it for now. Feel free to comment if you are still running into this issue. Thanks for using Ionic!