src/styles/theme.scss
@import './config.scss';

$themes: (
    light: (
        background-1: $argo-color-gray-3,
        text-1: $argo-color-gray-7,     
        background-2: $white-color,
        text-2: $argo-color-gray-8,        
        light-argo-gray-6: $argo-color-gray-6,
        light-argo-gray-2: $argo-color-gray-2,
        light-argo-teal-1: $argo-color-teal-1,
        light-argo-teal-7: $argo-color-teal-7,
        light-argo-teal-5: $argo-color-teal-5,
        pod-cyan: lightcyan,
        layout-loader-bg: rgba($argo-color-gray-7, 0.4),
        overlay: rgba(222, 222, 222, 0.62),
        shadow: $argo-color-gray-5,
        border: $argo-color-gray-3
    ),
    dark: (
        background-1: $dark-theme-background-1,
        text-1: $argo-color-gray-3,        
        background-2: $dark-theme-background-2,
        text-2: $white-color,        
        light-argo-gray-6: $argo-color-gray-2,
        light-argo-gray-2: $dark-theme-sliding-panel,
        light-argo-teal-1: $argo-color-gray-6,
        light-argo-teal-7: $argo-color-teal-5,
        light-argo-teal-5: $argo-color-teal-4,
        pod-cyan: $argo-color-teal-8,
        layout-loader-bg: rgba($argo-color-gray-3, 0.4),
        overlay: rgba(70, 70, 70, 0.62),
        shadow: $dark-theme-background-1,
        border: $argo-color-gray-7
    )
);


@mixin themify($themes) {
    @each $theme, $map in $themes {
      .theme-#{$theme} & {
        $theme-map: () !global;
        @each $key, $submap in $map {
          $value: map-get(map-get($themes, $theme), '#{$key}');
          $theme-map: map-merge($theme-map, ($key: $value)) !global;
        }
        @content;
        $theme-map: null !global;
      }
    }
  }
  
  @function themed($key) {
    @return map-get($theme-map, $key);
  }
  