@require './recoConfig.styl'

color-mode(accountColor , colorName)
  .reco-theme-{colorName}
    input
      color accountColor!important;
    a.sidebar-link.active
      border-color: accountColor
      color accountColor!important;
    blockquote
      border-color: accountColor
    .search-box input
      border-color: accountColor!important;
      &:focus
        border-color: accountColor!important;
    .navbar
      box-shadow: $boxShadow
      .nav-links a:hover,
      .nav-links a.router-link-active,
      .nav-links a:hover .iconfont,
      .nav-links a.router-link-active .iconfont
        color accountColor!important;
    .home
      .hero
        .action-button
          background-color accountColor!important;
          color: #fff!important
      .footer
        a
          color accountColor!important;
      .home-blog
        .info-wrapper
          .num
            > div, >div i
              color accountColor!important;
    .abstract-wrapper .abstract-item .title
      a
        color accountColor!important;
      a:after
        background-color accountColor!important;
    .back-to-ceiling i
      color accountColor!important;
    .dropdown-wrapper .nav-dropdown .dropdown-item a.router-link-active::after
      border-left: 5px solid accountColor!important;
    .tags
      .tag-item.active, .tag-item:hover
        color accountColor!important;
    .timeline-wrapper .year-wrapper li:hover
      .title
        color accountColor!important;
      .date::before
        background: accountColor!important;
      .date
        color accountColor!important;
    .categories-wrapper
      .category-wrapper
        .category-item
          &:hover, &.active
            background accountColor!important
            a
              span.post-num
                color accountColor!important
    .color-picker
      .color-button
        .iconfont
          color accountColor!important;
    .fullscreen-wrapper
      .iconfont
        color accountColor!important;
    a
      color accountColor;
    a.sidebar-link, a.nav-link, a.dropdown-title
      color $textColor
    a.sidebar-link:hover
      color accountColor!important;
    .password-shadow
      .inputBox
        background: accountColor!important
        input
          color #fff!important
          &:focus~span
            color accountColor!important
        button
          border 1px solid accountColor!important
          color accountColor!important;
    .banniang-container
      .messageBox
        background-color lighten(accountColor, 50%)!important

    @media (min-width: 765px)
      .nav-item > a:not(.external):hover,
      .nav-item > a:not(.external).router-link-active
        border-color: accountColor!important;
    @media (max-width: 959px)
      .search-box input
        border-color: transparent!important;

for key, value in $themePicker
  color-mode(value, key)