Generated by SassMeister.com.

themefy-colors-output.css

.theme-default .primary-color,
.theme-default.primary-color {
  background: #02a8d4 !important;
  background-color: #02a8d4 !important;
}
.theme-default .primary-color--text,
.theme-default.primary-color--text {
  color: #02a8d4 !important;
}

.theme-default .secondary-color,
.theme-default.secondary-color {
  background: #2ecc71 !important;
  background-color: #2ecc71 !important;
}
.theme-default .secondary-color--text,
.theme-default.secondary-color--text {
  color: #2ecc71 !important;
}

.theme-reverse .primary-color,
.theme-reverse.primary-color {
  background: #2ecc71 !important;
  background-color: #2ecc71 !important;
}
.theme-reverse .primary-color--text,
.theme-reverse.primary-color--text {
  color: #2ecc71 !important;
}

.theme-reverse .secondary-color,
.theme-reverse.secondary-color {
  background: #02a8d4 !important;
  background-color: #02a8d4 !important;
}
.theme-reverse .secondary-color--text,
.theme-reverse.secondary-color--text {
  color: #02a8d4 !important;
}

.theme-default p {
  color: #02a8d4;
}
.theme-reverse p {
  color: #2ecc71;
}

themefy-colors.scss

// ----
// Sass (v3.4.21)
// Compass (v1.0.3)
// ----

$color-primary: #02a8d4; //blue
$color-secondary: #2ecc71; // green

// color palette for create color classes
$colors: (
	biox-black: #111,
	biox-white: #fff,
	biox-grey: #f2f3f4,
	biox-blue: $color-primary,
	biox-green: $color-secondary,
	biox-black-grey: #222,
	biox-dark-blue: #414550,
	biox-blue-grey: #ced8dc,
	biox-text-blue: #798f9a,
	biox-text-black: #414550,
	biox-grey-lighten: #797979
);


$themes: (
  'default': (
    'primary': $color-primary,
    'secondary': $color-secondary
  ),
  'reverse': (
    'primary': $color-secondary,
    'secondary': $color-primary
  )
) !default;

// Initialize our variables as `null` so that when used outside of `themify`,
// they actually output nothing.
$color-primary: null;
$color-secondary: null;

/// @param {Map} $themes [$themes] - Map of themes to use
@mixin themify($themes: $themes) {
  // Iterate over the themes
  @each $theme, $colors in $themes {

    .theme-#{$theme} & {
      // Set the theme variables with `!global`
      $color-primary: map-get($colors, 'primary') !global;
      $color-secondary: map-get($colors, 'secondary') !global;
      $biox-blue: map-get($colors, 'primary') !global;
      $biox-red: map-get($colors, 'secondary') !global;

      // Output user content
      @content;

      // Unset the theme variables with `!global`
      $color-primary: null !global;
      $color-secondary: null !global;
    }
  }
}


/// @param {Map} $themes [$themes] - Map of themes to use
@mixin themify2($themes: $themes) {
  // Iterate over the themes
  @each $theme, $colors in $themes {
    @each $color-name, $color in $colors {
      // Create a selector
      // e.g. `.theme .color-primary, .theme.color-primary`
      .theme-#{$theme} .#{$color-name}-color,
      .theme-#{$theme}.#{$color-name}-color {
        background: $color !important;
        background-color: $color !important;
        &--text {
          color: $color !important;
        }
      }
    }
  }
}@include themify2($themes);




////// USAGE EXAMPLE/////
// Text
p {
  @include themify { color: $color-primary }
  //@include themify { background: $color-secondary }
}

span {
  //@include themify { border: $biox-blue }
}

@mixin txt-gradient($direction, $color-stops...) {
  background: -webkit-linear-gradient($direction, $color-stops);
  background: linear-gradient($direction, $color-stops);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

@mixin green-blue-grd-txt() {
  @include txt-gradient(right, $biox-blue 0%, $biox-green 100%);
};