Automatically set navbar light/dark based on color (daattali#702)

lexicalunit · web-flow · commit c7c5ba0207f6 · 2020-08-15T11:41:28.000-04:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,7 @@
 ## Unreleased version
 
-- Add YAML option `head-extra` which is similar to `footer-extra` but is used to include custom HTML code in a page's `<head>` tag 
+- Add YAML option `head-extra` which is similar to `footer-extra` but is used to include custom HTML code in a page's `<head>` tag
+- Add automatic navbar color detection (#702)
 
 ## v4.1.0 2020-08-08
 
diff --git a/assets/js/main.js b/assets/js/main.js
@@ -6,6 +6,17 @@ var BeautifulJekyllJS = {
   numImgs : null,
 
   init : function() {
+    // Set the navbar-dark/light class based on its background color
+    const rgb = $('.navbar').css("background-color").replace(/[^\d,]/g,'').split(",");
+    const brightness = Math.round(( // http://www.w3.org/TR/AERT#color-contrast
+      parseInt(rgb[0]) * 299 +
+      parseInt(rgb[1]) * 587 +
+      parseInt(rgb[2]) * 114
+    ) / 1000);
+    if (brightness <= 125) {
+      $(".navbar").removeClass("navbar-light").addClass("navbar-dark");
+    }
+
     // Shorten the navbar after scrolling a little bit down
     $(window).scroll(function() {
         if ($(".navbar").offset().top > 50) {
