From 383317c4960d94208268db74627f96a3aae29291 Mon Sep 17 00:00:00 2001
From: Kyriakos Milad <contact.kyriakos@gmail.com>
Date: Sat, 4 Jun 2022 01:41:36 +0200
Subject: [PATCH 1/5] Add support for specifying bar color

---
 nprogress.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/nprogress.js b/nprogress.js
index cdb5f4b..aba2824 100644
--- a/nprogress.js
+++ b/nprogress.js
@@ -23,6 +23,7 @@
     speed: 200,
     trickle: true,
     trickleSpeed: 200,
+    barColor: '#29d',
     showSpinner: true,
     barSelector: '[role="bar"]',
     spinnerSelector: '[role="spinner"]',
@@ -241,7 +242,8 @@
 
     css(bar, {
       transition: 'all 0 linear',
-      transform: 'translate3d(' + perc + '%,0,0)'
+      transform: 'translate3d(' + perc + '%,0,0)',
+      backgroundColor: Settings.barColor
     });
 
     if (!Settings.showSpinner) {

From 3be694bf543398946e8b8ed1fe831009543e82c6 Mon Sep 17 00:00:00 2001
From: Kyriakos Milad <contact.kyriakos@gmail.com>
Date: Sat, 4 Jun 2022 01:53:31 +0200
Subject: [PATCH 2/5] Change fancy blur effect color to barColor

---
 nprogress.js | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/nprogress.js b/nprogress.js
index aba2824..4d10dcd 100644
--- a/nprogress.js
+++ b/nprogress.js
@@ -246,6 +246,11 @@
       backgroundColor: Settings.barColor
     });
 
+    // set fancy blur effect color
+    css(progress.querySelector('.peg'), {
+      boxShadow: `0 0 10px ${Settings.barColor}, 0 0 5px ${Settings.barColor}`,
+    });
+
     if (!Settings.showSpinner) {
       spinner = progress.querySelector(Settings.spinnerSelector);
       spinner && removeElement(spinner);

From d428d1b32d9ba262118f972e31cc1ca27b118eef Mon Sep 17 00:00:00 2001
From: Kyriakos Milad <contact.kyriakos@gmail.com>
Date: Sat, 4 Jun 2022 01:58:10 +0200
Subject: [PATCH 3/5] Add support for specifying spinner color

---
 nprogress.js | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/nprogress.js b/nprogress.js
index 4d10dcd..f748fe5 100644
--- a/nprogress.js
+++ b/nprogress.js
@@ -27,6 +27,7 @@
     showSpinner: true,
     barSelector: '[role="bar"]',
     spinnerSelector: '[role="spinner"]',
+    spinnerColor: '#29d',
     parent: 'body',
     template: '<div class="bar" role="bar"><div class="peg"></div></div><div class="spinner" role="spinner"><div class="spinner-icon"></div></div>'
   };
@@ -238,7 +239,8 @@
         parent = isDOM(Settings.parent)
           ? Settings.parent
           : document.querySelector(Settings.parent),
-        spinner
+        spinner,
+        spinnerIconSelector
 
     css(bar, {
       transition: 'all 0 linear',
@@ -248,12 +250,19 @@
 
     // set fancy blur effect color
     css(progress.querySelector('.peg'), {
-      boxShadow: `0 0 10px ${Settings.barColor}, 0 0 5px ${Settings.barColor}`,
+      boxShadow: `0 0 10px ${Settings.barColor}, 0 0 5px ${Settings.barColor}`
     });
 
     if (!Settings.showSpinner) {
       spinner = progress.querySelector(Settings.spinnerSelector);
       spinner && removeElement(spinner);
+    } else {
+      spinner = progress.querySelector(Settings.spinnerSelector);
+      spinnerIconSelector = spinner.querySelector('.spinner-icon');
+      css(spinnerIconSelector, {
+        borderTopColor: Settings.spinnerColor,
+        borderLeftColor: Settings.spinnerColor
+      })
     }
 
     if (parent != document.body) {

From d9638ae38e170383f6313513965f6be96fb389e4 Mon Sep 17 00:00:00 2001
From: Kyriakos Milad <contact.kyriakos@gmail.com>
Date: Sat, 4 Jun 2022 02:08:13 +0200
Subject: [PATCH 4/5] Update Readme.md: Add barColor and spinnerColor
 configurations

---
 Readme.md | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/Readme.md b/Readme.md
index 2ddda6e..6c73f96 100644
--- a/Readme.md
+++ b/Readme.md
@@ -177,11 +177,25 @@ specify this to change the parent container. (default: `body`)
 NProgress.configure({ parent: '#container' });
 ~~~
 
+#### `barColor`
+Specify this to change the bar color. (default: `#29d`)
+
+~~~ js
+NProgress.configure({ barColor: '#343A40' });
+~~~
+
+#### `spinnerColor`
+Specify this to change the spinner color. (default: `#29d`)
+
+~~~ js
+NProgress.configure({ spinnerColor: '#343A40' });
+~~~
+
+
 Customization
 -------------
 
-Just edit `nprogress.css` to your liking. Tip: you probably only want to find
-and replace occurrences of `#29d`.
+Just edit `nprogress.css` to your liking.
 
 The included CSS file is pretty minimal... in fact, feel free to scrap it and
 make your own!

From 81ac034d0e214da66f8375ddff6970fd83f1aa5e Mon Sep 17 00:00:00 2001
From: Kyriakos Milad <contact.kyriakos@gmail.com>
Date: Sat, 4 Jun 2022 02:38:26 +0200
Subject: [PATCH 5/5] Clean code: Add comments

---
 nprogress.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/nprogress.js b/nprogress.js
index f748fe5..f3b46e0 100644
--- a/nprogress.js
+++ b/nprogress.js
@@ -245,7 +245,7 @@
     css(bar, {
       transition: 'all 0 linear',
       transform: 'translate3d(' + perc + '%,0,0)',
-      backgroundColor: Settings.barColor
+      backgroundColor: Settings.barColor, // set bar color
     });
 
     // set fancy blur effect color
@@ -257,6 +257,7 @@
       spinner = progress.querySelector(Settings.spinnerSelector);
       spinner && removeElement(spinner);
     } else {
+      // set spinner color
       spinner = progress.querySelector(Settings.spinnerSelector);
       spinnerIconSelector = spinner.querySelector('.spinner-icon');
       css(spinnerIconSelector, {