🎨 Apply color scheme to nprogressbar

MenuDocs · Feb 23, 2021 · cbf6e0a · cbf6e0a
1 parent 1a8fb8a
commit cbf6e0a
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 1 deletion.
diff --git a/components/LoadingPage.vue b/components/LoadingPage.vue
@@ -1,6 +1,5 @@
 <template>
  <div id="loader-wrapper" :style="color">
-<!-- <h1>HELLO WORLDDDDDD</h1>-->
  <div class="loader-main" :style="color">
  <div v-for="item in 4" :key="`out${item}`" :style="color">
  </div>

diff --git a/styles/themes/purple.styl b/styles/themes/purple.styl
@@ -153,6 +153,19 @@
  .sidebar::-webkit-scrollbar-thumb {
  background-color: $purpleAccentColor;
  }
+
+ #nprogress .bar {
+ background: $purpleAccentColor
+ }
+
+ #nprogress .peg {
+ box-shadow: 0 0 10px $purpleAccentColor, 0 0 5px $purpleAccentColor;
+ }
+
+ #nprogress .spinner-icon {
+ border-top-color: $purpleAccentColor;
+ border-left-color: $purpleAccentColor;
+ }
 }
 
 .reco-theme-purple::-webkit-scrollbar-thumb:vertical {

diff --git a/styles/themes/red.styl b/styles/themes/red.styl
@@ -152,6 +152,19 @@
  .sidebar::-webkit-scrollbar-thumb {
  background-color: $redAccentColor;
  }
+
+ #nprogress .bar {
+ background: $redAccentColor
+ }
+
+ #nprogress .peg {
+ box-shadow: 0 0 10px $redAccentColor, 0 0 5px $redAccentColor;
+ }
+
+ #nprogress .spinner-icon {
+ border-top-color: $redAccentColor;
+ border-left-color: $redAccentColor;
+ }
 }
 
 .reco-theme-red::-webkit-scrollbar-thumb:vertical {