Add ability to set the progressbar color from the Settings screen

1 files changed, 16 insertions, 2 deletions

diff --git a/src/features/appearance/index.ts b/src/features/appearance/index.ts
index 7562475a6..42de5e4cc 100644
--- a/src/features/appearance/index.ts
+++ b/src/features/appearance/index.ts
@@ -1,5 +1,7 @@
 import color from 'color';
 import { reaction } from 'mobx';
+import TopBarProgress from 'react-topbar-progress-indicator';
+
 import { isWindows, isLinux } from '../../environment';
 import {
   DEFAULT_APP_SETTINGS,
@@ -9,8 +11,6 @@ import {
   SIDEBAR_SERVICES_LOCATION_BOTTOMRIGHT,
 } from '../../config';
 
-
-
 const STYLE_ELEMENT_ID = 'custom-appearance-style';
 
 function createStyleElement() {
@@ -398,19 +398,33 @@ function generateStyle(settings) {
 
   return style;
 }
+
+function updateProgressbar(settings) {
+  TopBarProgress.config({
+    barThickness: 4,
+    barColors: {
+      '0': settings.progressbarAccentColor,
+    },
+    shadowBlur: 5
+  });
+}
+
 function updateStyle(settings) {
   const style = generateStyle(settings);
   setAppearance(style);
+  updateProgressbar(settings);
 }
 
 export default function initAppearance(stores) {
   const { settings } = stores;
   createStyleElement();
+  updateProgressbar(settings);
 
   // Update style when settings change
   reaction(
     () => [
       settings.all.app.accentColor,
+      settings.all.app.progressbarAccentColor,
       settings.all.app.serviceRibbonWidth,
       settings.all.app.iconSize,
       settings.all.app.showDragArea,