$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;
}

}