Ember Theming - SASS

themes.scss

// theme map
$themes: (
  default: (
    first: (
      primary: #58b15f,
      secondary: #e3f0d8
    ),
    second: (
      primary: #287f6e,
      secondary: #83e5d2
    )
  )
);

// if theme service exists as addon - allow 3rd parties to merge into themes.
@if variable-exists(theme-additional) {
  $themes: map-merge($themes, $theme-additional);
}

@mixin apply-theme() {
  @each $base, $attributes in $themes {
    @each $section, $values in $attributes {
      $name: "#{$base}-#{$section}";
      &[data-theme="#{$name}"] {
      }
    }
  }
}

// helper for SASS files to apply theme values to an element.
// usage: @include theme('color', 'primary');
@mixin theme($cssAttribute, $themeValue) {
  @each $base, $attributes in $themes {
    @each $section, $values in $attributes {
      $name: "#{$base}-#{$section}";
      &[data-theme="#{$name}"] {
        @if $cssAttribute == "background" and $themeValue == "bg-image" {
          $url: map-get($values, $themeValue);
          #{$cssAttribute}: url($url) repeat-x;
        } @else if $cssAttribute == "background" and $themeValue == "icon" {
          $url: map-get($values, $themeValue);
          #{$cssAttribute}: url($url) no-repeat;
        } @else {
          #{$cssAttribute}: map-get($values, $themeValue) !important;
        }
        // ...
      }
    }
  }
}

// helper for more advanced theming.
// usage: @include theme-advanced('border', '', 'accent', '1px solid');
@mixin theme-advanced($cssAttribute, $before, $themeValue, $after) {
  @each $base, $attributes in $themes {
    @each $section, $values in $attributes {
      $name: "#{$base}-#{$section}";
      &[data-theme="#{$name}"] {
        #{$cssAttribute}: #{$before} map-get($values, $themeValue) #{$after};
      }
    }
  }
}