_theme-dark.scss

$dark-100: $dark;
$dark-300: #2c3032;
$dark-600: #242526;
$dark-900: #17191a;

[data-theme="dark"] {
  body {
    background-color: $dark-900;
    color: $text-white;
  }

  // Code blocks & Syntax highlighting

  @import "native.scss";

  pre,
  code.highlighter-rouge {
    @extend .highlight;
    border: none;
  }

  .gist {
    filter: invert(90%) hue-rotate(180deg);
  }

  // Inputs
  input {
    background-color: $dark-300;
    border-color: $dark-100;
    color: $dark-900;

    &::placeholder {
      color: rgba($text-white, 0.64);
    }

    &:focus {
      background-color: $dark-600;
      color: $text-white;
    }
  }

  // Cards
  .card {
    background-color: $dark-600;
  }

  .card.border {
    .card-footer {
      background-color: rgba(0, 0, 0, 0.1);
    }
  }

  // Tables
  table:not(.highlight) {
    td {
      border-color: $dark-600;
    }

    tr:nth-child(even) {
      background-color: $dark;
    }
  }

  // Lists
  .list-group-item-action {
    background-color: $dark-600;
    color: $text-white;

    &:hover,
    &:focus {
      background-color: darken($color: $dark-600, $amount: 3);
    }
  }

  // Post
  .post footer {
    text-decoration: none;
  }

  // Timeline 
  .timeline-body .timeline-item:after{
    background-color: $dark-900;
  }
}