1 files changed, 116 insertions, 0 deletions
diff --git a/app/assets/stylesheets/themes/dark_mode_overrides.scss b/app/assets/stylesheets/themes/dark_mode_overrides.scss
new file mode 100644
index 00000000000..b77048174c9
--- /dev/null
+++ b/app/assets/stylesheets/themes/dark_mode_overrides.scss
@@ -0,0 +1,116 @@
+@import './themes/dark';
+@import 'page_bundles/mixins_and_variables_and_functions';
+@import './themes/theme_helper';
+
+// 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 {
+  li.active {
+    box-shadow: none;
+  }
+
+  .sidebar-sub-level-items.fly-out-list {
+    box-shadow: none;
+    border: 1px solid $border-color;
+  }
+}
+
+body.gl-dark {
+  @include gitlab-theme($gray-900, $gray-400, $gray-500, $gray-800, $gray-900, $white);
+
+  .logo-text svg {
+    fill: var(--gl-text-color);
+  }
+
+  .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);
+        }
+      }
+    }
+  }
+
+  .md :not(pre.code) > code {
+    background-color: $gray-200;
+  }
+}