cibgraphics
7/27/2017 - 5:17 PM

How to create themes in SCSS

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);
      }
    }
  }
}