16649 general contrast issues (#16759)

* fixes #16647: navigation contrast issues updated

* fixes #16651: table contrast issues new

* fixed #16649: general contrast issues

* fixes #16649: feedback changes

---------

Co-authored-by: Andrew Gormley <Andrew@MacBook-Pro-3.local>
Co-authored-by: Andrew Gormley <Andrew@MacBook-Pro-3.broadband>

netbox/project-static/styles/_variables.scss

@@ -21,3 +21,16 @@ $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;
+
+// Navbar active dropdown border color
+$navbar-active-border-color: $bright-teal;

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

@@ -35,12 +35,76 @@ pre {
   display: inline-block;;
 }
 
-table a {
+table th.orderable a {
-  // Adjust table anchor link contrast as not enough contrast in dark mode
+  color: var(--#{$prefix}body-color);
-  filter: brightness(110%);
 }
 
 // Override background color alpha value
 [data-bs-theme=dark] ::selection {
   background-color: rgba(var(--tblr-primary-rgb),.48)
 }
+
+// Dark mode colors
+@if $enable-dark-mode {
+  @include color-mode(dark, true) {
+    --#{$prefix}alert-color: darken(var(--#{$prefix}warning),10%);
+    --#{$prefix}link-color: #{$bright-teal};
+    --#{$prefix}secondary: #{$gray-400};
+  }
+}
+
+// Slightly increase alert contrast between bg and text
+.alert {
+  background: var(--#{$prefix}bg-surface);
+}
+
+// Altering background colors
+.page, .page-tabs .nav-tabs .nav-link.active {
+  background-color: var(--#{$prefix}bg-surface-tertiary)!important;
+}
+.page-body .card .card-header {
+  background: var(--tblr-bg-surface-secondary)!important;
+}
+
+.footer .text-primary {
+  color: $rich-black!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!important;
+  }
+
+  // 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);
+    }
+  }
+
+  // Adjusting text colors
+  .text- {
+    &muted {
+      color: var(--#{$prefix}secondary-color) !important;
+    }
+    &secondary {
+      color: $gray-400!important;
+    }
+  }
+  .footer .text-primary {
+    color: white!important;
+  }
+}

netbox/project-static/styles/transitional/_navigation.scss

@@ -1,5 +1,13 @@
 // Navbar styling
 .navbar-vertical.navbar-expand-lg {
+  background-color: $rich-black;
+  .dropdown-item {
+    color: white!important;
+  }
+  .text-secondary {
+    color: $bright-teal!important;
+  }
+
   .navbar-collapse {
     .dropdown-menu {
       .dropdown-item {