Apply theme colours to turbolinks progress bar

app/assets/stylesheets/_variables.scss

@@ -90,6 +90,8 @@ $avatar-sizes: (
   --body-text: 0, 0, 0;
   --muted-text: 108, 117, 125;
   --input-text: 0, 0, 0;
+
+  --turbolinks-progress-color: #a58adc; // --primary lightened by 25%
 }
 
 $gray: #e2e2e2;

app/assets/stylesheets/application.scss

@@ -51,6 +51,7 @@
 "overrides/minicolors",
 "overrides/modal",
 "overrides/navbar",
+"overrides/turbolinks",
 "overrides/sweet-alert";
 
 /**

app/assets/stylesheets/overrides/_turbolinks.scss

@@ -0,0 +1,3 @@
+.turbolinks-progress-bar {
+  background: var(--turbolinks-progress-color);
+}

app/helpers/theme_helper.rb

@@ -40,6 +40,7 @@ module ThemeHelper
         body += "\t--#{ATTRIBUTE_MAP[k]}: ##{get_hex_color_from_theme_value(v)};\n"
       end
     end
+    body += "\t--turbolinks-progress-color: ##{lighten(theme.primary_color)}\n"
 
     body += "}"
 
@@ -70,4 +71,20 @@ module ThemeHelper
     hexes = value.split(/(.{2})/).reject { |c| c.empty? }
     hexes.map(&:hex).join(", ")
   end
+
+  def rgb_values_from_hex(value)
+    [
+      (value & 0xFF0000) >> 16, # R
+      (value & 0x00FF00) >> 8, # G
+      value & 0x0000FF # B
+    ]
+  end
+
+  def rgb_to_hex(rgb_values)
+    rgb_values.map.with_index { |v, i| v << (2 - i) * 8 }.reduce(&:+).to_s(16)
+  end
+
+  def lighten(value, amount = 0.25)
+    rgb_to_hex(rgb_values_from_hex(value).map { |v| [(v + 255 * amount).round, 255].min })
+  end
 end