
$themes: (
  default: (
    theme-white: $white,
    theme-dark: $dark,

    // Theme colours
    theme-primary: darken($primary-dark, 10%),
    theme-primary-light: lighten($primary, 75%),
    theme-secondary: $secondary-main,

    // UI element colors
    theme-border-color: darken($secondary-main, 10%),
    theme-td-sidebar-border-color: $td-sidebar-border-color,

    // Body
    theme-body-bg: darken($secondary-main, 5%),
    theme-body-color: $white,

    // Sidebar
    theme-td-sidebar-bg-color: desaturate($primary-dark, 10%),
    theme-td-sidebar-text-color: darken($secondary-text, 30%),
    theme-td-sidebar-link-color: darken($secondary-text, 10%),
    theme-td-sidebar-hover-color: saturate($primary-light, 10%),
    theme-td-sidebar-scroll-color: darken($primary-main, 10%),

    //Table of Contents
    theme-td-toc-text-color: darken($secondary-text, 10%),
    theme-td-toc-text-hover-color: $primary-light,
    theme-td-toc-bg-color: desaturate($primary-dark, 10%),
    theme-td-toc-border-color: $primary-highlight,

    // Links
    // Only affects text links and breadcrumbs, not the sidebars.
    theme-link-color: $primary-light,
    theme-link-decoration: none,
    theme-link-hover-color: lighten($link-color, 15%),
    theme-link-hover-decoration: none,
    theme-link-mod: desaturate($primary-highlight, 30%),

    // Navbar
    theme-navbar-color: rgba($white, 0.75),

    // Alerts
    theme-alert-bg-color: darken($secondary-main, 5%),
    alert-primary:    $primary,
    alert-secondary:  $secondary,
    alert-success:    $primary-light,
    alert-info:       $info,
    alert-warning:    $primary-highlight,
    alert-danger:     $danger,
    alert-light:      $light,
    alert-dark:       $dark,

    // Highlights (Mark)
    theme-mark-color: $mark-dark,

    // Quotes
    theme-quote-text-color: darken($secondary-text, 20%),
    theme-quote-background-color: $secondary-highlight-dark,
  ),

  light: (
    theme-white: $dark,
    theme-dark: $white,

    // Theme colours
    theme-primary: darken($primary-dark, 10%),
    theme-primary-light: lighten($primary-dark, 75%),
    theme-secondary: $secondary-main,

    // UI element colors
    theme-border-color: darken($secondary-light, 10%),
    theme-td-sidebar-border-color: $secondary-dark,

    // Body
    theme-body-bg: darken($white, 30%),
    theme-body-color: $primary-dark,

    // Sidebar
    theme-td-sidebar-bg-color: desaturate($primary-light, 30%),
    theme-td-sidebar-text-color: $primary-dark,
    theme-td-sidebar-link-color: darken($primary, 10%),
    theme-td-sidebar-hover-color: darken($primary-light, 30%),
    theme-td-sidebar-scroll-color: lighten($primary-main, 20%),

    // Table of Contents
    theme-td-toc-text-color: $secondary-text,
    theme-td-toc-text-hover-color: $primary-light,
    theme-td-toc-bg-color: saturate($primary-dark, 30%),
    theme-td-toc-border-color: $primary-highlight,

    // Links
    // Only affects text links and breadcrumbs, not the sidebars.
    theme-link-color: darken($primary-light, 20%),
    theme-link-decoration: none,
    theme-link-hover-color: lighten($link-color, 25%),
    theme-link-hover-decoration: none,
    theme-link-mod: darken($primary-highlight, 15%),

    // Navbar
    theme-navbar-color: rgba($black, 0.75),

    // Alerts
    theme-alert-bg-color: $gray-400,
    alert-primary:    $primary,
    alert-secondary:  $secondary,
    alert-success:    $green-dark,
    alert-info:       $blue-dark,
    alert-warning:    darken($primary-highlight, 10%),
    alert-danger:     $danger,
    alert-light:      $light,
    alert-dark:       $dark,

    // Highlights (Mark)
    theme-mark-color: $mark-light,

    // Quotes
    theme-quote-text-color: lighten($secondary-dark, 20%),
    theme-quote-background-color: $secondary-highlight-light,
  ),
);

@mixin themed() {
  @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;
    }
  }
}

@mixin themedBody() {
  @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 t($key) {
  @return map-get($theme-map, $key);
}

$theme-white:                    'theme-white';
$theme-dark:                     'theme-dark';
$theme-primary:                  'theme-primary';
$theme-primary-light:            'theme-primary-light';
$theme-secondary:                'theme-secondary';
$theme-border-color:             'theme-border-color';
$theme-td-sidebar-border-color:  'theme-td-sidebar-border-color';
$theme-body-bg:                  'theme-body-bg';
$theme-body-color:               'theme-body-color';
$theme-td-sidebar-bg-color:      'theme-td-sidebar-bg-color';
$theme-td-sidebar-text-color:    'theme-td-sidebar-text-color';
$theme-td-sidebar-link-color:    'theme-td-sidebar-link-color';
$theme-td-sidebar-hover-color:   'theme-td-sidebar-hover-color';
$theme-td-sidebar-scroll-color:  'theme-td-sidebar-scroll-color';
$theme-td-toc-text-color:        'theme-td-toc-text-color';
$theme-td-toc-text-hover-color:  'theme-td-toc-text-hover-color';
$theme-td-toc-bg-color:          'theme-td-toc-bg-color';
$theme-link-color:               'theme-link-color';
$theme-link-decoration:          'theme-link-decoration';
$theme-link-hover-color:         'theme-link-hover-color';
$theme-link-hover-decoration:    'theme-link-hover-decoration';
$theme-navbar-color:             'theme-navbar-color';
$theme-alert-bg-color:           'theme-alert-bg-color';
$theme-quote-text-color:         'theme-quote-text-color';
$theme-quote-background-color:   'theme-quote-background-color';
$theme-td-toc-border-color:      'theme-td-toc-border-color';
$theme-link-mod:                 'theme-link-mod';
$theme-mark-color:               'theme-mark-color';

body {
  @include themedBody() {
    color: t($theme-white);
    background-color: t($theme-dark);
  }
}
