SASS Theme example theme file

sass-theme.scss

$themes: (
  light: (
    backgroundLight: #fff,
    backgroundDark: #f7f7f8,
    textColor: #fff,
    textDark: #000,
    textLight: #919394,
    contentColor: #b9baba,  
    iconColor: #000,
    
  ),
  dark: (
    backgroundLight: #131b1f,
    backgroundDark: #000,
    textColor: #fff,
    textDark: #fff,
    textLight: #b9baba,
    iconColor: #fff,
  ),
);

$color-schemes: (
  scheme-default: (
    backgroundColor: #00b4ff,
  ),
  scheme-cs1: (
    backgroundColor: #e68a00,
  )
);

@mixin customize($arg: theme) {
  $array: $themes;
  $prefix: theme;

  @if ($arg == theme) {
    $array: $themes;
    $prefix: theme;
  } @else {
    $array: $color-schemes;
    $prefix: color;
  }

  @each $theme, $map in $array {
    .#{$prefix}-#{$theme} & {
      $array-map: () !global;
      @each $key, $submap in $map {
        $value: map-get(map-get($array, $theme), '#{$key}');
        $array-map: map-merge($array-map, ($key: $value)) !global;
      }

      @content;
      $array-map: null !global;
    }
  }
}

@function getValue($key) {
  @return map-get($array-map, $key);
}