feat(projects): nprogress color feat theme color

src/plugins/assets.ts

@@ -1,4 +1,3 @@
 import 'virtual:svg-icons-register';
 import 'uno.css';
-import 'nprogress/nprogress.css';
 import '../styles/global.css';

src/store/modules/theme/shared.ts

@@ -32,15 +32,18 @@ export function initThemeSettings(colors: App.Theme.ThemeTokenColor) {
  * @param darkMode is dark mode
  */
 export function createThemeToken() {
+  const paletteColors = createThemePaletteColors({
+    primary: '#646cff',
+    info: '#2080f0',
+    success: '#52c41a',
+    warning: '#faad14',
+    error: '#f5222d'
+  });
+
   const themeTokens: App.Theme.ThemeToken = {
     colors: {
-      ...createThemePaletteColors({
-        primary: '#646cff',
-        info: '#2080f0',
-        success: '#52c41a',
-        warning: '#faad14',
-        error: '#f5222d'
-      }),
+      ...paletteColors,
+      nprogress: paletteColors.primary,
       container: 'rgba(255, 255, 255, 0.8)',
       layout: 'rgba(247, 250, 252, 1)',
       base_text: 'rgba(0, 0, 0, 0.88)'

src/styles/global.css

@@ -1,4 +1,5 @@
 @import "./reset.css";
+@import "./nprogress.css";
 
 html,
 body,

src/styles/nprogress.css

@@ -0,0 +1,83 @@
+/* Make clicks pass-through */
+#nprogress {
+  pointer-events: none;
+}
+
+#nprogress .bar {
+  background: rgb(var(--nprogress-color));
+
+  position: fixed;
+  z-index: 1031;
+  top: 0;
+  left: 0;
+
+  width: 100%;
+  height: 2px;
+}
+
+/* Fancy blur effect */
+#nprogress .peg {
+  display: block;
+  position: absolute;
+  right: 0px;
+  width: 100px;
+  height: 100%;
+  box-shadow:
+    0 0 10px rgb(var(--nprogress-color)),
+    0 0 5px rgb(var(--nprogress-color));
+  opacity: 1;
+
+  -webkit-transform: rotate(3deg) translate(0px, -4px);
+  -ms-transform: rotate(3deg) translate(0px, -4px);
+  transform: rotate(3deg) translate(0px, -4px);
+}
+
+/* Remove these to get rid of the spinner */
+#nprogress .spinner {
+  display: block;
+  position: fixed;
+  z-index: 1031;
+  top: 15px;
+  right: 15px;
+}
+
+#nprogress .spinner-icon {
+  width: 18px;
+  height: 18px;
+  box-sizing: border-box;
+
+  border: solid 2px transparent;
+  border-top-color: rgb(var(--nprogress-color));
+  border-left-color: rgb(var(--nprogress-color));
+  border-radius: 50%;
+
+  -webkit-animation: nprogress-spinner 400ms linear infinite;
+  animation: nprogress-spinner 400ms linear infinite;
+}
+
+.nprogress-custom-parent {
+  overflow: hidden;
+  position: relative;
+}
+
+.nprogress-custom-parent #nprogress .spinner,
+.nprogress-custom-parent #nprogress .bar {
+  position: absolute;
+}
+
+@-webkit-keyframes nprogress-spinner {
+  0% {
+    -webkit-transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+  }
+}
+@keyframes nprogress-spinner {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}

src/theme/vars.ts

@@ -17,12 +17,15 @@ function createColorPaletteVars() {
   return colorPaletteVar;
 }
 
+const colorPaletteVars = createColorPaletteVars();
+
 /**
  * theme vars
  */
 export const themeVars: App.Theme.ThemeToken = {
   colors: {
-    ...createColorPaletteVars(),
+    ...colorPaletteVars,
+    nprogress: 'rgb(var(--nprogress-color))',
     container: 'rgb(var(--container-bg-color))',
     layout: 'rgb(var(--layout-bg-color))',
     base_text: 'rgb(var(--base-text-color))'

src/typings/app.d.ts

@@ -51,6 +51,7 @@ declare namespace App {
     type BaseToken = Record<string, Record<string, string>>;
 
     interface ThemeTokenColor extends ThemePaletteColor {
+      nprogress: string;
       container: string;
       layout: string;
       base_text: string;