debian-mirror-gitlab/app/assets/stylesheets/themes/dark_mode_overrides.scss

@import './themes/dark';
@import 'page_bundles/mixins_and_variables_and_functions';
@import './themes/theme_helper';

:root {
  color-scheme: dark;
  --gray-10: #{$gray-10};
  --gray-50: #{$gray-50};
  --gray-100: #{$gray-100};
  --gray-200: #{$gray-200};
  --gray-300: #{$gray-300};
  --gray-400: #{$gray-400};
  --gray-500: #{$gray-500};
  --gray-600: #{$gray-600};
  --gray-700: #{$gray-700};
  --gray-800: #{$gray-800};
  --gray-900: #{$gray-900};
  --gray-950: #{$gray-950};

  --green-50: #{$green-50};
  --green-100: #{$green-100};
  --green-200: #{$green-200};
  --green-300: #{$green-300};
  --green-400: #{$green-400};
  --green-500: #{$green-500};
  --green-600: #{$green-600};
  --green-700: #{$green-700};
  --green-800: #{$green-800};
  --green-900: #{$green-900};
  --green-950: #{$green-950};

  --blue-50: #{$blue-50};
  --blue-100: #{$blue-100};
  --blue-200: #{$blue-200};
  --blue-300: #{$blue-300};
  --blue-400: #{$blue-400};
  --blue-500: #{$blue-500};
  --blue-600: #{$blue-600};
  --blue-700: #{$blue-700};
  --blue-800: #{$blue-800};
  --blue-900: #{$blue-900};
  --blue-950: #{$blue-950};

  --orange-50: #{$orange-50};
  --orange-100: #{$orange-100};
  --orange-200: #{$orange-200};
  --orange-300: #{$orange-300};
  --orange-400: #{$orange-400};
  --orange-500: #{$orange-500};
  --orange-600: #{$orange-600};
  --orange-700: #{$orange-700};
  --orange-800: #{$orange-800};
  --orange-900: #{$orange-900};
  --orange-950: #{$orange-950};

  --red-50: #{$red-50};
  --red-100: #{$red-100};
  --red-200: #{$red-200};
  --red-300: #{$red-300};
  --red-400: #{$red-400};
  --red-500: #{$red-500};
  --red-600: #{$red-600};
  --red-700: #{$red-700};
  --red-800: #{$red-800};
  --red-900: #{$red-900};
  --red-950: #{$red-950};

  --indigo-50: #{$indigo-50};
  --indigo-100: #{$indigo-100};
  --indigo-200: #{$indigo-200};
  --indigo-300: #{$indigo-300};
  --indigo-400: #{$indigo-400};
  --indigo-500: #{$indigo-500};
  --indigo-600: #{$indigo-600};
  --indigo-700: #{$indigo-700};
  --indigo-800: #{$indigo-800};
  --indigo-900: #{$indigo-900};
  --indigo-950: #{$indigo-950};

  --purple-50: #{$purple-50};
  --purple-100: #{$purple-100};
  --purple-200: #{$purple-200};
  --purple-300: #{$purple-300};
  --purple-400: #{$purple-400};
  --purple-500: #{$purple-500};
  --purple-600: #{$purple-600};
  --purple-700: #{$purple-700};
  --purple-800: #{$purple-800};
  --purple-900: #{$purple-900};
  --purple-950: #{$purple-950};

  --dark-icon-color-purple-1: #524a68;
  --dark-icon-color-purple-2: #715bae;
  --dark-icon-color-purple-3: #9a79f7;
  --dark-icon-color-orange-1: #665349;
  --dark-icon-color-orange-2: #b37a5d;

  --gl-text-color: #{$gray-900};
  --border-color: #{$border-color};

  --white: #{$white};
  --black: #{$black};
  --gray-light: #{$gray-50};

  --svg-status-bg: #{$white};
}

body.gl-dark {
  // redefine some colors and values to prevent sourcegraph conflicts
  color-scheme: dark;
  --gray-10: #{$gray-10};
  --border-color: #{$border-color};
  --white: #{$white};
  --black: #{$black};
}

