How to create themes in SCSS
// Theme Names
$themes: (
default: (
background: $variable,
content: $variable
),
light: (
background: $variable,
content: $variable
),
);
@mixin theme($property, $value, $additional: "", $isRoot: false ) {
@each $theme, $map in $themes {
@if ($theme == default) {
& {
#{$property}: #{$additional} map-get($map, $value);
}
}
@else if ($isRoot == true) {
&.#{$theme} {
#{$property}: #{$additional} map-get($map, $value);
}
}
@else {
.#{$theme} & {
#{$property}: #{$additional} map-get($map, $value);
}
}
}
}