gitlab-org--gitlab-foss/app/assets/stylesheets/page_bundles/themes/_dark.scss

.ide.theme-dark {
  $border-color: #1d1f21;
  $highlight-accent: #fff;
  $text-color: #ccc;
  $background: #333;
  $background-hover: #2d2d2d;
  $highlight-background: #252526;
  $link-color: #428fdc;
  $footer-background: #060606;

  $input-border: #868686;
  $input-background: transparent;
  $input-color: $highlight-accent;

  $btn-default-background: transparent;
  $btn-default-border: #bfbfbf;
  $btn-default-hover-border: #d8d8d8;

  $btn-primary-background: #1068bf;
  $btn-primary-border: #428fdc;
  $btn-primary-hover-border: #63a6e9;

  $btn-success-background: #217645;
  $btn-success-border: #108548;
  $btn-success-hover-border: #2da160;

  $btn-disabled-border: rgba(223, 223, 223, 0.24);
  $btn-disabled-color: rgba(145, 145, 145, 0.48);

  $dropdown-background: #404040;
  $dropdown-hover-background: #525252;

  $diff-insert: rgba(155, 185, 85, 0.2);
  $diff-remove: rgba(255, 0, 0, 0.2);

  a:not(.btn) {
    color: $link-color;
  }

  h1,
  h2,
  h3,
  h4:not(.modal-title),
  h5,
  h6,
  code,
  .md table:not(.code),
  .md,
  .md p,
  .ide-view,
  .context-header > a,
  .ide-sidebar-link,
  .multi-file-tab-close,
  .ide-tree-header button,
  .ide-status-bar,
  input,
  textarea,
  .md-area.is-focused,
  .ide-entry-dropdown-toggle,
  .dropdown-menu li button,
  .ide-merge-request-project-path,
  .dropdown-menu-selectable li a.is-active,
  .dropdown-menu-inner-title,
  .dropdown-menu-inner-content,
  .nav-links:not(.quick-links) li:not(.md-header-toolbar) a,
  .nav-links:not(.quick-links) li:not(.md-header-toolbar) a:hover,
  .nav-links:not(.quick-links) li:not(.md-header-toolbar) a.active .badge.badge-pill,
  .nav-links:not(.quick-links) li:not(.md-header-toolbar) a:hover .badge.badge-pill,
  .badge.badge-pill,
  .ide-navigator-button,
  .bs-callout,
  .ide-navigator-btn,
  .ide-pipeline .top-bar,
  .ide-pipeline .top-bar .controllers .controllers-buttons {
    color: $text-color;
  }

  .drag-handle:hover,
  .card-header .badge.badge-pill {
    background-color: $dropdown-hover-background;
  }

  .modal-body {
    color: $gl-text-color;
  }

  .dropdown-menu-toggle svg,
  .dropdown-menu-toggle svg:hover,
  .ide-tree-header:not(.ide-pipeline-header) svg,
  .file-row .file-row-icon svg,
  .file-row:hover .file-row-icon svg,
  .controllers-buttons svg {
    fill: $text-color;
  }

  .ide-pipeline svg {
    --svg-status-bg: $background;
  }

  .multi-file-tab-close:hover {
    background-color: $input-border;
  }

  .ide-review-sub-header:hover {
    color: $input-border;
  }

  .text-secondary {
    color: $text-color !important;
  }

  input[type='search']::placeholder,
  input[type='text']::placeholder,
  textarea::placeholder,
  .dropdown-input .fa {
    color: $input-border;
  }

  .ide-nav-form .input-icon {
    fill: $input-border;
  }

  .ide-staged-action-btn {
    background-color: transparent;
  }

  code,
  .multi-file-commit-panel,
  .multi-file-tabs,
  .multi-file-tabs li,
  .file-row:hover,
  .file-row:focus,
  .multi-file-commit-list-path:hover,
  .multi-file-commit-list-path:focus,
  .multi-file-commit-list-path.is-active,
  .file-row.is-active,
  .ide-commit-editor-header,
  .ide-file-templates,
  .ide-entry-dropdown-toggle,
  .ide-staged-action-btn,
  .badge.badge-pill,
  .card-header,
  .bs-callout,
  .ide-pipeline .top-bar,
  .ide-terminal .top-bar {
    background-color: $background;
  }

  pre code {
    background-color: inherit;
  }

  .bs-callout {
    border-color: $dropdown-background;

    code {
      background-color: $dropdown-background;
    }
  }

  .nav-links:not(.quick-links) li:not(.md-header-toolbar) a:hover {
    border-color: $dropdown-hover-background;
  }

  .ide-sidebar-link:hover,
  .multi-file-tabs li {
    background-color: $background-hover;
  }

  .common-note-form .md-area {
    border-color: $input-border;
  }

  &,
  .md table:not(.code) tr th,
  .multi-file-commit-panel-inner-content,
  .multi-file-commit-form,
  .multi-file-tabs li.active,
  .ide-sidebar-link.active,
  .ide-sidebar-link.active::after,
  .ide-right-sidebar .multi-file-commit-panel-inner,
  .common-note-form .md-area,
  .ide-commit-message-field,
  .card,
  .multi-file-commit-panel-success-message,
  .ide-preview-header {
    background-color: $highlight-background;
  }

  .multi-file-commit-panel {
    padding-right: 0;
  }

  .ide-mode-tabs,
  .multi-file-commit-panel-inner,
  .multi-file-commit-panel-inner-content,
  .multi-file-commit-form,
  .multi-file-edit-pane,
  .ide-right-sidebar .ide-activity-bar,
  .ide-sidebar-link.active,
  .multi-file-tabs li.active,
  .multi-file-tabs li,
  .ide-status-bar,
  .ide-commit-editor-header,
  .ide-file-templates,
  .card,
  .card-header,
  .ide-job-item:not(:last-child),
  .ide-terminal .top-bar,
  .ide-pipeline .top-bar {
    border-color: $border-color;
  }

  .md h1,
  .md h2,
  .md blockquote,
  pre,
  .md table:not(.code) tbody td,
  .md table:not(.code) tr th,
  .multi-file-commit-form > .commit-form-compact,
  .ide-tree-header,
  .multi-file-commit-panel-header,
  .multi-file-commit-form > form,
  .multi-file-commit-form hr,
  .ide-commit-list-container.is-first,
  .multi-file-commit-form .nav-links:not(.quick-links),
  .ide-pipeline-list .nav-links:not(.quick-links),
  .ide-preview-header {
    border-color: $background;
  }

  .multi-file-tabs li.active {
    border-bottom-color: $highlight-background;
  }

  .multi-file-tabs,
  .ide-commit-editor-header {
    box-shadow: inset 0 -1px $border-color;
  }

  .ide-sidebar-link.active {
    color: $highlight-accent;
    box-shadow: inset 3px 0 $highlight-accent;

    &.is-right {
      box-shadow: inset -3px 0 $highlight-accent;
    }
  }

  .nav-links li.active a,
  .nav-links li a.active {
    border-color: $highlight-accent;
    color: $text-color;
  }

  .avatar-container {
    &,
    .avatar {
      color: $text-color;
      background-color: $highlight-background;
      border-color: $highlight-background;
    }
  }

  .ide-status-bar {
    background-color: $footer-background;
  }

  input[type='text'],
  input[type='search'],
  .filtered-search-box {
    border-color: $input-border;
    background: $input-background !important;
  }

  input[type='text'],
  input[type='search'],
  .filtered-search-box,
  textarea {
    color: $input-color !important;
  }

  .filtered-search-box input[type='search'] {
    border-color: transparent;
  }

  .filtered-search-token .value-container,
  .filtered-search-term .value-container {
    background-color: $dropdown-hover-background;

    color: $text-color;

    &:hover {
      background-color: $input-border;
    }
  }

  .ide-entry-dropdown-toggle:hover {
    background: $gray-800;
  }

  .btn:not(.btn-link):not([disabled]):hover {
    border-width: 2px;
    padding: 5px 9px;
  }

  .btn:not([disabled]).btn-sm:hover {
    padding: 3px 9px;
  }

  .btn:not([disabled]).btn-block:hover {
    padding: 5px 0;
  }

  .btn-inverted,
  .btn-default,
  .dropdown,
  .dropdown-menu-toggle {
    background-color: $input-background !important;
    color: $input-color !important;
    border-color: $btn-default-border;
  }

  .btn-inverted,
  .btn-default {
    &:hover,
    &:focus {
      border-color: $btn-default-hover-border !important;
    }
  }

  .dropdown,
  .dropdown-menu-toggle {
    &:hover,
    &:focus {
      background-color: $gray-900 !important;
      border-color: $gray-200 !important;
    }
  }

  .dropdown-menu {
    color: $text-color;
    border-color: $background;
    background-color: $dropdown-background;

    .divider,
    .nav-links:not(.quick-links) {
      background-color: $dropdown-hover-background;
      border-color: $dropdown-hover-background;
    }

    .nav-links li a.active {
      border-color: $highlight-accent;
    }

    .ide-nav-form .nav-links li a:not(.active) {
      background-color: $dropdown-background;
    }

    .nav-links:not(.quick-links) li:not(.md-header-toolbar) a {
      color: $text-color;

      &.active {
        color: $text-color;
      }
    }

    li > a:not(.disable-hover):hover,
    li > a:not(.disable-hover):focus,
    li button:not(.disable-hover):hover,
    li button:not(.disable-hover):focus,
    li button.is-focused {
      background-color: $dropdown-hover-background;
      color: $text-color;
    }
  }

  .dropdown-title,
  .dropdown-input {
    border-color: $dropdown-hover-background !important;
  }

  .btn-primary {
    background-color: $btn-primary-background;
    border-color: $btn-primary-border !important;

    &:hover,
    &:focus {
      border-color: $btn-primary-hover-border !important;
    }
  }

  .btn-success {
    background-color: $btn-success-background;
    border-color: $btn-success-border !important;

    &:hover,
    &:focus {
      border-color: $btn-success-hover-border !important;
    }
  }

  .btn[disabled] {
    background: $btn-default-background !important;
    border: 1px solid $btn-disabled-border !important;
    color: $btn-disabled-color !important;
  }

  .md-previewer,
  .md table:not(.code) tbody,
  .ide-empty-state {
    background-color: $border-color;
  }

  .ide-tree-header svg:focus,
  .ide-tree-header svg:hover {
    color: $blue-600;
  }

  .animation-container {
    [class^='skeleton-line-'] {
      background-color: $gray-800;

      &::after {
        background-image: linear-gradient(to right,
        $gray-800 0%,
        $gray-700 20%,
        $gray-800 40%,
        $gray-800 100%);
      }
    }
  }

  .idiff.addition {
    background-color: $diff-insert;
  }

  .idiff.deletion {
    background-color: $diff-remove;
  }
}

.navbar.theme-dark {
  border-bottom-color: transparent;
}

.theme-dark ~ .popover {
  box-shadow: none;
}