// Dark Theme

$dark-bg-1: #17171A;
$color-bg-2: #393A3C;
$color-bg-3: #2a2a2b;
$color-bg-4: #313132;
$color-bg-5: #373739;

$--color-text-1: rgba(255, 255, 255, 0.9);
$--color-text-2: rgba(255, 255, 255, 0.7);
$--color-text-3: rgba(255, 255, 255, 0.5);
$--color-text-4: rgba(255, 255, 255, 0.3);

body[arco-theme='dark'] {
  .navbar {
    background-color: $dark-bg-1;
  }
  .arco-layout-content {
    background-color: $color-bg-2
  }
  .app-container {
    background-color: $color-bg-3;
  }
  .navbar {
    border-bottom: 1px solid $--color-text-4;
    .left-side {
      // background-color: $color-bg-2;
      color: $--color-text-1;
      &:hover {
        background-color: $color-bg-5;
      }
    }
  }
}