Override variables.scss $colors from different theme .scss file?

Ionic Framework ionic-v3
1

Hi guys. I have a second file called app.theme.scss inside /theme that is imported in my /src/app/app.scss like this:

@import "./../theme/app.theme.scss"

This is the only line in my app.scss

In my variables.scss file I changed that variable $colors primary color to red, and it works great. Now I want to change to yellow from within my app.theme.scss. I saw here how they do it but it didn’t work.

This is my app.theme.scss:

@import "./ionic.globals";

$pallete-primary: lighten(#ff3, 10); // This is working and overrides correctly on every component that uses it

$colors: (
  primary:    $pallete-primary
) !default; // This is not working and default button colors etc are not overriden

I tried changing the import from app.scss to variables.scss but it didn’t change a thing.

For those asking why I just don’t use variables.scss instead, it’s because i’m changing the theme based on some parameters, I’m using gulp to change that app.theme.scss based on that parameter. (I don’t know why but wrapping my code with a class and import a file with that class in it and override values there didn’t work not even for common variables like the $pallete-primary above)

Edit:
I could manage to make it work by removing the $colors variable from the variables.scss file and having it on each theme file that will after be the app.theme.scss

2 Likes