Add "navbar-themed" class to use CSS variables in navigation

app/assets/stylesheets/_variables.scss

@@ -7,7 +7,32 @@ $card-border-width: 0;
 // List Groups
 $list-group-border-width: 0;
 
+// nProgress
+$nprogress-color: lighten($navbar-inverse-bg, 25%);
+
 :root {
   --background: #f0edf4;
-  --primary-text: #ffffff;
+  --card-bg: #ffffff;
+  --card-cap-bg: #f7f7f7;
+
+  /**
+   NOTE for all *-text variables
+   ----------------------------------------------
+   The text-variables are present as triplets
+   because in some places it's required to adjust
+   their transparency.
+
+   So, for general usage, use:
+   color: RGB(var(--*-text));
+
+   And for transparent usage, use:
+   color: rgba(var(--*-text), .7); 
+
+   The uppercase RGB is required because internally
+   SassC wants more than one argument for rgb(),
+   hence writing RGB() bypasses that check, but
+   browsers interpret it correctly.
+   */
+
+  --primary-text: 255, 255, 255;
 }

app/assets/stylesheets/overrides/_navbar.scss

@@ -0,0 +1,50 @@
+.navbar-themed {
+  .navbar-brand {
+    color: RGB(var(--primary-text));
+
+    &:hover,
+    &:focus {
+      color: RGB(var(--primary-text));
+    }
+  }
+
+  .navbar-nav {
+    .nav-link {
+      color: rgba(var(--primary-text), .5);
+
+      &:hover,
+      &:focus {
+        color: rgba(var(--primary-text), .75);
+      }
+
+      &.disabled {
+        color: rgba(var(--primary-text), .25);
+      }
+    }
+
+    .show > .nav-link,
+    .active > .nav-link,
+    .nav-link.show,
+    .nav-link.active {
+      color: RGB(var(--primary-text));
+    }
+  }
+
+  .navbar-toggler {
+    color: RGB(var(--primary-text));
+    border-color: RGB(var(--primary-text));
+  }
+
+  .navbar-toggler-icon {
+    background-image: escape-svg($navbar-dark-toggler-icon-bg);
+  }
+
+  .navbar-text {
+    color: RGB(var(--primary-text));
+    a,
+    a:hover,
+    a:focus {
+      color: RGB(var(--primary-text));
+    }
+  }
+}

app/views/navigation/_main.haml

@@ -1,4 +1,4 @@
-%nav.navbar.navbar-dark.navbar-expand-lg.bg-primary.fixed-top{role: "navigation"}
+%nav.navbar.navbar-themed.navbar-expand-lg.bg-primary.fixed-top{role: "navigation"}
   .container{class: ios_web_app? ? "ios-web-app" : ''}
     %a.navbar-brand{href: "/"}= APP_CONFIG['site_name']
     %button.navbar-toggler{"data-target" => "#j2-main-navbar-collapse", "data-toggle" => "collapse", type: "button"}