.gl-dark {
  .gl-button.gl-button,
  .gl-button.gl-button.btn-block {
    &.btn-default,
    &.btn-dashed,
    &.btn-info,
    &.btn-success,
    &.btn-danger,
    &.btn-confirm {
      &-tertiary {
        mix-blend-mode: screen;
      }
    }
  }

  .gl-datepicker-theme {
    .pika-prev,
    .pika-next {
      filter: invert(0.9);
    }

    .is-selected > .pika-button {
      color: $gray-900;
    }

    :not(.is-selected) > .pika-button:hover {
      background-color: $gray-200;
    }
  }
}

// Some hacks and overrides for things that don't properly support dark mode
.gl-label {
  filter: brightness(0.9) contrast(1.1);

  // This applies to the gl-label markups
  // rendered and cached in the backend (labels_helper.rb)
  &.gl-label-scoped {
    .gl-label-text-scoped,
    .gl-label-close {
      color: $gray-900;
    }
  }
}

// white-ish text for light labels
.gl-label-text-light.gl-label-text-light {
  color: $gray-900;
}

.gl-label-text-dark.gl-label-text-dark {
  color: $gray-10;
}

// This applies to "gl-labels" from "gitlab-ui"
.gl-label.gl-label-scoped.gl-label-text-dark,
.gl-label.gl-label-scoped.gl-label-text-light {
  .gl-label-text-scoped,
  .gl-label-close {
    color: $gray-900;
  }
}

// duplicated class as the original .atwho-view style is added later
.atwho-view.atwho-view {
  background-color: $white;
  color: $gray-900;
  border-color: $gray-800;
}

.nav-sidebar,
.toggle-sidebar-button,
.close-nav-button {
  background-color: darken($gray-50, 4%);
  border-right: 1px solid $gray-50;
}

.gl-avatar:not(.gl-avatar-identicon),
.avatar-container,
.avatar {
  background: rgba($gray-950, 0.04);
}

.gl-avatar {
  @include gl-border-none;
  box-shadow: inset 0 0 0 1px rgba($gray-950, $gl-avatar-border-opacity);
}

.nav-sidebar {
  .sidebar-sub-level-items.fly-out-list {
    box-shadow: none;
    border: 1px solid $border-color;
  }
}

aside.right-sidebar:not(.right-sidebar-merge-requests) {
  background-color: $gray-10;
  border-left-color: $gray-50;
}

body.gl-dark {
  @include gitlab-theme($gray-900, $gray-400, $gray-500, $gray-900, $white);

  .terms {
    .logo-text {
      fill: var(--black);
    }
  }


  .navbar-gitlab {
    background-color: var(--gray-50);
    box-shadow: 0 1px 0 0 var(--gray-100);

    .navbar-sub-nav,
    .navbar-nav {
      li {
        > a:hover,
        > a:focus,
        > button:hover,
        > button:focus {
          color: var(--gl-text-color);
          background-color: var(--gray-200);
        }
      }

      li.active,
      li.dropdown.show {
        > a,
        > button {
          color: var(--gl-text-color);
          background-color: var(--gray-200);
        }
      }
    }

    .header-search {
      background-color: var(--gray-100) !important;
      box-shadow: inset 0 0 0 1px var(--border-color) !important;

      &:active,
      &:hover {
        background-color: var(--gray-100) !important;
        box-shadow: inset 0 0 0 1px var(--blue-200) !important;
      }
    }

    .search {
      form {
        background-color: var(--gray-100);
        box-shadow: inset 0 0 0 1px var(--border-color);

        &:active,
        &:hover {
          background-color: var(--gray-100);
          box-shadow: inset 0 0 0 1px var(--blue-200);
        }

        .search-input {
          color: var(--gl-text-color);
        }
      }
    }
  }

  .md :not(pre.code) > code {
    background-color: $gray-200;
  }
}

.timeline-entry.internal-note:not(.note-form) .timeline-content,
.timeline-entry.draft-note:not(.note-form) .timeline-content {
  // soften on darkmode
  background-color: mix($gray-50, $orange-50, 75%) !important;
}