Variables.scss and Theming Question

Ionic Framework ionic-v3
1

Hi,

I’m attempting to change things like the tabs background color globally in variables.scss. If I add and modify this variable:

$toolbar-background:  red;

It changes the header and tabs background to red. But if I add this variable nothing happens, tabs background is still red.

$tabs-background:     pink;

But then if I add this variable and assign it like so, the tabs background on iOS displays pink. (Which is pretty much the same way it is assigned in ionic.theme.default.ios.scss

$tabs-ios-background: $tabs-background;

Is this the expected behavior? Or is this a bug? I was hoping that I could use the default variables to change everything and not have to add ios/md/wp variables to variables.scss.

All variables are modified before the ionic default theme import like so

$toolbar-background:    red; 
$tabs-background:       pink; 
$tabs-ios-background:   $tabs-background;

@import "ionic.theme.default";

Many thanks

2

It is expected behavior.

You didn’t say where are you testing the app. It’s like you are adding the $tabs-background value of pink to $tabs-ios-background. So every iOS device (and sometimes your browser too) are going to get that value. For Android use $tabs-md-background. That way you can have a style for the two different OS.

3

Thanks RaulGM, I understand that. I guess my question was why does $toolbar-background set things across all devices, but $tabs-background does not and the extra step is necessary. Turns out that I think it’s the version of ionic i’m using. In github, $tabs-ios-background is set like so but in my version of ionic, it is set

// my version

$toolbar-ios-background:            $toolbar-background !default;
$tabs-ios-background:                $toolbar-ios-background !default;


// ionic.theme.default.ios.scss Github > Latest

// iOS Tabs
// --------------------------------------------------

$tabs-ios-background:                  $tabs-background !default;