feat: support customize progress bar color

re #1

Author: 2nthony

README.md

@@ -100,6 +100,27 @@ new LoadingScreenPlugin({
 })
 ```
 
+### theme
+
+- Type: `ThemeConfig`
+- Default: `DefaultThemeConfig`
+
+Customize loading screen progress bar color.
+
+```ts
+interface ThemeConfig {
+  client?: string
+  server?: string
+  modern?: string
+}
+
+const DefaultThemeConfig = {
+  client: '#8ed5fb',
+  server: '#1b78bf',
+  modern: '#2f495e'
+}
+```
+
 ### env
 
 - Type: `'development' | 'production'`

app/app.vue

@@ -21,7 +21,7 @@
       <div v-for="bundle of bundles" :key="bundle" class="row">
         <h3>{{ bundle | capitalize }} bundle</h3>
         <div class="progress_bar_container">
-          <div class="progress_bar" :class="bundle" :style="{ width: `${states[bundle].progress}%` }" />
+          <div class="progress_bar" :style="{ width: `${states[bundle].progress}%`, backgroundColor: theme[bundle] }" />
         </div>
         <h4>{{ states[bundle].status }}</h4>
       </div>
@@ -72,7 +72,8 @@ export default {
       isFinished: false,
       baseURL: window.$BASE_URL,
       bundles: [],
-      states: {}
+      states: {},
+      theme: window.$THEME
     }
   },
 

app/css/loading.css

@@ -76,16 +76,3 @@ h4 {
   width: 10px;
   transition: width 0.4s;
 }
-
-.progress_bar.client {
-  background-color: #8ed5fb;
-}
-
-.progress_bar.server {
-  background-color: #1b78bf;
-}
-
-.progress_bar.modern {
-  background-color: #2F495E;
-}
-

app/index.html

@@ -10,6 +10,7 @@
   <!-- loading_app -->
   <div id="webpack_loading_screen"></div>
   <script>window.$STATE = {STATE}</script>
+  <script>window.$THEME = {THEME}</script>
   <script>window.$LOGO = '{LOGO}'</script>
   <script>window.$BASE_URL = '{BASE_URL}'</script>
 </body>

lib/loading.js

@@ -12,6 +12,7 @@ class LoadingUI {
     this.baseURL = opts.baseURL
 
     this.logo = opts.logo
+    this.theme = opts.theme
 
     this.serveIndex = this.serveIndex.bind(this)
     this.serveWS = this.serveWS.bind(this)
@@ -89,6 +90,7 @@ class LoadingUI {
     res.end(
       this.indexTemplate
         .replace('{STATE}', JSON.stringify(this.state))
+        .replace('{THEME}', JSON.stringify(this.theme))
         .replace('{LOGO}', this.logo)
         .replace(/{BASE_URL}/g, this.baseURL)
     )

lib/plugin.js

@@ -13,6 +13,11 @@ module.exports = class ProgressPlugin extends Plugin {
         port: process.env.port || 4000,
         callback: () => {
           console.log(`[loading screen]:  http://localhost:${this.opts.port}`)
+        },
+        theme: {
+          client: '#8ed5fb',
+          server: '#1b78bf',
+          modern: '#2f495e'
         }
       },
       opts