session-desktop/stylesheets/_theme_dark.scss

.dark-theme {
  // _debugLog

  .debug-log {
    &.modal {
      .content {
        textarea {
          background-color: $color-dark-85;
          border: 1px solid $color-dark-60;
          color: $color-dark-05;
        }
      }
    }

    .result {
      .open {
        border: solid 1px $color-dark-60;
        background-color: $color-dark-85;
        color: $color-dark-05;

        &:before {
          @include header-icon-white('../images/open_link.svg');
        }
      }

      .link {
        color: $color-dark-05;
        border: solid 1px $color-dark-60;
        border-right: none;
        background-color: $color-dark-85;
      }
    }
  }

  // _global

  .dark-overlay {
    background-color: $color-gray-95;
  }

  .title-bar {
    color: $color-dark-05;
  }

  button.grey {
    border: solid 1px #ccc;
    color: $grey;
    background: $grey_l;
    box-shadow: 0 0 10px -5px rgba($grey, 0.5);

    &:hover {
      box-shadow: 0 0 10px -3px rgba($grey, 0.7);
    }
  }

  .recipients-input {
    .recipients-container {
      background-color: white;
      border-bottom: 1px solid #f2f2f2;
    }

    .recipient {
      background-color: $blue;
      color: white;

      &.error {
        background-color: #f00;
      }
    }

    .results {
      box-shadow: 0px 0px 1px rgba(#aaa, 0.8);
    }
  }

  .loading {
    position: relative;
    &::before {
      border: solid 3px;
      border-color: $blue_l $blue_l $grey_l $grey_l !important;
    }
  }

  .x {
    &:before {
      @include color-svg('../images/x.svg', white);
    }
  }

  input.search {
    border: 1px solid $color-light-60;
    color: $color-dark-05;
    background-color: $color-gray-95;

    &:focus {
      outline: solid 1px $blue;
    }
  }

  .last-timestamp {
    color: $grey;
  }

  .index {
    .gutter .timestamp {
      color: $grey;
    }
  }

  .hint {
    color: white;
    border: 2px dashed white;

    &.firstRun {
      &:before,
      &:after {
        border: solid 10px white;
        border-color: transparent white transparent transparent;
      }
      &:after {
        border-color: transparent #2eace0 transparent transparent;
      }
    }
  }

  .contact.placeholder {
    color: white;
    border: 2px dashed white;
    p {
      color: white;
    }
    &:before,
    &:after {
      border: solid 10px white;
      border-color: transparent transparent white transparent;
    }
    &:after {
      border-color: transparent transparent #2eace0 transparent;
    }
  }
  // _modal

  .modal {
    background-color: rgba(0, 0, 0, 0.3);

    .content {
      background-color: $color-gray-95;
      box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.2);
    }
  }

  // _modules

  // Module: Message

  .module-message__error {
    @include color-svg('../images/error.svg', $session-color-danger);
  }

  .module-message__img-border-overlay {
    box-shadow: inset 0px 0px 0px 1px $color-white-015;
  }

  .module-message__img-overlay {
    background-image: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0),
      rgba(0, 0, 0, 0) 9%,
      rgba(0, 0, 0, 0.02) 17%,
      rgba(0, 0, 0, 0.05) 24%,
      rgba(0, 0, 0, 0.08) 31%,
      rgba(0, 0, 0, 0.12) 37%,
      rgba(0, 0, 0, 0.16) 44%,
      rgba(0, 0, 0, 0.2) 50%,
      rgba(0, 0, 0, 0.24) 56%,
      rgba(0, 0, 0, 0.28) 63%,
      rgba(0, 0, 0, 0.32) 69%,
      rgba(0, 0, 0, 0.35) 76%,
      rgba(0, 0, 0, 0.38) 83%,
      rgba(0, 0, 0, 0.4) 91%,
      rgba(0, 0, 0, 0.4)
    );
  }

  .module-message__broken-image {
    color: $color-dark-05;
  }

  .module-message__broken-image--incoming {
    color: $color-white;
  }

  .module-message__video-overlay__circle {
    background-color: $color-white;
  }

  .module-message__video-overlay__play-icon {
    @include color-svg('../images/play.svg', $color-loki-green);
  }

  .module-message__broken-video-screenshot {
    color: $color-dark-05;
  }

  .module-message__link-preview__content {
    background-color: $color-gray-95;
    border: 1px solid $color-gray-60;
  }

  .module-message__link-preview__content--with-content-above {
    border-top: none;
    border-bottom: none;
  }

  .module-message__link-preview__title {
    color: $color-gray-05;
  }

  .module-message__link-preview__location {
    color: $color-gray-25;
  }

  // Module: Embedded Contact

  .module-embedded-contact__contact-name {
    color: $color-dark-05;
  }

  .module-embedded-contact__contact-name--incoming {
    color: $color-white;
  }

  .module-embedded-contact__contact-method {
    color: $color-white-07;
  }

  .module-embedded-contact__contact-method--incoming {
    color: $color-white-07;
  }

  // Module: Contact Detail

  .module-contact-detail__send-message {
    background-color: $blue;
    color: $color-white;
  }

  .module-contact-detail__additional-contact {
    border-top: 1px solid $color-dark-70;
  }

  .module-contact-detail__additional-contact__type {
    color: $color-light-45;
  }

  // Module: Group Notification

  .module-group-notification {
    color: $color-dark-30;
  }

  // Module: Reset Session Notification

  .module-reset-session-notification {
    color: $color-dark-30;
  }

  .module-verification-notification__button {
    color: $color-loki-green;
    background-color: $color-gray-75;
  }

  // Module: Verification Notification

  .module-verification-notification {
    color: $color-dark-30;
  }

  // Module: Timer Notification

  .module-timer-notification {
    color: $color-dark-30;
  }

  .module-timer-notification__icon {
    @include color-svg('../images/timer.svg', $color-dark-30);
  }

  .module-timer-notification__icon--disabled {
    @include color-svg('../images/timer-disabled.svg', $color-dark-30);
  }

  // Module: Contact List Item

  .module-contact-list-item {
    color: $color-dark-30;
  }

  // Module: Message Detail

  .module-message-detail__delete-button {
    background-color: $session-color-danger;
    color: $color-white;
    box-shadow: 0 0 10px -3px rgba(97, 97, 97, 0.7);
    border: solid 1px $color-light-35;
  }

  .module-message-detail__contact__error {
    color: $session-color-danger;
  }

  // Module: Media Gallery

  .module-media-gallery__tab {
    background-color: $color-dark-85;
  }

  .module-media-gallery__tab--active {
    border-bottom: 2px solid $color-loki-green;
  }

  // Module: Document List Item

  .module-document-list-item--with-separator {
    border-bottom: 1px solid $color-dark-70;
  }

  .module-document-list-item__icon {
    @include color-svg('../images/file.svg', $color-dark-60);
  }

  // Module: Media Grid Item

  .module-media-grid-item {
    background-color: $color-dark-85;
  }

  .module-media-grid-item__icon-image {
    @include color-svg('../images/image.svg', $color-dark-60);
  }

  .module-media-grid-item__icon-video {
    @include color-svg('../images/movie.svg', $color-dark-60);
  }

  .module-media-grid-item__icon-generic {
    @include color-svg('../images/file.svg', $color-dark-60);
  }

  // Module: Empty State

  .module-empty-state {
    color: $color-dark-55;
  }
  // Module: Conversation List Item

  .module-conversation-list-item--is-selected {
    background-color: $color-dark-70;
  }

  .module-conversation-list-item__unread-count {
    color: $color-white;
    background-color: $color-loki-green;
    box-shadow: 0px 0px 0px 1px $color-dark-85;
  }

  .module-conversation-list-item__header__name {
    color: $color-gray-05;
  }

  .module-conversation-list-item__header__date--has-unread {
    color: $color-gray-05;
  }

  .module-conversation-list-item__message__text {
    color: $color-gray-25;
  }

  .module-conversation-list-item__message__text--has-unread {
    color: $color-gray-05;
  }

  // Module: Main Header

  .module-main-header__search__input {
    background-color: $color-gray-95;
    border-radius: 14px;
    border: solid 1px $color-gray-75;
    color: $color-gray-05;

    &::placeholder {
      color: $color-gray-45;
    }

    &:focus {
      border: solid 1px blue;
      outline: none;
    }
  }

  // Module: Image

  .module-image {
    background-color: $color-black;
  }

  .module-image__border-overlay {
    box-shadow: inset 0px 0px 0px 1px $color-white-015;
  }

  .module-image__loading-placeholder {
    background-color: $color-white-015;
  }

  // Module: Typing Animation

  .module-typing-animation__dot {
    background-color: $color-white;
  }

  .module-typing-animation__dot--light {
    background-color: $color-white;
  }

  // Module: Attachments

  .module-attachments {
    border-top: 1px solid $color-gray-75;
  }

  .module-attachments__close-button {
    @include color-svg('../images/x-16.svg', $color-gray-45);
  }

  // Module: Staged Generic Attachment

  .module-staged-generic-attachment {
    box-shadow: inset 0px 0px 0px 1px $color-gray-45;
    background-color: $color-gray-75;
    color: $color-dark-05;
  }

  .module-staged-generic-attachment__close-button {
    @include color-svg('../images/x.svg', $color-gray-45);
  }

  .module-staged-generic-attachment__icon {
    background: url('../images/file-gradient.svg') no-repeat center;
  }

  .module-staged-generic-attachment__icon__extension {
    color: $color-gray-90;
  }

  // Module: Staged Placeholder Attachment

  .module-staged-placeholder-attachment {
    border: 1px solid $color-gray-60;

    &:hover {
      background: $color-gray-75;
    }
  }

  .module-staged-placeholder-attachment__plus-icon {
    @include color-svg('../images/plus-36.svg', $color-gray-60);
  }

  // Module: Staged Link Preview

  .module-staged-link-preview__loading {
    color: $color-gray-25;
  }
  .module-staged-link-preview__title {
    color: $color-gray-05;
  }
  .module-staged-link-preview__location {
    color: $color-gray-25;
  }
  .module-staged-link-preview__close-button {
    @include color-svg('../images/x-16.svg', $color-gray-25);
  }

  // Module: Spinner

  .module-spinner__circle {
    background-color: $color-white-04;
  }

  .module-search-results__conversations-header {
    color: $color-gray-05;
  }
  .module-search-results__contacts-header {
    color: $color-gray-05;
  }
  .module-search-results__messages-header {
    color: $color-gray-05;
  }

  // Module: Message Search Result

  .module-message-search-result {
    &:hover {
      background-color: $color-dark-70;
    }
  }

  .module-message-search-result--is-selected {
    background-color: $color-dark-70;
  }

  .module-message-search-result__header__from {
    color: $color-gray-05;
  }

  .module-message-search-result__header__timestamp {
    color: $color-gray-25;
  }

  .module-message-search-result__body {
    color: $color-gray-05;
  }
}