How to call variables for dark mode

Hello i want to make dark mode for my Ionic 3 Angular 5 project. I made the functions that change themes as i wanted.

My problem is that scss variables in my ionic.theme.dark scss file inside the theme folder don’t apply e.g. $background-color simple css rules apply just ok. e.g. p{font-size:40px}.

I think there is a workaround because when i just call the ionic.theme.dark in the variables.scss file without putting it in a class it works fine but when i need to call the dark mode inside the class e.g. .dark-theme{@import “./ionic.theme.dark”;} it calls only the css rules not the variables

For example


     $text-color:                 #fff !default;
     $link-color:                 color($colors, primary) !default;
     $background-color:           rgba(0,0,0,0.6) !important;
     $subdued-text-color:         #666 !default;

p font-size works but $background-color doesn't, same thing happens when i loose the !default in all variables Any idea why?