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.