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

.dark-theme{
    p{
      font-size:76px
     }

     $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 doesnt smae thing happens when i loose the !default in all variables Any idea why?