0

I am trying to figure out how I can create an .scss class that will store and update some global theme colors based on when the user changes themes. This in Angular 9.

@each $skin,
$data in $skins {
  $skin-mask-slight-color: map-get($data, skin-mask-slight);
  $skin-text-color: map-get($data, skin-text);
  $skin-navbar-color: map-get($data, skin-navbar);
  $skin-gradient-start-color: map-get($data, skin-gradient-start);
  $skin-gradient-end-color: map-get($data, skin-gradient-end);
  $skin-primary-color: map-get($data, skin-btn-primary);
  $skin-secondary-color: map-get($data, skin-btn-secondary);
  $skin-default-color: map-get($data, skin-btn-default);

  .#{$skin}-skin {
    // store and update the above variables based on selected theme
  }
}

I want to be able to access the current value of the declared variables in any other .scss class.

Is there a way to accomplish this?

Cody Pritchard
  • 703
  • 2
  • 15
  • 31
  • 3
    If you go that route you're generating a bunch of repetitive css with different values that can bloat your package size and bring issues with rampant overrides etc. Do you have to support Internet Explorer? If not I would look into [css vars](https://www.google.com/search?q=live+theme+css+vars+angular) instead. – Chris W. Jun 18 '20 at 19:48
  • SCSS isn't a runtime compiler, so this probably won't work how you want it to. As Chris W points out, CSS vars are probably what you're after. – disinfor Jun 18 '20 at 19:51

0 Answers0