start using some css variables where we can

jsx/src/components/ServerDashboard/ServerDashboard.jsx

@@ -318,7 +318,7 @@ const ServerDashboard = (props) => {
       }, {});
     return (
       <ReactObjectTableViewer
-        className="table-striped table-bordered"
+        className="table table-striped table-bordered"
         style={{
           padding: "3px 6px",
           margin: "auto",

share/jupyterhub/static/scss/cssvariables.css

@@ -0,0 +1,20 @@
+/* CSS variables
+ note: SCSS variable overrides must be loaded _before_ bootstrap (variables.scss)
+ while CSS variable overrides must be loaded _after_ bootstrap (cssvariables.scss)
+*/
+
+.navbar {
+  /* higher contrast nav links by default */
+  --bs-navbar-color: rgba(black, 0.9);
+}
+
+.navbar-nav {
+  /* no color change on nav links 
+    darken background on hover, no change to text
+    background part is in page.scss
+  */
+
+  --bs-nav-link-color: var(--bs-navbar-color);
+  --bs-nav-link-hover-color: var(--bs-nav-link-color);
+  --bs-nav-link-active-color: var(--bs-nav-link-color);
+}

share/jupyterhub/static/scss/style.scss

@@ -39,6 +39,9 @@
 // 7. Optionally include utilities API last to generate classes based on the Sass map in `_utilities.scss`
 // @import "../components/bootstrap/scss/utilities/api";
 
+// CSS variables must be loaded _after_ bootstrap to override
+@import "./cssvariables";
+
 // redefine .btn-xs, removed in bootstrap 4
 .btn-xs {
   // $padding-y, $padding-x, $font-size, $border-radius

share/jupyterhub/static/scss/variables.scss

@@ -1,10 +1,4 @@
 $border-radius-large: 5px;
-$navbar-height: 40px;
-
-// darken background on hover, no change to text
-// background part is in page.scss
-$nav-link-color: var(--bs-navbar-color);
-$nav-link-hover-color: $nav-link-color;
 
 $jupyter-orange: #f37524;
 $jupyter-red: #e34f21;