2

I'm new to scss, I want to implement theming using scss, I wrote mixins and function that returns a color value if parent class. i.e "theme-light" or "theme-dark" exits accordingly. How can I write a selector that returns a default value if the parent class doesn't exist?

@mixin themed() {
    @each $theme, $map in $themes {
      .theme-#{$theme} & {
        $theme-map: () !global;
        @each $key, $submap in $map {
          $value: map-get(map-get($themes, $theme), '#{$key}');
          $theme-map: map-merge($theme-map, ($key: $value)) !global;
        }
        @content;
        $theme-map: null !global;
      }

    }
  }
  
  @function t($key) {
    @return map-get($theme-map, $key);
  }

Use case: actually, I want to implement theming in my react app. based upon the selected theme either dark/light mode the whole theme for the app would be changed.

0 Answers0