Merge pull request #1 from andrewgormley/16647-navigation-contrast-issues

fixes #16647: navigation contrast issues

netbox/project-static/styles/_variables.scss

@@ -21,3 +21,13 @@ $hover-bg: rgba(var(--tblr-secondary-rgb), 0.08);
 
 // Ensure active nav-pill has a background color in dark mode
 $nav-pills-link-active-bg: rgba(var(--tblr-secondary-rgb), 0.15);
+
+// Colors
+$rich-black: #001423;
+$rich-black-light: #081B2A;
+$rich-black-lighter: #0D202E;
+$rich-black-lightest: #1A2C39;
+$bright-teal: #00F2D4;
+$dark-teal: #00857D;
+
+$primary: $dark-teal;

netbox/project-static/styles/overrides/_tabler.scss

@@ -36,6 +36,50 @@ pre {
 }
 
 table a {
-  // Adjust table anchor link contrast as not enough contrast in dark mode
+  color: $dark-teal;
-  filter: brightness(110%);
+}
+
+// Side navigation
+.navbar-vertical {
+  background-color: $rich-black;
+  .dropdown-item {
+    color: white!important;
+  }
+  .text-secondary {
+    color: $gray-400!important;
+  }
+}
+
+// Dark mode overrides
+body[data-bs-theme=dark] {
+
+  // Background colors to match brand colors
+  background-color: $rich-black;
+  .navbar, .page-header {
+    background-color: $rich-black;
+  }
+  .page, .page-tabs .nav-tabs .nav-link.active {
+    background-color: $rich-black-light;
+  }
+
+  // Adjust dark table link color without affecting buttons and badges
+  table {
+    a {
+      color: $bright-teal;
+    }
+    .badge a {
+      color: inherit;
+    }
+    .btn {
+      color: var(--#{$prefix}body-color);
+    }
+  }
+}
+
+// Dark mode colors
+@if $enable-dark-mode {
+  @include color-mode(dark, true) {
+    --#{$prefix}link-color: #{$bright-teal};
+    --#{$prefix}secondary: #{$gray-400};
+  }
 }