html[data-theme='dark'] {
  .header {
    background-color: rgba($lbry-black, 0.9);
  }

  .header__navigation {
    button {
      background-color: transparent !important; // TODO: Fix
      color: $lbry-white !important; // TODO: Fix
    }
  }

  .wunderbar > .icon {
    color: $lbry-gray-5;
  }

  .wunderbar__active-suggestion {
    background-color: $lbry-blue-4;
    color: inherit;
  }

  .wunderbar__input {
    background-color: rgba($lbry-white, 0.1);
    color: $lbry-white;

    &:focus {
      background-color: rgba($lbry-white, 0.9);
      color: $lbry-black;
    }
  }

  .wunderbar__menu {
    background-color: $lbry-gray-5;
    color: $lbry-white;
    top: 3rem;
  }

  .nav {
    background-color: rgba($lbry-white, 0.05);

    hr {
      border-color: $lbry-gray-5;
    }
  }

  .nav__link .btn:hover {
    color: $lbry-teal-5;
  }

  .nav__link--active {
    color: $lbry-teal-3;
  }

  .page {
    background-color: $lbry-black;
    color: $lbry-gray-1;
  }

  input.input-copyable {
    background-color: rgba($lbry-white, 0.1);
    color: $lbry-white;
  }

  .card__title {
    color: inherit;
  }

  .card--placeholder {
    background-color: rgba($lbry-white, 0.1);
  }

  .card--section {
    background-color: rgba($lbry-white, 0.1);
  }

  .content__cover:not(.card__media--nsfw),
  .card__media {
    background-color: rgba($lbry-white, 0.1);
  }

  .card__media--nsfw {
    background-color: rgba($lbry-red-1, 0.1);
  }

  //
  // BUTTON
  //
  .btn {
    &.btn--alt:not(:disabled) {
      background-color: rgba($lbry-white, 0.1);
      color: $lbry-gray-1;
    }

    &.btn--primary:disabled {
      background-color: rgba($lbry-teal-5, 0.15);
    }
  }

  //
  // SEARCH
  //
  .search__top {
    background-color: rgba($lbry-white, 0.15);
  }

  //
  // TABLE
  //
  table.table,
  .markdown-preview table {
    thead {
      border-bottom: 1px solid rgba($lbry-gray-1, 0.1);
    }

    tbody {
      tr {
        border-bottom: 1px solid rgba($lbry-gray-1, 0.1);

        &:nth-child(even) {
          background-color: rgba($lbry-gray-1, 0.1);
        }
      }
    }
  }

  //
  // ITEM LIST
  //
  .item-list {
    background-color: rgba($lbry-white, 0.1);
  }

  .item-list__item--selected {
    background-color: $lbry-black;
    color: $lbry-white;
  }

  .item-list__item:not(:last-of-type) {
    border-bottom: 1px solid rgba($lbry-gray-1, 0.1);
  }

  .modal-overlay,
  .error-modal-overlay {
    background-color: rgba($lbry-black, 0.7);
  }

  .modal {
    background-color: rgba($lbry-black, 0.9);
    border: 1px solid rgba($lbry-gray-1, 0.1);
    color: $lbry-gray-3;
  }

  // Markdown editor on publish page
  .form-field--SimpleMDE {
    .editor-toolbar {
      background-color: rgba($lbry-white, 0.2);

      a {
        color: $lbry-white !important; // We need to use !important to override the CodeMirror styles

        &:hover {
          color: $lbry-black !important;
        }
      }

      &.disabled-for-preview {
        a:not(.no-disable) {
          background-color: transparent;
        }

        // The markdown preview button is highlighted during preview when the other buttons are disabled
        a.no-disable {
          background-color: rgba($lbry-white, 0.3);
        }
      }
    }

    .CodeMirror {
      border-left: 1px solid rgba($lbry-white, 0.2);
      border-right: 1px solid rgba($lbry-white, 0.2);
      border-bottom: 1px solid rgba($lbry-white, 0.2);
      background-color: rgba($lbry-white, 0.1);
      color: $lbry-white;

      .CodeMirror-selectedtext {
        color: $lbry-black;
      }

      .editor-preview.editor-preview-active {
        background-color: $lbry-gray-5;
        color: $lbry-black;
      }
    }
  }
}