Theming componentAvailable since EcoComposer 1.2

You can put as many variables as you want to in the light and dark arrays.
You can choose the keys the more appropriate to your project. Just keep 'light' and 'dark' keys.
If the defaults keys name are ok for you, you are not even forced to pass the names to the components.
Here a "complex" example where we want to use a darkened color for one property of a specific rule (you can use 'darken' or 'lighten') :

@include theming.theme('border', $border-color, '2px solid darken', 10);

Generally speaking, it is recommended to use themes in this way :

// You initialize the theming component with your theme and the components you need
@include theming.init-themes($themes, 'my-component' 'my-second-component');

// You initialize and imports the needed components
@include my-component.init();
@include my-component.create($themes);

@include my-second-component.init();
@include my-second-component.create($themes);

// You use your components and put your specific styles
a.my-component#{$suffix} {
  @include theming.to-theme(
    (
      #{&} + ':not(:hover)' : ('color', 'my-component--link--color')),
      #{&} + ':hover' : ('color', 'my-component--link-hover--color'))
    ),
    $suffix,
    $themeUsed
  );
}

// You apply the themes
@include theming.global-mass-theme();
  

The defaults values are :

Some mixins to help you handle the themes with the other components :

• add-themes : Add themes to the 'static' variables $themes
• blend-image : Mixin that will adjust a background image in order to work with dark and light themes
• global-mass-themes : Applies themes for rules and properties stored in the $to-theme 'static' variable
• init-themes : Loads a user defined theme in the 'static' variables $themes
• mass-theme : Generates the CSS for dark and light themes for multiple properties at once
• mass-theme-properties : Launched inside a rule, it sets the theme for an array of properties for a given theme ('light' or 'dark' list)
• theme : Generates the CSS for dark and light themes for a given property
• theme-property : Used internally by the 'theme' mixin to create the code for a property with a given theme
• to-theme : Adds rules for the global-mass-theme mixin.

The 

$themes

 variable must be structured in this way :

$themes: (
  'light': (
    'primary-color'    : #3e3d3e,
    'secondary-color'  : #02dfbe,
    'secondary-color--alpha' : transparentize(#02dfbe, 0.8),
    'tertiary-color'   : #88faec,
    'quaternary-color' : #1d3325,
    'quinary-color'    : #fff,
    'senary-color'     : #d4d4d4,
    'septenary-color'  : #000,
    'octonary-color'   : #dbdbdb,
    'nonary-color'     : #e6f9ff,
    'decenary-color'   : rgba(125, 223, 255, .16862745098039217)
  ),
  'dark': (
    'primary-color'    : #fff,
    'secondary-color'  : #a1ffff,
    'secondary-color--alpha' : transparentize(#02dfbe, 0.8),
    'tertiary-color'   : #88faec,
    'quaternary-color' : #a1ffff,
    'quinary-color'    : #000,
    'senary-color'     : #3e3d3e,
    'septenary-color'  : #fff,
    'octonary-color'   : #3e3d3e,
    'nonary-color'     : #e6f9ff,
    'decenary-color'   : rgba(125, 223, 255, .16862745098039217)
  )
);