How to call variables for dark mode

Question

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?

sunilbaba sunilbaba · Accepted Answer · 2020-06-20T13:21:03

You can use media query to achieve

@media (prefers-color-scheme: dark) {
  .day.dark-scheme   { background:  #333; color: white; }
  .night.dark-scheme { background: black; color:  #ddd; }
}

@media (prefers-color-scheme: light) {
  .day.light-scheme   { background: white; color:  #555; }
  .night.light-scheme { background:  #eee; color: black; }
}

Reference : https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme

How to call variables for dark mode

1 Answers